vue 使用echarts组件实现离线地图，省-下钻-市 -下钻 -区

代码很简单，就是不会的时候死活不知道怎么写的，而且百度类似的比较详细的不多，不过我最想要的效果是点击放大下钻，有没有知道怎么写的朋友，留个言，感谢啦

1，官网下载echarts，命令就不贴了

2,  main.js

import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

3  ,index.vue

<template>
  <div id="main" style="width: 100%;height:800px;"></div>
</template>

<script>
//引入省、市 json文件，后面要通过这个json文件请求指定getjson文件
import shengJSON from '../../../../public/static/mapJSON/sheng.json'
import shiJSON from '../../../../public/static/mapJSON/shi.json'; // 引入 JSON 文件
import china from '../../../../public/static/mapJSON/china.json'; // 引入 JSON 文件
// 34个省、市、自治区的名字拼音映射数组
var provinces = shengJSON //省
var cityMap = shiJSON // 市
// 直辖市和特别行政区没有三级地图
var special = ['北京市', '天津市', '上海市', '重庆市', '香港特别行政区', '澳门特别行政区']

export default {
  data() {
    return {
      myMapChart: undefined,
      // 初始化绘制全国地图配置
      option: {
        backgroundColor: '#404a59',
        title: {
          left: 'center',
          textStyle: {
            color: '#fff',
            fontSize: 16,
            fontWeight: 'normal',
            fontFamily: 'Microsoft YaHei'
          },
          subtextStyle: {
            color: '#ccc',
            fontSize: 13,
            fontWeight: 'normal',
            fontFamily: 'Microsoft YaHei'
          }
        },
        // 鼠标悬停显示信息
        tooltip: {
          trigger: 'item',
          formatter: function(params) {
            return (
              params.seriesName + "<br />" + params.name + "：" + params.value
            )
          }
        },
        animationDuration: 1000,
        animationEasing: 'cubicOut',
        animationDurationUpdate: 1000,
        visualMap: {
          min: 0,
          max: 1000,
          text: ['High', 'Low'],
          calculable: true,
          inRange: {
            color: ['#e0ffff', '#006edd']
          }
        },
      }
    }
  },
  mounted() {
    // 获取容器初始化echarts并接收echarts对象
    this.myMapChart = this.$echarts.init(document.getElementById('main'))
    // 初始化地图
    this.init()
  },
  methods: {
    /* 初始化地图 */
    init() {
      // 这是组件开始初始化时需要拉去的数据--中国地图的数据
      // 获取所有省份bv
      let shengAll = this.getChildMap(china)
      // 注册大地图
      this.$echarts.registerMap('china', china)
      // 绘制地图
      this.renderMap('china', shengAll)
      // 绑定点击地图区域事件
      this.myMapChart.on('click', this.clickMap)
      // })
    },
    /* 地区区域点击事件 */
    async  clickMap(params) {
      let origin=window.location.origin
      let centerCoord=''
      if (params.name in provinces) {
        let res=await this.$axios.get(`${origin}/static/mapJSON/province/${provinces[params.name]}.json`);
     
        centerCoord = res.data.features[0].properties.center; // 替换为实际的中心点坐标字段
       if(res.data.features[0].properties.childrenNum==0){
         let shengAll = this.getChildMap(china)
         this.renderMap('china',shengAll,centerCoord)
         return
       }
        this.$echarts.registerMap(params.name, res.data)
        let shiAll = this.getChildMap( res.data)
        this.renderMap(params.name, shiAll,centerCoord)
      } else if (params.seriesName in provinces) {

        console.log("市：" + params.name)
        if (special.indexOf(params.seriesName) >= 0) { //直辖市和特别行政区没有下级了，返回大图
          this.renderMap('china')
        } else {
          let res1=await this.$axios.get(`${origin}/static/mapJSON/city/${cityMap[params.name]}.json`);
         debugger
          centerCoord = res1.data.features[0].properties.center;
          this.$echarts.registerMap(params.name, res1.data)
          let xianAll = this.getChildMap(res1.data)
          this.renderMap(params.name, xianAll,centerCoord)
          return

        }
      } else {
        centerCoord = china.features[0].properties.center; // 替换为实际的中心点坐标字段
        let shengAll = this.getChildMap(china)
        this.renderMap('china',shengAll,centerCoord)
      }
    },

    getChildMap(data) {
      let childMapAll = []
      for (var i = 0; i < data.features.length; i++) {
        childMapAll.push({
          name: data.features[i].properties.name,
          value: 0
        })
      }
      return childMapAll
    },
    renderMap(map, data,centerCoord) {
      // 标题
      this.option.title.subtext = map
      this.option.series = [
        {
          name: map,
          type: 'map',
          mapType: map,
          roam: true, //禁止缩放平移，开启缩放平移下钻时会出现显示问题
          data: data,
          center: centerCoord,//让地图每次都居中，不跑偏
          nameMap: {
            china: '中国'
          },
          // 显示区域地名
          label: {
            normal: {
              show: true,
              textStyle: {
                color: '#999',
                fontSize: 10
              }
            },
            emphasis: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: 13
              }
            }
          },
          itemStyle: {
            normal: {
              areaColor: '#323c48',
              borderColor: 'dodgerblue'
            },
            // 高亮显示设置
            emphasis: {
              areaColor: 'darkorange', 鼠标选择区域颜色
            }
          },

        }
      ]
      this.myMapChart.setOption(this.option)
    },

  }
}
</script>

<style>
html,
body {
  height: 100%;
  padding: 0px;
  margin: 0px;
}
</style>

4，需要把省，市，区，的json文件放到静态文件夹里，用来引用，

用的json文件https://wwk.lanzout.com/iwZ531p52e7a5，效果图

省

点击省，下钻到市

点击市下钻到区