简介：本文详细介绍了ECharts地图工具在展示中国城镇区域划分方面的功能和应用方法，帮助用户轻松实现复杂地理数据可视化。
function getGzMap(_data) {
if (_chinaMap == undefined) {
var dom = document.getElementById(container);
_chinaMap = echarts.init(dom);
_chinaMap.on(click, function(params) {
console.log(params);
var _type = params.seriesType;
if (_type === map) {
//window.parent.aaa(aa)
//调用父页面方法
} else if (_type === effectScatter) {
window.parent.showMap();
}
});
}
var option = {
backgroundColor: rgba(0, 0, 0, 0),
visualMap: {
type: piecewise,
show: false,
min: 0,
max: 300,
splitNumber: 3,
itemWidth: 10,
itemHeight: 10,
itemGap: 5,
seriesIndex:[1],
pieces:[
{min : 0, max : 100, label:优},
{min : 101, max : 200, label:良},
{min : 201, max : 300, label:高风险}
],
color:[#F8DAE6, #FEF9B5, #B0D8B3],
textStyle: {
color:#9EA8B1,
fontSize:10
}
},
tooltip:{
formatter:{b}
},
geo:{
map:guangdong,
roam:true,
aspectScale: 1,
zoom: 1.5,
layoutCenter:[55%, 40%],
layoutSize:500,
label:{
normal:{show:true},
emphasis:{show:true}
},
itemStyle:{
normal:{
areaColor:#323c48,
borderColor:#111,
shadowColor:#25A3FC,
shadowBlur: 10
},
emphasis:{areaColor:#ddb926}
}
},
series:[
{
type:effectScatter,
coordinateSystem:geo,
data:unitData,
symbolSize:10,
symbol:image://../../../../Content/images/One/fire.png,
rippleEffect:{
period:4, scale:5, brushType:fill
},
label:{normal:{formatter:{b}, position:right, show:false}},
itemStyle:{normal:{color:#fff}}
},
{
name:,
type:map,
geoIndex:0,
mapType:guangdong,
label:{
normal:{show:true}
},
itemStyle:{
normal:{
label:{show:true, fontSize:10, color:#111},
shadowColor:#ddb926,shadowBlur:5
},emphasis:{label:{show:true}, shadowColor:rgba(0, 0, 0, 0.5), shadowBlur:10}
},
data:_data
},
{
type:effectScatter,
coordinateSystem:geo,
data:windData,
symbolSize:10,
symbol:image://../../../../Content/images/One/wind.png,
rippleEffect:{
period:4, scale:5, brushType:fill
},
label:{normal:{formatter:{b}, position:right, show:false}},
itemStyle:{normal:{color:#fff}}
}
]
};
$.getJSON(../../MapCN/guangdong.json, function(chinaJson) {
echarts.registerMap(guangdong, chinaJson);
_chinaMap.setOption(option, true);
});
}
5星
