echarts地图下钻

最近做的项目用到了echarts的地图，默认为市区地图，需要实现从市区下钻到县级，首先我用的是echarts3.0实现的地图钻取功能。

要实现的效果为图(市区可切换，点市区还可以钻取)

1.第一步去echarts官网下载3.0的echarts.js(ps:开发阶段推荐下载源代码，方便调试错误)

2.下载相应的省、市js和json文件(我是在echarts2.0下载的源码里面包含json文件)

3.编写city-map.js配置信息(可以把china-main-city-map.js复制一份，然后改成自己需要的)

   因为我要实现省、市两级，所以我的配置文件信息如下

4.页面引入echart.js和city-map.js

5.把要用的省份的js和市区的json文件复制到项目里(我是把省份和市区全改成了json文件)

打个比方说，我要把shan_dong_geo.js改成01.json只需要把shan_dong_geo.js文件里的return里的copy到01.json即可，市区的不用管，本身就是json

json文件如下

6。然后我们就要写代码啦

    $(function () {
	 //默认加载山东省的地图
	 queryMap({mapName:'山东省',mapCity:true});
	});
function queryMap(param) {
	var jsonName='';
	if(param.mapCity){
		//获取页面选择省份的名字
	    param.mapName=$(".title a.currColor").html();
		//获对应的json的编号
		jsonName=cityMap[mapName];
	}else{
		jsonName=cityMap[mapName];
	}

	$.getJSON('/js/map/geoJson/china-main-city/' + jsonName + '.json',function(data){
		//注册地图
		echarts.registerMap(data.name,data);
		//创建echarts
	    var myChart= echarts.init(document.getElementById('mapSD'));
	   //清除当前图图表
	    myChart.clear();
	    var option = {
	        roam: true,
	        tooltip: {
	            trigger: 'item',
	            formatter: function (params) {
	                var msg = '';
	                if (isNaN(params.value)) {
	                    return params.name + ':0人' + msg;
	                } else {
	                    return params.name + ':' + params.value + '人' + msg;
	                }

	            }
	        },
	        visualMap: {
	            min: 0,
	            max: 1000000,
	            left: 'left',
	            top: 'bottom',
	            text: ['高', '低'], // 文本，默认为数值文本
	            calculable: true,
	            show: false
	        },
	        series: [{
	            type: 'map',
	            mapType: data.name,//这个name就是我在json文件自己加上去的
	            itemStyle: {
	                normal: {
	                    label: {
	                        show: true
	                    }
	                }
	            }, data: []
	        }]
	    };
	    //myChart.hideLoading();
	    myChart.setOption(option);
	   
	    //清除图表click事件，不然每次点击地图事件都会累加
    	myChart.off('click');    	
	    myChart.on('click', function(param) {
	    	debugger;
	    	if(mapCity&&mapName.indexOf('天津')<0){
	    		//下钻时需要通过当前市区行政编码,而如果不下钻的话，地图会根据当前页面元素获取code
		    	mapName=param.name;
		    	mapCity=false;
	    	}else{	
		    	mapCity=true;
	    	}	    	
	    	queryMap({mapName:mapName,mapCity:mapCity});
	    });
	});
}