vue项目中继承echarts地图

如图所示：

代码如下：

<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import resize from '../mixins/resize'
  import xinjaingmap from '../mixins/xinjiangmap'
  const animationDuration = 6000

  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '380px'
      }
    },
    data() {
      return {
        chart: null
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')

        this.chart.setOption({
          // backgroundColor: '#12cf96',
          visualMap: {
            show: false,
            min: 0, // 指定 visualMapContinuous 组件的允许的最小值。'min' 必须用户指定。[visualMap.min, visualMax.max] 形成了视觉映射的『定义域』。
            max: 1000, // 指定 visualMapContinuous 组件的允许的最大值
            text: ['High', 'Low'], // 两端的文本，如 ['High', 'Low'] 如例子：http://www.echartsjs.com/gallery/editor.html?c=doc-example/map-visualMap-continuous-text&edit=1&reset=1
            realtime: false, // 拖拽时，是否实时更新。
            calculable: false, // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。
            hoverLink: false, // 打开 hoverLink 功能时，鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮。
            inRange: {
              // inRange (object)定义 在选中范围中 的视觉元素。（用户可以和 visualMap 组件交互，用鼠标或触摸选择范围）1、symbol: 图元的图形类别。2、symbolSize: 图元的大小。3、color: 图元的颜色。4、colorAlpha: 图元的颜色的透明度。5、opacity: 图元以及其附属物（如文字标签）的透明度。6、
              color: ['#015FB9', '#024C97']
            },
          },
          geo: {
            map: 'xinjiang',
            roam: false, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
            aspectScale: 0.75,
            zoom: 1.20,
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: '#fff'
                }
              },
              emphasis: { // 对应的鼠标悬浮效果
                show: false,
                textStyle: {
                  color: "#fff"
                },
              }
            },
            itemStyle: {
              normal: {
                areaColor: '#015FB9',
                borderColor: '#fff'
              },
              emphasis: {
                borderWidth: 0,
                borderColor: '#73C7EC',
                areaColor: "#D08701",
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          },
          series: [{
            type: 'map',
            name: 'map',
            mapType: 'xinjiang',
            roam: true,
            coordinateSystem: 'geo',
            geoIndex: 0,
            aspectScale: 0.75,
            zoom: 1.2,
            label: {
              show: true
            },
            data: [
              {name: '乌鲁木齐市', value: 1300},
              {name: '吐鲁番市', value: 1200},
              {name: '哈密市', value: 1300},
              {name: '克拉玛依市', value: 1900}
            ],
          }]

        })
      }
    }
  }
</script>