echart湖南地图

最近项目中用到echart地图组件，湖南地图完整版本（提供下坠功能），供大家参考。

1、对地图数据进行注册，制定mapId。

echarts.registerMap(mapId,json坐标数据项);

hnMap.js中注册了湖南省，以及各地市的坐标数据。

分别对应为：hnMap（全省）、csMap（长沙）、xtMap（湘潭）、zzMap（株洲）、hyMap（衡阳）、syMap（邵阳）、yyMap（岳阳）、cdMap（常德）、zjjMap（张家界）、yiyMap（益阳）、czMap（郴州）、yzMap（永州）、hhMap（怀化市）、ldMap（娄底）、xxMap（湘西）。

2、定义echart的option

• 定义option

var  option = {
	tooltip: {//提示信息
           trigger: 'item',
            formatter :function(param){
            	if(param.data!=null&¶m.data!='undefined'){
           	 		var valueData=param.data.value;
            	    return param.marker +param.data.name+'
'+'标题：'+valueData+'';
            	}else
            		return '';
        	}
        },
        //颜色选取器（数据可视化visualMap）
        visualMap: {
        	type: 'continuous',    //定义为连续型 viusalMap
            text:['高','低'],
            realtime: false,       //拖拽时，是否实时更新
            calculable: true,      //显示或隐藏手柄（手柄能拖拽改变值域）
            inRange: {             //定义 在选中范围中 的视觉元素(渲染颜色)
                 color: ['#eaa557','#3fe4ef','#ffffff','#26b2b5','#f8d442','#11fba7','#0a977e','#e76767']
            },
            left:20,
            show: false,           //不显示
            textStyle:{
            color:['#9cecfb']
            }
        }
};

• 定义Series

//定义Series
function getHeatSeries_(mapId,city_data){
	var series = [];
		series.push({
            type: 'map',
             zoom: 1.2,//等比缩放
            mapType:mapId,
	        itemStyle: {
	        	normal:{label:{show:true}},
                emphasis:{label:{show:true}}
	        },
	        data: city_data
		});
	return series;
};

3、地图绘制

//热力图绘制开始
	function initHeatMap(orgCode, mapId) {
		var data=city_data[orgCode][1];//当前地市对应的数据
		var series = getHeatSeries_(mapId, data);
		option.series =series;
		data = sortData(data);//数据排序
		option.visualMap.min = jb_type == 0 ?
 data[data.length - 1].VALUE1 :
 data[data.length - 1].VALUE2;//数据排序之后，最后一个值为最小值
		option.visualMap.max = jb_type == 0 ?
 data[0].VALUE1 : data[0].VALUE2;//数据排序之后，第一个值为最大值
		cityMap = echarts.init(document.getElementById('cityMap'));
		cityMap.setOption(option);
		statisticsTable(data);
		//屏幕重置大小
		window.addEventListener("resize", function() {
			cityMap.resize();
			cityMap.setOption(option, true);
		});
	};

4、数据异步

//根据地市code,地市mapId异步设置地图
function refreshMapData(orgCode,mapId){
		var url =  BASE_PATH + "/onestop/xxxx.action";
		var param = {"orgCode" : orgCode};
		$.post(url, param, function(data){
			if(data.errCode != "0"){
				console.error(data.errMsg);
				return;
			}
			if(data.list.length == 0 || data.list[0] == null ){
				PowerWindow.showMsg("没有相应数据");
				//重置空图表
				return;	
			};
			var data=data.list;//当前地市对应的数据
			data=sortData(data);//数据排序
			option.visualMap.min = jb_type == 0 ?
 data[data.length - 1].VALUE1 :    
 data[data.length - 1].VALUE2;//数据排序之后，最后一个值为最小值
			option.visualMap.max = jb_type == 0 ?
 data[0].VALUE1 : data[0].VALUE2;//数据排序之后，第一个值为最大值
			option.series[0].data=data.map(function (dataItem) {
		    	var value=jb_type=='0'?dataItem.VALUE1:dataItem.VALUE2;
		        return {name: dataItem.NAME, value: value};
		    });
			option.series[0].type='map';
			option.series[0].mapType=mapId;
			cityMap.setOption(option);//重新绘制地图
		}, "json");		
	}