vue引入echarts map地图

1.找到该市区的json文件并下载到本地

DataV.GeoAtlas地理小工具系列

2.引入echarts依赖

import * as echarts from 'echarts'

3.初始化echarts

    initMap() {
      var myChart = echarts.init(document.getElementById('map_1'))
      var data = [
        { name: '高铁站', value: 155000 },   //这里的值与后面series.symbolSize属性的值有关联
        { name: '中伙', value: 120000 },
        { name: '火车站', value: 140000 },
      ]
      var geoCoordMap = {
        高铁站: [113.930405, 29.726476],  //地点坐标可以在百度地图上查询
        中伙: [113.998687, 29.776476],
        火车站: [113.999176, 29.786476],
      }
      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),
            })
          }
        }
        return res
      }
      var option = {
        tooltip: {
          trigger: 'item',
          //自定义修改显示
          formatter: function (data) {
            return '<div><p>电量：' + data.value[2] + '</p></div>'
          },
        },

        geo: {
          map: 'china',
          label: {
            emphasis: {
              show: false,
            },
          },
          roam: false, //禁止其放大缩小
          itemStyle: {
            normal: {
              areaColor: '#4c60ff',
              borderColor: '#002097',
            },
            emphasis: {
              areaColor: '#293fff',
            },
          },
        },
        series: [
          {
            name: '人流量',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData(data),
            symbolSize: function (val) {
              return val[2] / 10000
            },
            label: {
              normal: {
                position: 'outside', // 设置标签向外
                formatter: '{b}', // 设置标签格式
                position: 'right',
                show: true,
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                color: '#ffeb7b',
              },
            },
          },
        ],
      }
      const appData = require('./js/chibishi.json')  //本地json路径
      echarts.registerMap('chibishi', appData) //注册
      option.geo.map = 'chibishi'
      myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    },

4.示意图