Use ECharts to implement the map drill-down function (drill down from the city level of a province to the county level)

1  var cityMap = {  
 2      "Changsha City": "430100" ,  
 3      "Zhuzhou City": "430200" ,  
 4      "Xiangtan City": "430300" ,  
 5      "Hengyang City": "430400" ,  
 6      "Shaoyang City" : "430500" ,  
 7      "Yueyang City": "430600" ,  
 8      "Changde City": "430700" ,  
 9      "Zhangjiajie City": "430800" ,  
 10      "Yiyang City": "430900" ,  
 11      "Chenzhou City" : "431000",  
 12      "Yongzhou City": "431100" ,  
 13      "Huaihua City": "431200" ,  
14      "Loudi City": "431300" ,  
 15      "Xiangxi Tujia and Miao Autonomous Prefecture": "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      // Custom extended chart type   
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 + ' (wheel or click to switch)' ;  
 64      myChart.setOption(option, true );  
 65  });  
 66 option = {  
 67      title: {  
 68          text : 'Map of 344 major cities (counties) in China by Pactera Chen Ran' ,  
 69          link : 'http://www.pactera.com/' ,  
 70          subtext : 'Changsha City (roller or click to switch) '  
 71      },  
 72      tooltip : {  
 73          trigger: 'item' ,  
 74         formatter: 'Scroll wheel or click to switch<br/>{b}'  
 75      },  
 76      series : [  
 77          {  
 78              name: 'Map of 344 major cities (counties) in the country' ,  
 79              type: 'map' ,  
 80              mapType: ' Hunan' ,  
 81              selectedMode : 'single' ,  
 82              itemStyle:{  
 83                  normal:{label:{show: true }},  
 84                  emphasis:{label:{show: true }}  
 85              },  
 86              data:[]  
 87         }  
88     ]  
89 };  

 

1. Copy and paste the above code into the black area on the left of http://echarts.baidu.com/doc/example/mix5.html, then click refresh to see the effect.  

         2. Where var  mapGeoData =  require('echarts/util/mapData/params'); My understanding is to find the param.js file, and then execute a loop to load the county-level data corresponding to the city into the param.js file 

 

 

 

Learn a little bit of programming every day PDF e-books, video tutorials for free download:
http://www.shitanlife.com/code