Vue中如何实现城市3D分布图

cityfenbu.vue

<template>
    <div >
         <el-card class="seriesmap-box-card">
            <div slot="header" class="clearfix">
              <span>城市分布图 (点击可下钻到县)</span>
            </div>
            <div>
                <div class="series-map" :style="{height:height,width:width}" ref="seriesMap"></div>
            </div>
         </el-card>
    </div>
  </template>
  
  <script>
  import resize from './resize.js';
  import echarts from 'echarts';
  import { getGeoJson } from './getGeoJson.js';
  import { getMapChartData } from './getMapChartData.js';
  export default {
    name: 'cityfenbu',
    mixins: [resize],
    props: {
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '608px'
      }
    },
    data() {
      return {
        geoJson: {},
        parentInfo: [
          {
            cityName: '全国',
            code: 100000
          }
        ]
      };
    },
    mounted() {
      this.$nextTick(() => {
        this.getMapJson();
      });
    },
    methods: {
      //获取geoJson 地图 已封装好直接传citycode就行
      getMapJson() {
        getGeoJson(this.parentInfo[this.parentInfo.length - 1].code).then(data => {
          this.geoJson = data;
          this.getMapData();
        });
      },
      //获取地图数据 模拟数据 数据格式：[{name:'武汉市',value:96},{name:'长沙市',value:75}]
      // 必须要写成这种,而且name名字要和地图的geoJson名字一样，不然渲染不出来
      getMapData() {
        getMapChartData(this.parentInfo[this.parentInfo.length - 1].code).then(res => {
          const data = res.data;
          this.initEchart(data);
        });
      },
      initEchart(data) {
        this.myChart = echarts.init(this.$refs.seriesMap);
        //设置为 china 则显示南海诸岛 ，不需要可以去掉
        echarts.registerMap(this.parentInfo.length === 1 ? 'china' : 'map', this.geoJson); //注册
  
        const mapData = data.sort((a, b) => {
          return b.value - a.value;
        });
        let max = mapData[0].value;
        let min = mapData[mapData.length - 1].value;
        if (mapData.length === 1) {
          min = 0;
        }
  
        this.myChart.setOption(
          {
            tooltip: {},
            visualMap: {
              min: min,
              max: max,
              left: '3%',
              bottom: '1%',
              calculable: true,
              inRange: {
                color: ['#24CFF4', '#2E98CA', '#1E62AC']
              },
              textStyle: {
                color: '#24CFF4'
              }
            },
            series: [
              {
                name: '地图',
                type: 'map',
                map: this.parentInfo.length === 1 ? 'china' : 'map',
                roam: true, //是否可缩放
                zoom: 1.22, //缩放比例
                // left: '',
                // top: '15%', //可移动地图的位置
                data: mapData,
                label: {
                  normal: {
                    show: true,
                    color: 'rgb(249, 249, 249)', //省份标签字体颜色
                    formatter: p => {
                      switch (p.name) {
                        case '内蒙古自治区':
                          p.name = '内蒙古';
                          break;