Echarts-地图扩展-标准geoJson格式扩展地图-例子

一笑奈何 提交于 2020-01-07 05:41:19

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

         本人菜鸟一枚,最近搞echarts地图。看到官方给的“标准geoJson格式扩展地图-全国主要城市”的例子,瞬间就蒙逼了。(http://echarts.baidu.com/echarts2/doc/example/map20.html ,2016年8月29日 找到的)不怪人官网的例子不好,实在是我看不懂它是怎么弄得。最后折腾了一晚上,最后终于弄出个想样子的例子来。(有同感的收藏下,高手勿喷!)

        下面这个例子是我弄得汕尾市的,里面的链接是我项目的,我就不改了。这段代码其实是两个例子凑起来的,大家也可以再自己的项目里面试试。中间绿色部分是抄的官方的“标准geoJson格式扩展地图-全国主要城市”code。其他代码抄的是Echarts的start第4步的例子。大家改成自己的项目路径就ok了。

 

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="{weiqiye::STATICS}/wx/echarts/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: '{weiqiye::STATICS}/wx/echarts/build/dist'
            }
        });
       
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/map' // 使用柱状图就加载bar模块,按需加载
            ],
            function (ec) {
                // 基于准备好的dom,初始化echarts图表
                var myChart = ec.init(document.getElementById('main'));
               
                var cityMap = {
                     "汕尾市": "441500"
                 };


                 var curIndx = 0;
                 var mapType = [];
                 var mapGeoData = require('echarts/util/mapData/params');
                 console.log(mapGeoData)
                 for (var city in cityMap) {
                     mapType.push(city);
                     // 自定义扩展图表类型
                     mapGeoData.params[city] = {
                         getGeoJson: (function (c) {
                             var geoJsonName = cityMap[c];
                             return function (callback) {
                                 $.getJSON('{weiqiye::STATICS}/wx/echarts/geoJson/china-main-city/' + geoJsonName + '.json', callback);
                             }
                         })(city)
                     }
                 }

                 var ecConfig = require('echarts/config');
                 var zrEvent = require('zrender/tool/event');
                 
                 
                 option = {
                     title: {
                         text : '',
                     },
                     tooltip : {
                         trigger: 'item',
                         formatter: '{b}所有景点'
                     },
                     series : [
                         {
                             name: '',
                             type: 'map',
                             mapType: '汕尾市',
                             selectedMode : 'single',
                             itemStyle:{
                                 normal:{label:{show:true}},
                                 emphasis:{label:{show:true}}
                             },
                             data:[]
                         }
                     ]
                 };
                 

                 // 为echarts对象加载数据
                    myChart.setOption(option);
               
       
            }
        );
    </script>
</body>

 

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!