Vue3 ECharts 实现地图及下钻功能 注释详细cv可用

先看最终效果图，鼠标悬停显示乡镇数据，点击下钻到乡镇地图。

一、首先需要准备你要制作地图及其下属县市的地图json数据，可以去这里进行地图下载（DataV.GeoAtlas地理小工具系列）

由于阿里云数据只到县市一级，如需获取乡镇地图数据，需要另行下载。

将下载好的地图数据配置到项目当中

二、下载ECharts

npm install echarts

三、在App.vue页面挂载到全局

import {
    provide，onMounted } from "vue";
import * as echarts from "echarts";
provide("echarts", echarts);

四、页面引入使用

<template>
   <div id="EchartsMap"></div>
</template>

import {
    inject，onMounted, ref } from "vue";
const echarts = inject("echarts");
const pointListInfo = ref<any>([]);// 所有地图点位
const polygons = ref<any>([]); // 多边形内点位

onMounted(async () => {
   
  // 页面初始化 引入默认json文件 xxx是城市名称
  const jsonData = await import(`../config/xxxx.json`);
  const data = await jsonData.default;
  const coordinates = data.features[0].geometry.coordinates;
  getEchartsMap(xxxx, data);
});

// 加载地图
const getEchartsMap = (mapName