``<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<div id="xiaQu" style="width: 1000px;height: 700px;"></div>
<script>
function createMap(type) {
//辖区地图
var xiaQuDom = document.getElementById("xiaQu");
var xiaQuChart = echarts.init(xiaQuDom);
xiaQuOption = null;
window.onresize = function () {
xiaQuChart.resize();
};
xiaQuChart.showLoading();
var geoJson = {
"type": "FeatureCollection",
"features": []
};
if (type) {
echarts.registerMap('HK', geoJson);
xiaQuChart.hideLoading();
var geoCoordMap = {
'荔湾区': [113.243038, 23.124943],
'越秀区': [113.280714, 23.125624],
'白云区': [113.262831, 23.162281],
'海珠区': [113.262008, 23.103131],
'从化区': [113.587386, 23.545283],
'黄埔区': [113.450761, 23.103239],
'增城区': [113.829579, 23.290497],
'天河区': [113.335367, 23.13559],
'花都区': [113.211184, 23.39205],
'番禺区': [113.364619, 22.938582],
'南沙区': [113.53738, 22.794531],
};
var data = [{
name: '荔湾区',
value: 20057.34
},
{
name: '越秀区',
value: 15477.48
},
{
name: '白云区',
value: 31686.1
},
{
name: '海珠区',
value: 6992.6
},
{
name: '从化区',
value: 44045.49
},
{
name: '黄埔区',
value: 40689.64
},
{
name: '增城区',
value: 37659.78
},
{
name: '天河区',
value: 45180.97
},
{
name: '花都区',
value: 55204.26
},
{
name: '番禺区',
value: 21900.9
},
{
name: '南沙区',
value: 4918.26
}
];
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
console.log(res)
return res;
};
xiaQuChart.setOption(option = {
title: {
// text: '香港18区人口密度 (2011)',
// subtext: '人口密度数据来自Wikipedia',
},
tooltip: {
trigger: 'item',
formatter: '{b}<br/>{c} (p / km2)'
},
// visualMap: {
// min: 800,
// max: 50000,
// text: ['High', 'Low'],
// realtime: false,
// calculable: true,
// inRange: {
// color: ['lightskyblue', 'yellow', 'orangered']
// }
// },
geo: {
map: 'HK',
// left: '350',
zoom: 1.2,
itemStyle: { //地图区域的多边形 图形样式
normal: { //是图形在默认状态下的样式
label: {
show: true, //是否显示标签
textStyle: {
color: '#ff0'
},
},
borderWidth: 1,
borderColor: 'rgba(37,124,169)',
shadowColor: '#e8e8e8',
shadowOffsetY: 15,
shadowOffsetX: 8,
},
},
},
series: [{
name: 'credit_pm2.5',
type: 'effectScatter',
// left: '150',
coordinateSystem: 'geo',
data: convertData(data),
symbol: "circle",
symbolSize: 10,
zoom: 1.2,
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
// label: {
// normal: {
// formatter: '{b}',
// position: 'bottom',
// color: 'red',
// show: true
// }
// },
itemStyle: {
normal: {
color: '#fff',
shadowBlur: 0,
shadowColor: '#96CEFF'
}
},
zlevel: 1
}, {
// name: '香港18区人口密度',
type: 'map',
mapType: 'HK', // 自定义扩展图表类型
zoom: 1.2,//地图倍数
roam: true, //是否开启平游或缩放
showLegendSymbol: false,//消除地图默认红点
itemStyle: {
normal: {
borderColor: "#fff",
areaColor: '#96CEFF',//地图总体颜色
label: {
show: true
}
},
emphasis: {
label: {
show: true
}
}
},
data: data,
}, {
name: '点',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin',
symbolSize: 100,//气泡大小
label: {
normal: {
show: true,
textStyle: {
color: '#222',
fontSize: 12,
fontWeight:"bold",
},
formatter(value) {
return value.data.value[2]
}
}
},
itemStyle: {
normal: {
color:"#fff",//气泡颜色
areaColor: 'red',
borderColor: '#3E9CEC',
},
emphasis: {
areaColor: '#2B91B7'
},
},
zlevel: 6,
data: convertData(data),
}]
});
}
}
createMap("type")
</script>
```
Echart广州市地图
最新推荐文章于 2024-07-16 11:04:57 发布