echarts 地图各省份区块自定义颜色、提示框格式化数据

一：页面初始化时加载echarts配置信息

var myChart = echarts.init(document.getElementById('chart4'));
var tipDate = "";

//份额连续下降预警数据
var option3_2 = {
	    title : {
	        text: '',
	        subtext: '',
	        x:'center',
	        textStyle : {
	            color: '#fff'
	        }
	    },
	    tooltip : {
	        trigger: 'item',
	        backgroundColor:'rgba(14, 148, 234, 0.2)',
			//transitionDuration: 0,
			enterable: true,
		    formatter: shareThredMapTooltip	//提示框方法
	    },
	    dataRange: {
	        textStyle : {
			    color : '#fff'
		    },
			splitList : [ {
				start : 1,
				end : 1,
				label : '一级预警',
				color : '#ff3333'
			}, {
				start : 2,
				end : 2,
				label : '二级预警',
				color : '#F0AD4E'
			}, {
				start : 3,
				end : 3,
				label : '三级预警',
				color : '#48D1CC'
			} ],
			calculable : false,
			color : [ '#48D1CC', '#F0AD4E', '#ff3333' ]
	    },
	    toolbox: {
	        show : true,
			orient : 'vertical',
			x : 'right',
			y : 'center',
			feature : {
				mark : {
					show : false
				},
				dataView : {
					show : false,
					readOnly : false
				},
				restore : {
					show : true
				},
				saveAsImage : {
					show : true
				}
			}
	    },
	    series : [
	        {
	            type: 'map',
	            mapType: 'china',
	            itemStyle:{
	                normal:{
	                  label:{show:true},
	                  borderColor : 'rgba(100,149,237,1)',
				      borderWidth : 0.5,
				      areaStyle : {
					      color : 'rgba(0, 0, 0, 0)'
				      }
	                },
	                emphasis:{label:{show:true}}
	            },
	            data:[]
	        }
	      
	    ],
	    animation: false
	};

二：异步获取后台信息并将数据设置到地图中

//异步获取数据
$.ajax({
		type: "POST",
        url: url,
        data: data,
        timeout: 30000,
        dataType: "json",
        async : true,
        success: function(data){
        	var endDate = data.endDate;
        	option3_2.title.text = endDate.substring(0,4)+'年'+endDate.substring(6,7)+'月份额连续下降预警数据';
        	option3_2.title.subtext = '数据截止日期：'+endDate;
        	
			tipDate = data.shareTrendList;	//提示框数据
        	qgWarnLevelShow(data.qgWarnLevelList);	//中上方全国一二三级预警个数
			shareThredMapShow(data.provinceList);	//所有省份
			shareThredOnClick('WARN_SHARETREND',index3); 
			//layer.close(index3);
        },
        error: function(data){
        	layer.close(index3);
        } 
	});

//设置地图数据
function shareThredMapShow(data) {
	var areaAll = [];	//所有的省份
	for (var i in data) {
		var area = {};
		area.name = data[i].areaname;
		area.code = data[i].areacode;
		area.value = data[i].warnlevel;    //这里对应者echarts的dataRange属性 ，也就是分颜色显示区域，一定要是value属性！@@
		/*if (data[i].areacode == '420000') {
			area.selected = true;
		}*/
		areaAll.push(area);
	}
	option3_2.series[0].data = areaAll;
}

三：格式化提示框

//提示框格式化
function shareThredMapTooltip(params){
	var areaname = params.data.name;
    var areacode = params.data.code;
    var res = "<p><span style='color:#fff;'><b>"+areaname+"</b>-预警数据：</span></p>"
    		+ "<table class='warn-cxb-table'><tr><th>预警纬度</th><th>预警级别</th><th>预警值</th></tr>";
    for (var i in tipDate) {
    	if (areacode == tipDate[i].areacode) {
    		res += "<tr><td>"+tipDate[i].tobaname+"</td><td>"+tipDate[i].warndesc+"</td><td>"+tipDate[i].warnvalue+"</td></tr>";
    	}
    }
	res += "</table>";
	return res;
}

记录一贴，防止以后忘记了。