使用ECharts来实现地图下钻功能（某省的市级下钻到县级） 

 1 var cityMap = {  
 2     "长沙市": "430100",  
 3     "株洲市": "430200",  
 4     "湘潭市": "430300",  
 5     "衡阳市": "430400",  
 6     "邵阳市": "430500",  
 7     "岳阳市": "430600",  
 8     "常德市": "430700",  
 9     "张家界市": "430800",  
10     "益阳市": "430900",  
11     "郴州市": "431000",  
12     "永州市": "431100",  
13     "怀化市": "431200",  
14     "娄底市": "431300",  
15     "湘西土家族苗族自治州": "433100"  
16     
17 };  
18 var curIndx = 0;  
19 var mapType = [];  
20 var mapGeoData = require('echarts/util/mapData/params');  
21 for (var city in cityMap) {  
22     mapType.push(city);  
23     // 自定义扩展图表类型  
24     mapGeoData.params[city] = {  
25         getGeoJson: (function (c) {  
26             var geoJsonName = cityMap[c];  
27             return function (callback) {  
28                 $.getJSON('geoJson/china-main-city/' + geoJsonName + '.json', callback);  
29             }  
30         })(city)  
31     }  
32 }  
33   
34 var ecConfig = require('echarts/config');  
35 var zrEvent = require('zrender/tool/event');  
36 document.getElementById('main').onmousewheel = function (e){  
37     var event = e || window.event;  
38     curIndx += zrEvent.getDelta(event) > 0 ? (-1) : 1;  
39     if (curIndx < 0) {  
40         curIndx = mapType.length - 1;  
41     }  
42     var mt = mapType[curIndx % mapType.length];  
43     option.series[0].mapType = mt;  
44     option.title.subtext = mt + ' （滚轮或点击切换）';  
45     myChart.setOption(option, true);  
46     zrEvent.stop(event);  
47 };  
48 myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){  
49     var mt = param.target;  
50     var len = mapType.length;  
51     var f= false;  
52     for(var i=0;i<len;i++){  
53         if(mt == mapType[i]){  
54               f =true;  
55               mt=mapType[i];  
56         }  
57      }  
58   if(!f){  
59     mt='湖南';  
60   }  
61     option.series[0].mapType = mt;  
62       
63     option.title.subtext = mt + ' （滚轮或点击切换）';  
64     myChart.setOption(option, true);  
65 });  
66 option = {  
67     title: {  
68         text : '全国344个主要城市（县）地图 by Pactera 陈然',  
69         link : 'http://www.pactera.com/',  
70         subtext : '长沙市 （滚轮或点击切换）'  
71     },  
72     tooltip : {  
73         trigger: 'item',  
74         formatter: '滚轮或点击切换<br/>{b}'  
75     },  
76     series : [  
77         {  
78             name: '全国344个主要城市（县）地图',  
79             type: 'map',  
80             mapType: '湖南',  
81             selectedMode : 'single',  
82             itemStyle:{  
83                 normal:{label:{show:true}},  
84                 emphasis:{label:{show:true}}  
85             },  
86             data:[]  
87         }  
88     ]  
89 };

 

  1. 将上面部分代码复制，然后粘贴覆盖到http://echarts.baidu.com/doc/example/mix5.html左侧的黑色区域中，然后点击刷新，即可看到效果。  

         2.其中var mapGeoData = require('echarts/util/mapData/params');我的理解是找到param.js这个文件，然后执行循环将city对应的县级数据加载到param.js文件中 

 

 

 

每天学习一点点 编程PDF电子书、视频教程免费下载：
http://www.shitanlife.com/code

posted @ 2018-04-28 10:42  漫步CODE人生  阅读(1806)  评论(0)  编辑  收藏  举报
无