一:页面初始化时加载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;
}
记录一贴,防止以后忘记了。