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 };
将上面部分代码复制，然后粘贴覆盖到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
转载于:https://www.cnblogs.com/scode2/p/8966305.html
相关资源：echarts地图下钻，实现思路
