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: ['#FA4D08', '#4BD94F', '#FBD32B'], //红、绿、黄
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',
borderColor: '#3BB4DF',
shadowColor: '#25A3FC',
shadowBlur: 10
},
emphasis: {
areaColor: '#ddb926'
}
}
},
series: [{
type: 'effectScatter',
coordinateSystem: 'geo',
data: unitData,
symbolSize: 10,
symbol: 'image://../../../../Content/images/One/fire.png',
//symbolRotate: 35,
rippleEffect: {
period: 4,
scale: 5,
brushType: 'fill',
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
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',
//symbolRotate: 35,
rippleEffect: {
period: 4,
scale: 5,
brushType: 'fill',
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
color: '#fff'
}
}
},
]
};
$.getJSON('../../MapCN/guangdong.json', function(chinaJson) {
echarts.registerMap('guangdong', chinaJson);
_chinaMap.setOption(option, true);
});
}
http://datav.aliyun.com/tools/atlas/index.html 
本文介绍了如何在ECharts中创建自定义地图，包括使用地图选择器和绘制地图工具生成省市区县级别的JSON数据。对于乡镇级地图，推荐使用BIGEMAP地图下载器，虽然需要逐个下载，但可以获取无水印并适用于多种场景的数据。最后，通过geojson.io将数据转换为适合ECharts的格式。
最低0.47元/天 解锁文章
扫一扫
1645
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
