echarts 加載geo json

<template>
  <div class="">
    <div class="map-nav">
      
      <Icon type="md-pin" />
      <span v-for="t in currArea" @click="gotoMap(t.id||t.adcode,t.level||'province')" v-if="t.name!= undefined">{{t.name}}&nbsp;/&nbsp;</span>
      <span @click="gotoMap('100000')">全國</span>
    </div>
    <v-chart
      ref="mapChart"
      :options="options"
      :style="{ height: winHeight - 135 + 'px' }"
      :autoresize="true"
      @dblclick="mapChatClick"
    />
  </div>
</template>

<script>
var districtList = ["北京","山東","江西","湖南","新疆","哈密", "濰坊", "濟南", "南昌", "長沙", "常德","吉安","昌平"];
const dataTest = [];
districtList.forEach((t, i) => {
  dataTest.push({ name: t, value: Math.random() * 100+200});
});
function convertData(data, geoCoordMap) {
  const res = [];
  for (let i = 0; i < data.length; i++) {
    const geoCoord = geoCoordMap[data[i].name];
    if (geoCoord) {
      res.push({
        name: data[i].name,
        value: geoCoord.concat(data[i].value),
      });
    }
  }
  return res;
}
var areaMap=new Map();
import echarts from "echarts";
export default {
  name: "mapChart",
  data() {
    return {
      currArea:{district:{},city:{},province:{}},
      areaMap:areaMap,
      options: {
          backgroundColor: '#404a59',
    title: {
        text: '',
        subtext: '',
        sublink: '',
        left: 'center',
        textStyle: {
            color: '#fff'
        }
    },
        visualMap: {
          min: 0,
          max: 50,
          // text: ['High', 'Low'],
          realtime: true,
          calculable: true,
          inRange: {
            color: ["lightskyblue", "yellow", "orangered"],
          },
        },
        tooltip: {
          trigger: "item",
        },
        /*  legend: {
        orient: 'vertical',
        y: 'bottom',
        x: 'right',
        data: ['銷售數量'],
        textStyle: {
            color: '#fff'
        }
    },*/
        geo: {
          map: "100000",
          zoom: 1.2,
          roam:false,//移動地圖
          //   center: [115.97, 29.71],
          // regions:[{name:'北京',selected:true}],
          label: {
            emphasis: {
              show: true,
            },
          },
          itemStyle: {
            color:'#eee',
            normal: {
              areaColor: '#eee',
              borderColor: '#111'
            },
            emphasis: {
              areaColor: "#00deff",
            },
          },
        },
        series: [
          {
            name: "銷售數量",
            type: "scatter",
            coordinateSystem: "geo",
            data: [],//convertData(dataTest, geoCoordMap),
            symbolSize: function (val) {
              return val[2] / 10;
            },
            left: "center",
            encode: {
              value: 2,
            },
            label: {
              formatter: "{b}",
              position: "right",
              show: true,
            },
            emphasis: {
              label: {
                show: true,
              },
            },
          }
        ],
      },
      winHeight: window.innerHeight,
    };
  },
  methods: {
    mapChatClick(e) {
      if (e.event.target.id) {
        event.stopPropagation(); // 阻止冒泡
        if (e.componentType == "geo") {
          // 獲取省名對象
          // let info = this.areaMap.find((item) => {
          //   return item.name.indexOf(e.name)>=0;
          // });
          let info=this.areaMap.get(e.name);
          if (info == undefined) {
            return;
          }
          var level=info.level||'province';
           this.currArea[level]=info;
          this.gotoMap(info.id||info.adcode,level);
        } else if (e.componentType == "series") {
        }
      }
    },
    gotoMap(code,level) {
        if(code=='100000'){
            this.currArea = {district:{},city:{},province:{}};
        }
        switch (level){
             case 'province':
               this.currArea['city']={};
               this.currArea['district']={};
             case 'city':
               this.currArea['district']={};
           }
        this.http.get(
            this,
            `/static/map/json/code/${code}.json`,
            (res) => {
              echarts.registerMap(code, res);
              this.options.geo.map = code;
              var areaList = {};
              res.features.forEach((item, i) => {
                console.log("res",item);
                areaList[item.properties.name.replace('市','').replace('縣','').replace('自治','').replace('地區','').replace('區','').replace('州','')] = item.properties.cp||item.properties.centroid;
                this.areaMap.set(item.properties.name,item.properties);
              });
              this.options.series[0].data=convertData(dataTest,areaList);
            }
          );
    },
  },
  mounted() {
      this.gotoMap('100000');
  }
};
</script>

<style lang="less" scoped>
.echarts {
  top: 50px;
  width: 100%;
  margin: 0 auto;
}
.map-nav {
  color: #fff;
  font-size: 1.5rem;
  position: absolute;
  top: 50px;
  right: 0px;
  z-index: 100;
}
</style>

效果圖：