vue中引用echarts全国地图

<template>
  <div>
    <div ref="mapInfo" style="width:750px; height: 540px" class="echarts"></div>
  </div>
</template>

<script>
import mapJson from '@/assets/json/China.json';//引入全国地图接口
export default {
  data () {
    return {}
  },
  methods: {
    getMapdata () {
      var myChart = this.$echarts.init(this.$refs.mapInfo);
      var option;
      myChart.showLoading();
      myChart.hideLoading();

      this.$echarts.registerMap('china', mapJson);
      myChart.setOption(option = {
        backgroundColor: "#FFFFFF",
        layoutCenter: ['50%', '70%'],//位置
        layoutSize: '80%',//大小
        geo: {
          map: "china",
          roam: false,
          zoom: 1.2,
          scaleLimit: { min: 0, max: 3 }, // 缩放级别
          regions: [
            {
              name: "南海诸岛",
              value: 0,
              itemStyle: {
                normal: {
                  opacity: 0,
                  label: {
                    show: false,
                  },
                },
              },
            },
          ],
          itemStyle: {
            areaColor: "#C3DFFF", //默认的地图板块颜色
            borderWidth: 1,
            borderColor: "#fff",
          },
        },
        title: {
          text: "资源池分步",
          x: "left",
          y: 20,
        },
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            name: "微博用户",
            type: "map",
            mapType: "china",
            roam: false,
            geoIndex: 0,
            label: {
              normal: {
                show: false, //省份名称,
              },
              emphasis: {
                show: false,
              },
            },
            data: [
              { name: "新疆自治区", value: 500 },
              { name: '北京市', value: 20057.34 },
              { name: '安定区', value: 20057.34 },
              { name: '渭源县', value: 20057.34 },
              { name: '陇西县', value: 20057.34 },
              { name: '临洮县', value: 20057.34 },
              { name: '漳县', value: 20057.34 },
              { name: '岷县', value: 20057.34 }
            ],
          }
        ]
      });
      option && myChart.setOption(option);
    }
  },
  mounted () {
    this.getMapdata()
  }
}
</script>

<style>
</style>