echart湖南地図

最近のプロジェクトではechart地図コンポーネント、湖南地図の完全バージョン(墜落機能を提供)が使用されており、参考にしてください.
1、地図データを登録し、mapIdを作成する.
echarts.registerMap(mapId,json座標データ項目);
hnMap.jsには湖南省と各地市の座標データが登録されている.
それぞれhnMap(全省)、csMap(長沙)、xtMap(湘潭)、zzMap(株洲)、hyMap(衡陽)、syMap(邵陽)、yyyMap(岳陽)、cdMap(常徳)、zjMap(張家界)、yyiyMap(益陽)、czMap(郴州)、yzMap(永州)、hhhMap(懐化市)、ldMap(娄底)、xxMap(湘西)に対応している.
2、echartのoptionを定義する

定義option

var  option = {
	tooltip: {//    
           trigger: 'item',
            formatter :function(param){
            	if(param.data!=null&&param.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");		
	}