在vue中用echarts5 给中国地图加入散点

1、首选 npm install echarts --save 2、在当前vue页面中引入 （echart_map.js的代码在以前博客有写）

import * as echarts from 'echarts';
import echartMap from '@/assets/js/echart_map'; // echarts5不再提供中国地图，所以需要自己下载js地图文件

3、在html中写入

<div id="mapCharts" style="width: 400px; height: 250px;"></div>

4、js

data(){
    return {
          geoCoordMap: { //散点的各个城市的标点 可以在网上搜到
            北京市: [116.46, 39.92],
          }
    }
}

  mounted(){
     let data = [ //此数据可以在后端接口中获得
        {
            "name": "北京市",
            "value": 71295
        }
    ]
    this.intMapCharts(data)
  },
 // 以下方法是写在methods里的
    convertData(data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = this.geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value)
          });
        }
      }
      return res;
    },
    intMapCharts(data) {
      echarts.registerMap('china', echartMap.china)
      let option = {
        tooltip: {
          show: true,
          formatter:(params) => {
            return `${params.data.name}:${params.data.value[2]}`
          }
        },
        geo: {
          type: 'map',
          map: 'china',
          zoom: 1.23,
          roam: false,
          center: [110, 36],
          label: {
            show: false, 
            color: '#fff', 
          },
          itemStyle: {
            areaColor: "#aad5ff",
            borderColor: "#fff",
            borderWidth: 1,
            shadowBlur: 5,
            shadowOffsetY: 8,
            shadowOffsetX: 0,
            shadowColor: "#aad5ff"
          },
          emphasis: {
            itemStyle: {
              areaColor: '#73abe2',
            },
            label: {
              color: '#fff',
            },
          },
        },
        series: [
          {
            show:true,
            type: 'effectScatter',
            coordinateSystem: 'geo', // series坐标系类型
            data: this.convertData(data),
          },
        ]
      };
      let myChart = echarts.init(document.getElementById('mapCharts'))
      myChart.setOption(option)
    },