echarts地图下钻（vue）

效果

<template>
  <div>
    <h3>地图下钻</h3>
      <button class="button" @click="back()" v-show="backVisible">返回上级</button>
      <div ref="mapChart" style="width:100%;height:500px;"></div>
  </div>
</template>

<script>
import cityMap from "../lib/cityMap.js";
import echarts from "echarts";
import axios from "axios";
//Echarts地图全局变量，主要是在返回上级地图的方法中会用到
export default {
  name: "industryAnalysis",
  data(){
    return{
      mapChart:Object,
      backVisible:false//返回按钮是否可见
    }
  },
  methods: {
    /**
     * 返回烟台市地图
     */
    back() {
      axios
      .get("./static/json/map/yanTaiShi.json", {})
      .then(response => {
        const mapJson = response.data;
        this.registerAndsetOption(
          this.mapChart,
          "yanTaiShi",
          "烟台市",
          mapJson,
          true
        );
      });
    },
    /**
     * 初始化烟台地图，市区绑定点击事件
     */
    initMapChart() {
      axios.get("./static/json/map/yanTaiShi.json", {}).then(response => {
        const mapJson = response.data;
        this.mapChart = echarts.init(this.$refs["mapChart"]);
        this.backVisible = false;
        this.registerAndsetOption(this.mapChart, "yanTaiShi", "烟台市", mapJson, true);
      });
    },
    /**
     * @param {*} myChart
     * @param {*} id        市县Id
     * @param {*} name      市县名称
     * @param {*} mapJson   地图Json数据
     * @param {*} flag      是否增加点击事件
     */
    registerAndsetOption(myChart, id, name, mapJson, flag) {
      echarts.registerMap(name, mapJson);
      let option = {
        series: [
          {
            type: "map",
            map: name,
            label: {
                show: true,
                textStyle:{
                  color:'#fff'
                }
            },
            itemStyle: {
              normal: {
                areaColor: "#1e5186",
                borderColor: "#19283a",
                borderWidth: 1
              }
            },
            data: this.initMapData(mapJson)
          }
        ]
      }
      myChart.setOption(option);
      if(!flag){
        myChart.off('click');
         this.backVisible = true;
      }else{
          // 增加点击事件
          this.backVisible = false;
          let _this = this;
          myChart.on("click", function(param) {
            console.log(param.name);
            var cityId = cityMap[param.name];
            if (cityId) {
              //代表有下级地图
              axios
                .get("./static/json/map/" + cityId + ".json", {})
                .then(response => {
                  const mapJson = response.data;
                  _this.registerAndsetOption(
                    myChart,
                    cityId,
                    param.name,
                    mapJson,
                    false
                  );
                });
            } else {
              //没有下级地图，回到烟台地图
              this.registerAndsetOption(myChart, "yanTaiShi", "烟台市", mapJson, true);
            }
            
          });
      }

    },
    initMapData(mapJson) {
      var mapData = [];
      for (var i = 0; i < mapJson.features.length; i++) {
        mapData.push({
          name: mapJson.features[i].properties.name
          //id:mapJson.features[i].id
        });
      }
      return mapData;
    }
  },
  mounted: function() {
    this.initMapChart();
  }
};
</script>

cityMap.js
城市与地图json名称对应对象
烟台市（城市名称）yanTaiShi (地图json文件名称)

const cityMap = {
    "烟台市": "yanTaiShi",
    "长岛县": "changDaoXian",
    "莱州市": "laiZhouShi",
    "芝罘区": "zhiFuQv",
    "海阳市": "haiYangShi",
    "龙口市": "longKouShi",
    "莱阳市": "laiYangShi",
    "蓬莱市": "pengLaiShi",
    "招远市": "zhaoYuanShi",
    "福山区": "fuShanQv",
    "莱山区": "laiShanQv",
    "栖霞市": "qiXiaShi",
    "牟平区": "muPingQv",
    
}

export default cityMap

地图选择器
http://datav.aliyun.com/tools/atlas/#&lat=33.521903996156105&lng=104.29849999999999&zoom=4
实时geoJson
https://hxkj.vip/demo/echartsMap/