画了一个绵阳市的地图,点击区拿到对应区的数据,一个接口调用2次,如果想用其他省市地图可以去官方下载相应的js文件,在jsp中引用就好,不过得注意引用顺序,不然会报错。
function drawProvince() {
var name = '绵阳';
var myChart = echarts.init(document.getElementById('my'));
myChart.setOption(option = {
backgroundColor: '#ffffff',
series: [{
type: 'map',
mapType: name,
layoutCenter: ['50%', '50%'],
layoutSize: 650,
label: {
normal: {
show: true
},
emphasis: {
textStyle: {
color: '#fff'
}
}
},
itemStyle: {
normal: {
borderColor: '#000000',
areaColor: '#999999'
},
emphasis: {
areaColor: '#999999',
borderWidth: 0
}
},
animation: false,
data: [
{name: '平武县', value:1, label: {normal: {show: true}}},
{name: '北川羌族自治县',
value: 2,
label:
{
normal:
{
show: true
}
}
},
{name: '三台县', value: 3, label: {normal: {show: true}},
itemStyle: {
normal: {
areaColor: '#ff4854'
},
emphasis: {
areaColor: '#ff4854',
borderWidth: 0
}
}
},
{name: '盐亭县', value: 4, label: {normal: {show: true}}},
{name: '梓潼县', value: 5, label: {normal: {show: true}}},
{name: '游仙区', value: 6, label: {normal: {show: true}},
itemStyle: {
normal: {
areaColor: '#9674d6'
},
emphasis: {
areaColor: '#9674d6',
borderWidth: 0
}
}
},
{name: '涪城区', value: 7, label: {normal: {show: true}},
itemStyle: {
normal: {
areaColor: '#f53cb6'
}, emphasis: {
areaColor: '#f53cb6',
borderWidth: 0
}
}
},
{name: '安州区', value: 8, label: {normal: {show: true}}},
{name: '江油市', value: 9, label: {normal: {show: true}},
]
}]
});
//点击地区再调一次接口
myChart.on('click', function (maparams) {
// console.log(maparams.data.name);
areaPosition(maparams.data.name);
function areaPosition(areaName){
$.ajax({
type:"GET",
url:CTX+"/totalPro?area="+areaName,
success:function(result){
if(result.errorCode!=0){
return false;
}
result=result.value;
// console.log(result);
dataContent1.text("人口总数");
dataContent2.text("人均生产总值");
dataContent3.text("潜在金卡总数");
dataContent4.text("潜在金葵花总数");
dataGdp.text(result.gdp+"元");
dataTotal.text(result.totalNumber+"人");
dataArea.text(result.area);
if(result.monthPro!=null){
dataGold.text(result.monthPro[11].goldCard+"人");
dataSun.text(result.monthPro[11].sunFlowerCard+"人");
// var loadingMask = document.getElementById('loadingDiv');
// loadingMask.parentNode.removeChild(loadingMask);
makeMapKLine(result);
}else{
dataGold.text("0人");
dataSun.text("0人");
}
},
error:function(XMLHttpRequest){
if(XMLHttpRequest.status == 401){
location.href=ctx+"/login";
}
}
});
}
});
myChart.setOption(option);
}