admin-vuetify | echarts-绘制地图

前言

需要实现人口密度展示的地图，通过颜色的深浅来直观的展示区域的人口多少，笔者实现了一个从全国-省-市的demo。查看演示效果请点击此链接http://admin-vuetify.bysir.top:1080/#/map
效果如下：

核心代码

option关键配置项

1. 根据人口的多少，颜色的深浅展示

// 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

2. 悬停区域颜色配置

// 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

3. 提示框自定义

// 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();
       
}
  

开发中遇到的问题？

1. 地图地市名称标签位置不合适该如何调整？
   https://segmentfault.com/q/1010000013736260
   https://github.com/apache/echarts/issues/4379#issuecomment-257765948

2. 多次出发点击事件
   地图不能重复绑定点击事件，在绑定点击事件之前，需要去关取消之前绑定过的事件。

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!!!