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

标签：echarts   map   下钻   

这里是一个简单的demo：

var cityMap = {
    "长沙市": "430100",
    "株洲市": "430200",
    "湘潭市": "430300",
    "衡阳市": "430400",
    "邵阳市": "430500",
    "岳阳市": "430600",
    "常德市": "430700",
    "张家界市": "430800",
    "益阳市": "430900",
    "郴州市": "431000",
    "永州市": "431100",
    "怀化市": "431200",
    "娄底市": "431300",
    "湘西土家族苗族自治州": "433100"
  
};
var curIndx = 0;
var mapType = [];
var mapGeoData = require('echarts/util/mapData/params');
for (var city in cityMap) {
    mapType.push(city);
    // 自定义扩展图表类型
    mapGeoData.params[city] = {
        getGeoJson: (function (c) {
            var geoJsonName = cityMap[c];
            return function (callback) {
                $.getJSON('geoJson/china-main-city/' + geoJsonName + '.json', callback);
            }
        })(city)
    }
}

var ecConfig = require('echarts/config');
var zrEvent = require('zrender/tool/event');
document.getElementById('main').onmousewheel = function (e){
    var event = e || window.event;
    curIndx += zrEvent.getDelta(event) > 0 ? (-1) : 1;
    if (curIndx < 0) {
        curIndx = mapType.length - 1;
    }
    var mt = mapType[curIndx % mapType.length];
    option.series[0].mapType = mt;
    option.title.subtext = mt + ' （滚轮或点击切换）';
    myChart.setOption(option, true);
    zrEvent.stop(event);
};
myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){
    var mt = param.target;
    var len = mapType.length;
    var f= false;
    for(var i=0;i<len;i++){
        if(mt == mapType[i]){
              f =true;
              mt=mapType[i];
        }
     }
  if(!f){
  	mt='湖南';
  }
    option.series[0].mapType = mt;
	
    option.title.subtext = mt + ' （滚轮或点击切换）';
    myChart.setOption(option, true);
});
option = {
    title: {
        text : '全国344个主要城市（县）地图 by Pactera 陈然',
        link : 'http://www.pactera.com/',
        subtext : '长沙市 （滚轮或点击切换）'
    },
    tooltip : {
        trigger: 'item',
        formatter: '滚轮或点击切换<br/>{b}'
    },
    series : [
        {
            name: '全国344个主要城市（县）地图',
            type: 'map',
            mapType: '湖南',
            selectedMode : 'single',
            itemStyle:{
                normal:{label:{show:true}},
                emphasis:{label:{show:true}}
            },
            data:[]
        }
    ]
};
                    

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

其中<span style="font-family: Arial, Helvetica, sans-serif;">var mapGeoData = require('echarts/util/mapData/params');我的理解是找到param.js这个文件，然后执行循环将city对应的县级数据加载到param.js文件中</span><pre name="code" class="html">

for (var city in cityMap) {
    mapType.push(city);
    // 自定义扩展图表类型
    mapGeoData.params[city] = {//city
        getGeoJson: (function (c) {//city对应的县级数据
            var geoJsonName = cityMap[c];
            return function (callback) {
                $.getJSON('geoJson/china-main-city/' + geoJsonName + '.json', callback);
            }
        })(city)
    }
}

</pre>

在我自己的项目中是这样的写的：

<script type="text/javascript">
 /* 加载县级数据 */
   var  cityMap = {
          "长沙市": "430100",
          "株洲市": "430200",
          "湘潭市": "430300",
          "衡阳市": "430400",
          "邵阳市": "430500",
          "岳阳市": "430600",
          "常德市": "430700",
          "张家界市": "430800",
          "益阳市": "430900",
          "郴州市": "431000",
          "永州市": "431100",
          "怀化市": "431200",
          "娄底市": "431300",
          "湘西土家族苗族自治州": "433100"
    };
    var mapType = [];
    var base = '<%=request.getContextPath()%>';
    //var mapGeoData = require('/szft/js/echarts/src/util/mapData/params');//这是需要扩展的文件(将县级数据存档 )<span style="font-family: Arial, Helvetica, sans-serif;">（这个路径要写对，否则报js错误：</span><pre name="code" class="html"><span style="white-space:pre">	</span>//...is not exist<span style="font-family: Arial, Helvetica, sans-serif;">）</span>

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

标签：echarts   map   下钻   

原文地址：http://blog.csdn.net/hjxdreamer/article/details/42875313