前言
需要实现人口密度展示的地图，通过颜色的深浅来直观的展示区域的人口多少，笔者实现了一个从全国-省-市的demo。查看演示效果请点击此链接 http://merrylmr.top/admin-vuetify/#/map
效果如下：
全国
四川省
核心代码
option关键配置项
- 根据人口的多少，颜色的深浅展示
// option对象
{
visualMap: {
min: 55,
max: 10550,
text: ['High', 'Low'],
realtime: false,
calculable: true,
// 这里颜色由浅入深配置
inRange: {
color: ['#D1C4E9', '#673AB7', ‘#311B92’]
},
},
}
官方文档：https://echarts.apache.org/zh/option.html#visualMap
- 悬停区域颜色配置
// option对象
{
series:[
{
emphasis: {
label: {
show: true,
color: "#fff",
},
itemStyle: {
// 区域颜色
areaColor: '#512DA8',
borderColor: '#fff',
color: '#fff',
borderWidth: 2
},
},
}
]
}
官方文档：https://echarts.apache.org/zh/option.html#series-map.emphasis
- 提示框自定义
// option对象
{
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(50,50,50,0.7)',
borderColor: '#333',
textStyle: {
color: '#fff',
fontSize: 12
},
formatter: (item) => {
let html = `${item.name}`
if (item.data) {
html += `<p style="font-size:12px">人口数量：${(item.data.value)}万</p>
`
}
return html
}
},
}
官方文档：https://echarts.apache.org/zh/option.html#tooltip
核心代码
function initMap() {
const chartDom = document.getElementById('map');
const myChart = this.$echarts.init(chartDom);
this.myChart = myChart;
// 1. 获取geoJson数据
this.myChart && this.myChart.showLoading();
const geoJson = await this.getGeoJSONData(code);
this.$echarts.registerMap('ZH', geoJson);
// 2. 获取人员及坐标点数据
Promise.all([this.getPeopleInfo(code), this.getPosInfo(code)]).then(async (res) => {
const dataList = res[0]
const makerPoints = res[1]
const options = this.setOptions(dataList, makerPoints);
this.myChart.setOption(options);
this.myChart.hideLoading();
}
开发中遇到的问题？
地图地市名称标签位置不合适该如何调整？
https://segmentfault.com/q/1010000013736260
https://github.com/apache/echarts/issues/4379#issuecomment-257765948多次出发点击事件
地图不能重复绑定点击事件，在绑定点击事件之前，需要去关取消之前绑定过的事件。
myChart.off("click")
工具
- 获取geoJSON数据
http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5 - 经纬度获取
http://api.map.baidu.com/lbsapi/getpoint/index.html?qq-pf-to=pcqq.group - echarts人口密度示列
https://echarts.apache.org/examples/zh/editor.html?c=map-HK
最后
项目github地址：
https://github.com/merrylmr/admin-vuetify
完整的代码请查看：/src/views/charts/Map.vue
期待你的star!!!
