vue实现echarts地图

<el-button type="text" @click="getEchartsMap()">地图模式</el-button>
<!--            :fullscreen="true"-->
            <el-dialog class="dialog" :visible.sync="dialogEchartsMapVisible" :fullscreen="true" @close="clearEchart">
              <div :id="id" style="min-width: 30px;min-height: 750px;height: 750px;"></div>
            </el-dialog>

getMapEcharts () {
        this.option = {
          tooltip: {
            trigger: 'item',
            formatter: function (params, ticket, callback) {
              // 根据业务自己拓展要显示的内容
              if (params.seriesType === 'effectScatter') {
                var res = ''
                var name = params.data.name
                res = "<p style='text-align:left;margin:0;color:#fff;'>" + name + '</p>'
                return res
              } else if (params.seriesType === 'lines') {
                return params.data.outcom + '&nbsp;>&nbsp;' + params.data.incom
              } else {
                return params.name
              }
            }
          },
          geo: { // 设置地图的显示信息
            map: '全国',
            label: {
              normal: { // 设置字体相关信息
                show: true,
                color: '#3B3B7A'
              },
              emphasis: { // 设置鼠标移上去hover效果
                show: true,
                color: '#fff'
              }
            },
            // 是否开启缩放
            roam: true,
            itemStyle: { // 设置地图块的相关显示信息
              normal: {
                areaColor: '#d1def3',
                borderColor: '#b4caef',
                borderWidth: 1
              },
              emphasis: {
                areaColor: '#9abfff' // hover效果
              }
            },
            top: '5%',
            bottom: '5%'
          },
          series: [{ // 地图块的相关信息
            type: 'map',
            geoIndex: 0, // 不可缺少，否则无tooltip 指示效果
            data: [],
            itemStyle: {
              normal: {
                areaColor: '#0c274b',
                borderColor: '#1cccff',
                borderWidth: 1.5
              },
              emphasis: {
                areaColor: '#02102b',
                label: {
                  color: '#fff'
                }
              }
            }
          },        // 区域散点图
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            symbolSize: 5,
              // rippleEffect: { // 坐标点动画
              //   period: 3,
              //   scale: 5,
              //   brushType: 'fill'
              // },
            label: {
              normal: {
                show: true,
                position: 'right',
                formatter: '',
                color: '#b3e2f2',
                fontWeight: 'bold',
                fontSize: 14
              }
            },
            data: this.pointData,
            // data: [
            //   {
            //     name: '徐州可开发区',
            //     value: [117.305773, 34.279355],
            //     itemStyle: {color: '#4ab2e5'}
            //   },
            //   {
            //     name: '徐州可开发区',
            //     value: [117.145318, 34.406882],
            //     itemStyle: {color: '#16c216'}
            //   }
            // ],
            itemStyle: { // 坐标点颜色
              normal: {
                show: true,
                color: '#1187f5',
                shadowBlur: 15,
                shadowColor: '#fff'
              },
              emphasis: {
                areaColor: '#f00'
              }
            }
          },
          {
            type: 'lines',
            zlevel: 2,
            effect: {
              show: true,
              period: 4, // 箭头指向速度，值越小速度越快
              trailLength: 0.4, // 特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: 'arrow', // 箭头图标
              symbolSize: 7 // 图标大小
            },
            lineStyle: {
              normal: {
                color: '#1DE9B6',
                width: 2, // 线条宽度
                opacity: 0.1, // 尾迹线条透明度
                curveness: 0.3 // 尾迹线条曲直度
              }
            },
            data: this.lineData
            // data: [
            //   {
            //     coords: [[117.305773, 34.279355], [117.145318, 34.406882]],
            //     lineStyle: {color: '#4ab2e5'}
            //   }
            // ]
          }]
        }
        // 初始化并渲染
        this.echartObj = echarts.init(document.getElementById(this.id))
        echarts.registerMap('全国', JSON)
        this.echartObj.setOption(this.getOptions(), true)
        // 监听浏览器大小变化重渲染组件
        window.addEventListener('resize', () => {
          if (this.echartObj && this.echartObj.resize) {
            this.echartObj.resize()
          }
        })
      },

clearEchart () {
        this.echartObj.dispose()
      },