关于echarts实现地图下钻的功能(实现中国省市区下钻功能)

前言
最近公司的项目用到了地图的下钻功能，百度大多数都是部分，但是也有很多好的参照，我觉得很有意思，自己写了一个vue的，有vue2和vue3的版本，ts没有去实现，就是在vue3的基础上加上类型定义–喜欢研究的自行去试试

实现地图的省市区下钻功能

效果图：

部分代码片段

vue2版本

	<template>
  <div class="container">
    <div class="map" id="map"></div>
  </div>
</template>

<script>
import axios from "axios";
import {cityMap} from "@/utils/china-main-city-map.js"
export default {
  name: "Home",
  data() {
    return {
      myChart: null,
      chinaCode: 100000,
      currentMapName: "china"
    };
  },
  methods: {
    //初始化地图
    initMap(mapName, mapJSON) {
      this.myChart = this.$echarts.init(document.getElementById("map"));
      this.$echarts.registerMap(mapName, mapJSON); //注册地图
      //开始初始化地图
      this.myChart.setOption({
        series: [
          {
            type: "map",
            map: mapName,
            roam: true, //是否可以拖拽
            selectedMode: "false", // 是否允许选中多个区域
            label: {
              show: false //不显示省份名字
            },
            top: "140",
            left: 'center',
            zoom: "1.2",
            itemStyle: {
              areaColor: "#009999",
              borderColor: "#999"
            },
            data: this.initMapData(mapJSON),
            emphasis: {
              itemStyle: {
                // 这个是鼠标移上去就会选中的样式，鼠标mouseover
                borderWidth: 1,
                borderColor: "#666",
                areaColor: "#3EB8B5"
              },
              select: {
                itemStyle: {
                  areaColor: "#3EB8B5"
                }
              }
            }
          }
        ]
      });

      //地图的点击事件
      this.myChart.on("click", params => {
        console.log(params.name, 555555);
        const map=cityMap[params.name]; //获取点击的省份的json数据]
        console.log(map,66666);
        if(map){
            this.currentMapName=params.name;
            this.getMapData(map);
        }
      })
    },

    //处理地图的数据
    initMapData(mapJson) {
       
        let mapData = [];
       /*  for (let i = 0; i < mapJson.features.length; i++) {
        mapData.push({ name: mapJson.features[i].properties.name });
      } */
      mapData=mapJson.features.map((item)=>{
        return item.properties.name;
      }) 
      return mapData;
    },

    //获取地图的数据,收到匹配城市的编码进行数据的请求
    getMapData(map) {
      axios.get(`/map/${map}.json`)
        .then(res => {
          if (res.status == 200) {
            //调用绘制图形的方法，更新地图
            let mapJSON = res.data;
          
            this.initMap(this.currentMapName, mapJSON);
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },

  mounted(){
    this.getMapData(this.chinaCode);
  },
};
</script>

<style scoped lang="less">
.container {
  width: 100%;
  height: 100vh;
  background: url("@/assets/images/background.jpg") no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  .map {
    width: 100%;
    height: 800px;
  }
}
</style>

vue3版本

	<template>
  <div class="map_container">
    <div class="map" id="map"></div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import axios from "axios";
import { onMounted, ref, onBeforeUnmount, markRaw } from "vue";
import { cityMap } from "@/utils/china-main-city-map.js";

let myCharts = ref();
const chinaCode = ref(100000);
const currentMapName = ref("china");

onMounted(() => {
  myCharts.value = markRaw(echarts.init(document.getElementById("map")));

  getMapData(chinaCode.value);

});

//全国地图的回调
const initMap = (mapName, mapJSON) => {
  echarts.registerMap(mapName, mapJSON);
  myCharts.value.setOption({
    series: [
      {
        type: "map",
        map: mapName,
        roam: true, //是否可以拖拽
        selectedMode: "false", // 是否允许选中多个区域
        label: {
          show: false //不显示省份名字
        },
        top: "140",
        left: "center",
        zoom: "1.2",
        itemStyle: {
          areaColor: "#009999",
          borderColor: "#999"
        },
        data: initMapData(mapJSON),
        emphasis: {
          itemStyle: {
            // 这个是鼠标移上去就会选中的样式，鼠标mouseover
            borderWidth: 1,
            borderColor: "#666",
            areaColor: "#3EB8B5"
          },
          select: {
            itemStyle: {
              areaColor: "#3EB8B5"
            }
          }
        }
      }
    ]
  });

  //省份下钻
  myCharts.value.on("click", (params) => {
    console.log(params);
    const map=cityMap[params.name];
    if(map){
        currentMapName.value=params.name;
        getMapData(map);
    }
  })
};

//处理数据
const initMapData = (mapJson) => {
    let mapData = [];
    //方法一：
     /*  for (let i = 0; i < mapJson.features.length; i++) {
        mapData.push({ name: mapJson.features[i].properties.name });
      } */
      mapData=mapJson.features.map((item)=>{
        return item.properties.name;
      }) 
      return mapData;
}

//获取地图数据
const getMapData = (map)=>{
    axios.get(`/src/assets/map/${map}.json`).then(res=>{
        if(res.status==200){
            const mapJSON=res.data;
            console.log(mapJSON,'mapJSON');
            initMap(currentMapName.value,mapJSON)
        }
    }).catch(err=>{
        console.log(err);
    })
}
</script>

<style lang="less" scoped>
.map_container {
  width: 100%;
  height: 100vh;
  background: url("@/assets/images/background.jpg") no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  .map {
    width: 100%;
    height: 800px;
  }
}
</style>

地图的样式属性较多，你们自己可以自行调整

地区的数据可以在该网站进行提取：
datav的地图选择器