使用时间:2023年5月16日
版本：“echarts”: “^5.4.0”,“echarts-gl”: “^2.0.9”,

最近业务需要地图下钻，网上搜了一圈，乱七八糟的，还有Vue里用JQ的(简直了)

流程图

忽略项目引入，直奔主题

以下写法是Vue选项式，未精简封装，仅供刚接触Echarts小白参考

<template>
    <div id="mymap" style="width: 500px;height:600px;"></div>
</template>

<script>
// 引入本地全国地图Json
import china from '/china.json'
    
theRequestMap() {
     // 地图数据格式匹配,"河南省"是要匹配点击时候获取的省名，"henan"为本地Json的名字
     let chinacod = {
        "河南省": "henan",
        ......
     }
    
    // 创建echarts实例对象
    let mCharts = this.$echarts.init(document.getElementById('myhenanmap'))
    // 生成地图并使用本地Json地图数据
    this.$echarts.registerMap('china', china)
    
    // 地图数据
    let option = {
        geo: {
           type: 'map', 
           map: 'china', // 要与this.$echarts.registerMap('china', china)中的第一个参数保持一致
           ......
      }
    }
    
    // 地图点击事件，在这里实现下钻
     mCharts.on('click', function (params) {
         //设置无下钻区域提示信息
         if (!chinacod[params.name]) {
              ElMessage({
              message: '无此区域地图显示',
              type: 'warning',
         })
         return;
       }
       // 获取地图点击区域的名字，根据名字请求本地地图Json
       let area = chinacod[params.name]
       axios.get(`static/${area}.json`)
           .then(response => {
               // 重新生成地图的Json数据
               _this.$echarts.registerMap('chinaMap', response.data)
               // 记录当前的区域，返回上地图的标识
                _this.nowArea = area  
               // 使用setOption方法将地图重置为点击的市区
               mCharts.setOption({
                  geo: {
                     type: 'map',
                     map: 'chinaMap', // 要与registerMap中的第一个参数保持一致
                     // 地图大小设置
                     layoutCenter: ["50%", "50%"],
                     layoutSize: '85%',
                    }
                });
            })
          .catch(error => {
              ElMessage({
                message: '请求失败！',
                type: 'error',
             })
          });
        });
        
      // 设置图标数据
      option && mCharts.setOption(option);
}
    
      
// 地图返回上一级地图事件
onBack() {
  //this.nowArea是地图点击时候存储的地图标识
  this.theRequestMap(this.nowArea)
}

</script>