Echarts地图省市跳转数据展示

     介于前一段时间做了省市地图跳转的东西，遇到了一些问题，如今做下总结，希望日后可以用到，也可以帮到遇到同样问题的朋友。

       前提：Echarts3.0（其他版本不知道情况是否相同）

一、数据准备

1、各省份对应的数据；

2、各城市对应的数据；

二、地图js下载

1、http://echarts.baidu.com/download-map.html

此页面提供了中国地图、世界地图、各省地图的下载，支持js、json两种格式，当前采用js格式。

2、省市跳转，需要用到中国地图、各省地图，将其下载到本地，引用到自己的页面。

三、数据展示

1、页面引用了Echarts工具js和地图js后，需要添加几行代码：

2、其次页面创建一片区域供实例展示：

3、js文件中，查询数据并进行图表初始化：

 $.ajax({
		type : "post",
		url : "../../componentsStatistics/componentsPrvncGatherStatistics.do?"+params,
		dataType : 'json',
		async : false,//设置为同步操作就可以给全局变量赋值成功 
		success : function(data) {
			optionData = data.rows[0];
		}
	});
	myChart = echarts.init(document.getElementById('main'));
	componentPrvncStatistic(myChart,optionData);

4、下面对componentPrvncStatistic方法进行说明：

1）数据接收、设置数据默认最大值

//数据准备
var seriesData = optionData.seriesData;
//设置默认值为100
var maxFunnelValue = getMaxDataValue(seriesData);
if (maxFunnelValue==null || maxFunnelValue=="") {
      maxFunnelValue = 100;
}

2）注册配置以及事件，省名称列表初始化，省名称要是以下形式，省份地图才会展示，需要做好配对。

 var ecConfig = require('echarts/config');
	var zrEvent = require('zrender/tool/event');
	var curIndx = 0;
	var flag = true;
	var mapType = [
	    'china',
	    // 23个省
	    '广东', '青海', '四川', '海南', '陕西', 
	    '甘肃', '云南', '湖南', '湖北', '黑龙江',
	    '贵州', '山东', '江西', '河南', '河北',
	    '山西', '安徽', '福建', '浙江', '江苏', 
	    '吉林', '辽宁', '台湾',
	    // 5个自治区
	    '新疆', '广西', '宁夏', '内蒙古', '西藏', 
	    // 4个直辖市
	    '北京', '天津', '上海', '重庆',
	    // 2个特别行政区
	    '香港', '澳门'
	];

3）点击某个省份时，对于城市名称比较密集的省份，屏蔽名称展示（如果有好的解决方法，欢迎留言，感谢！）

 myChart.on('click', function (param){
	    var len = mapType.length;
	    var mt = mapType[curIndx % len];
	    if (mt == 'china') {
	        // 全国选择时指定到选中的省份
	        var selected = param.name;
	        for (var i = 0 ; i

4）option准备

    option = {
	    title: {
	        text : '采集省统计'    //图表标题名称
//            subtext : '（点击切换）'    //副标题
           },
	    tooltip : {
	        trigger: 'item'
	    },
	    legend: {
	        orient: 'vertical',
	        x:'right',
	        data:['采集数量（个）']
	    },
	    dataRange: {
	        min: 0,
	        max: maxFunnelValue,
	        color:['#4198E6','#E0FFFF'],  //端值对应的颜色
	        text:['高','低'],           // 文本，默认为数值文本
	        calculable : true
	    },
	    color:['#2ECBCA','#B6A2DF','#59B1F0','#FFB880','#87CEFA'],  //图例的颜色
	    toolbox: {
	    	show: true,
	    	orient : 'vertical',
	    	x: 'right',
	    	y: 'center',
	    	feature : {
	    	mark : {show: true},
	    	dataView : {show: true, readOnly: false},
	    	restore : {show: true},
	    	saveAsImage : {show: true}
	    }
	    },
	    series : [
	        {
	            name: '采集数量（个）',
	            type: 'map',
	            mapType: 'china',
	            selectedMode : 'single',
	            itemStyle:{
	                normal:{label:{show:flag}},    //地图初始化城市名称是否展示
	                emphasis:{label:{show:true}}   //鼠标移入城市名称是否展示
	            },
	            data:function(){
					var serie=[];
					var data = seriesData[0].dataArray;
					for(var i=0;i

5）set

        myChart.setOption(option); 
	window.onresize = myChart.resize;

        以上是整个流程的概要说明，其中有很多地方有不足之处，还请批评指正！初学者可以参考思路，结合官方的Demo进行使用。

5、结果展示：

1）全国地图展示：

2）某个省份