使用Vue 3结合ECharts实现地图数据下钻功能

1. 安装必要的依赖

npm install echarts vue-echarts --save

2.准备地图数据

实现地图下钻功能的核心是有不同层级的地理数据，比如国家、省份、城市的地图。ECharts 官方提供了大部分国家和地区的地理数据。
你可以直接通过 geoJson 加载。
你可以从 ECharts 官网 下载所需的 GeoJSON 数据。

或者使用第三方 API 来动态获取这些数据。通过第三方获取JSON数据网站：https://hxkj.vip/demo/echartsMap/

选择对应的省市区获取到对应的JSON数据

3.实现地图下钻

在 Vue 3 中创建一个 ECharts 组件并实现点击事件处理来进行地图下钻。

并将下载好的JSON文件放入assets文件中
代码如下：

<template>
  <div>
    <v-chart :options="mapOptions" @click="handleMapClick" style="width: 100%; height: 500px;" />
  </div>
</template>

<script setup>
import { defineComponent, ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { MapChart } from 'echarts/charts';
import { GeoComponent } from 'echarts/components';
import chinaGeoJson from '@/assets/china.json';  // 导入中国地图 GeoJSON 数据

use([CanvasRenderer, MapChart, GeoComponent]);
    const mapOptions = ref({});
    // 当前层级，初始为 'china'
    const currentLevel = ref('china'); 
    const geoData = {
    // 中国地图数据
      china: chinaGeoJson, 
      // 省份数据，点击后加载
      province: null, 
      // 城市数据，点击后加载
      city: null          
    };

    // 设置初始地图选项
    const setMapOptions = (mapData, mapName = 'china') => {
      mapOptions.value = {
        tooltip: {
          trigger: 'item',
          formatter: '{b}'  // 鼠标悬浮显示地区名称
        },
        series: [
          {
            name: mapName,
            type: 'map',
            map: mapName,
            roam: true,  // 开启缩放和平移
            label: {
              show: true
            },
            data: []
          }
        ]
      };
    };

    // 地图点击事件处理
    const handleMapClick = async (params) => {
      const regionName = params.name;

      if (currentLevel.value === 'china') {
        // 下钻到省份
        const provinceGeoJson = await import(`@/assets/provinces/${regionName}.json`);
        geoData.province = provinceGeoJson;
        echarts.registerMap(regionName, provinceGeoJson); // 注册省份地图数据
        currentLevel.value = 'province';
        setMapOptions(geoData.province, regionName);
      } else if (currentLevel.value === 'province') {
        // 下钻到城市
        const cityGeoJson = await import(`@/assets/cities/${regionName}.json`);
        geoData.city = cityGeoJson;
        echarts.registerMap(regionName, cityGeoJson); // 注册城市地图数据
        currentLevel.value = 'city';
        setMapOptions(geoData.city, regionName);
      }
    };

    onMounted(() => {
      // 初始展示全国地图
      echarts.registerMap('china', geoData.china); // 注册中国地图
      setMapOptions(geoData.china);
    });
</script>

<style>
/* 确保图表容器有足够的宽高 */
</style>

总结思路：地图下钻就是获取点击事件，并重新生成一份下钻后的地图。