echarts地图在vue中的使用

前言
echarts使用很多次了，可以配置地图还是第一次，要实现的是地图上标注两个点，点击点弹出弹窗，点击可以跳转，效果如下：

Echarts官网配置项参考
Echarts官网的一参考demo

贴关键代码，配置项太多要一个一个去看，有点麻烦.
map.vue

<template>
    <div class="map">
        <div class="map-wrapper">
        </div>
        <div class="box" v-show="showBox">
            <ul>
                <li v-for="(pro, index) in projectInfo"
                    :key="index"
                    :class="{'last': index === projectInfo.length-1}">
                    <a :href="pro.addressUrl" target="_blank">{{pro.pName}}</a>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
  import 'echarts/map/js/china//这里引用的自带的，如果引用外部china.js会出现this指向问题
    import {path} from "./utils/data";

  export default {
    name: "myMap",
    data() {
      return {
        myChart: '',
        series: [],
        showBox: false,
        projectInfo: [],
        SHANGHAI: [
          { pName: '上海智能制造中心', addressUrl: 'https://ims.epceta.com/login' },
          { pName: '上海华竖能源科技', addressUrl: 'https://www.epceta.com/login' }
        ],
        WUHAN: [
          { pName: '武汉市民之家', addressUrl: 'https://www.epctfm.com/#/login' }
        ]
      }
    },
    mounted() {
      const _this = this
      console.log(this.$echarts)
      this.mapRender();
      window.addEventListener('resize', function () {
        _this.myChart.resize()
      })
      document.body.addEventListener('click',function() {
        _this.showBox = false
      })
    },
    methods: {
      mapRender() {
        const _this = this;
        let mapDom = document.querySelector('.map-wrapper')
        this.myChart = this.$echarts.init(mapDom);
        let data = [
          {name: '上海', value: '90'},
          {name: '武汉', value: 90},
        ]
        let geoCoordMap = { //可以在地图上显示的城市的坐标信息
          '武汉':[114.31,30.52],
          '上海': [121.4648, 31.2891],
        };
        let convertData = function (data) {//返回[{coord: 极坐标},{coord: 极坐标}]
          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;
        };
        _this.series.push([{
            name: '项目分布',
            type: 'effectScatter',
            roam: true, // 可缩放
            // geoIndex: 'geoMap',
            z: 2,
            coordinateSystem: 'geo',
            symbolSize: 10,//点的大小
            symbol: 'emptyCircle',
            color: 'orange',
            showEffectOn: 'render',
            effectType: 'ripple',
            rippleEffect: {
              period: 5,
              scale: 10,
              brushType: 'fill'
            },
          label: {
            normal: {
              formatter: '{b}',
              position: 'right',
              show: true,
              color: '#fff'
            }
          },
            data: convertData(data),
          },
          {
            name: '项目分布',
            type: 'scatter',
            z: 5,
            roam: true, // 可缩放
            coordinateSystem: 'geo',
            symbolSize: [20,30],//点的大小
            symbolOffset: [0,-15],
            symbol: 'path://'+path,
            color: '#e1ebe3',
            showEffectOn: 'render',
            effectType: 'ripple',
            itemStyle: {
              color: 'blue'
            },
            label: {
              normal: {
                show: false,//是否显示省份
                textStyle: {
                  color: '#00a0c9',
                  size: '10'
                }
              }
            },
            markLine: {
              smooth: true,
              symbol: ['none', 'circle'],
              symbolSize: 1,
              itemStyle: {
                normal: {
                  color: '#ff0',
                  borderWidth: 1,
                  borderColor: 'rgba(0,0,0,0)'
                }
              },
              data: [],
            },
            data: convertData(data),
          },
          {
            type: 'map',
            map: 'china',
            geoIndex: 0,
            aspectScale: 0.75, //长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: '#fff'
                }
              }
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: '#031525',
                borderColor: '#FFFFFF',
              },
              emphasis: {
                areaColor: '#2B91B7'
              }
            },
            animation: false,
          },
        ])
        // 指定相关的配置项和数据
        let mapBoxOption = {
          backgroundColor: '#051B4A',
          title: {
            text: '项目分布',
            subtext: '更新于2019-10',
            sublink: 'http://www.pm25.in',
            left: 'center',
            textStyle: {
              color: '#fff'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              return params.name
            }
          },
          geo: {
            map: 'china',
            id: 'geoMap',
            roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
            // aspectScale: 0.75,
            zoom: 1.20,
            label: {
              normal: {
                show: true,//是否显示省份
                textStyle: {
                  color: '#00a0c9',
                  size: '8'
                }
              },
              emphasis: { // 对应的鼠标悬浮效果
                show: false,
                textStyle: {
                  color: "blue"
                }
              }
            },
            itemStyle: {
              normal: {
                borderColor: 'rgba(147, 235, 248, 1)',//#D79D3D
                borderWidth: 1,
                areaColor: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.8,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(147, 235, 248, 0)'
                  }, {
                    offset: 1,
                    color: 'rgba(147, 235, 248, .2)'
                  }],
                  globalCoord: false // 缺省为 false
                },
                shadowColor: 'rgba(128, 217, 248, 1)',
                // shadowColor: 'rgba(255, 255, 255, 1)',
                shadowOffsetX: -2,
                shadowOffsetY: 2,
                shadowBlur: 30
              },
            },
            emphasis: { // 鼠标划入省份的样式
              itemStyle: {
                areaColor: '#389BB7',
              },
              label: {
                color: 'blue'
              }
            },
            animation: false
          },
          series: _this.series[0]
        };
        this.myChart.setOption(mapBoxOption)
        this.myChart.off('click');
        this.myChart.on('click', function (params) {
          params.event.event ? params.event.event.stopPropagation() : event.cancelBubble = true
          if(params.name === '武汉') _this.projectInfo = [..._this.WUHAN]
          else if(params.name === '上海') _this.projectInfo = [..._this.SHANGHAI]
          if (['scatter', 'effectScatter'].includes(params.componentSubType)) {
            //点击某个点的操作
            _this.showBox = true
            if(_this.showBox) _this.fixingPositon()
          }else{
            _this.showBox = false
          }
        })
      },
      fixingPositon() {
        const e = event || window.event,
        top = e.clientY, left = e.clientX,
        boxDom = document.querySelector('.box');

        this.$nextTick(function(){
          const offsetX = boxDom.clientWidth;
          const offsetY = boxDom.clientHeight;
          boxDom.style.cssText = `top: ${top-offsetY-25}px; left: ${left + offsetX/3}px`;
        })
      },
    }
  }
</script>

参考博客
Vue引入echarts中国地图