vue3使用ECharts地图配置高德地图实现往下钻效果

/*准备工作*/

//安装echarts
npm install echarts

//index.html文件中加入这俩行代码
<script src='https://webapi.amap.com/maps?v=1.3&key=你申请的key&plugin=AMap.DistrictSearch'></script>
<script src="https://webapi.amap.com/ui/1.0/main.js"></script>


//可以单独封装一个获取json的js文件
export function getGeoJson(adcode, geoJson = []) {
  return new Promise((resolve, reject) => {
    AMapUI.loadUI(["geo/DistrictExplorer"], (DistrictExplorer) => {
      var districtExplorer = new DistrictExplorer();
      districtExplorer.loadAreaNode(adcode, function (error, areaNode) {
        if (error) {
          console.error(error);
          reject(error);
          return;
        }
        let Json = areaNode.getSubFeatures();
        let mapJson = {
          features: [],
        };
        if (Json.length === 0) {
          Json = geoJson.features.filter(
            (item) => item.properties.adcode == adcode
          );
        }
        mapJson.features = Json;
        resolve(mapJson);
      });
    });
  });
}

　　传送门->申请高德地图key

//页面使用
<template>
　　<div id="map" style='height:500px,width:500px'></div>
</template>
<script setup>
 //引入echarts
import * as echarts from "echarts";
 //引入封装获取地图json的js文件
import { getGeoJson } from "../utils/getMapJson.js";
import { onMounted} from "vue";
const history = ref([
  {
    title: "全国",
    adcode: 100000,
  },
]);
onMounted(() => {
  getJson(100000);
});
const getJson = (val) => {
  var MapJsons = [];
  var MapJson = [];
  //去拿地图json数据
  getGeoJson(val).then((res) => {
    
    //模拟的假数据
    MapJsons = res.features.map((item) => {
      return {
        adcode: item.properties.adcode,
        name: item.properties.name,
        value: (Math.random() * 100).toFixed(2),
      };
    });
    MapJson = MapJsons.sort(function (a, b) {
      return a.value - b.value;
    });
    //模拟的假数据
    
    //调用绘制地图方法
    drawMap(res, MapJson);
  });
};
const drawMap = (map, json) => {
  //拿到标签的dom
  var mapChart = echarts.init(document.getElementById("map"));
  echarts.registerMap("SC", map); //注册地图
  //配置项
  let mapOption = {
    tooltip: {
      trigger: "item",
      formatter: (p) => {
        let val = p.value;
        if (p.name == "南海诸岛") return;
        if (window.isNaN(val)) {
          val = 0;
        }
        let txtCon =
          "<div style='text-align:left'>" +
          p.name +
          ":<br />销售额：" +
          val.toFixed(2) +
          "万</div>";
        return txtCon;
      },
    },
    visualMap: {
      show: true,
      min: 0,
      max: 100,
      left: "0%",
      bottom: "0%",
      calculable: true,
      inRange: {
        color: ["#24CFF4", "#2E98CA", "#1E62AC"],
      },
      textStyle: {
        color: "#24CFF4",
      },
    },
    series: [
      {
        name: "SC",
        type: "map",
        map: "SC",
        zoom: 1.2, //当前视角的缩放比例
        roam: true, //是否开启平游或缩放
        // scaleLimit: {
        //   //滚轮缩放的极限控制
        //   min: 1,
        //   max: 20,
        // },
        label: {
          normal: {
            show: true,
            color: "rgb(249, 249, 249)", //省份标签字体颜色
          },
          emphasis: {
            show: true,
            color: "#f75a00", //鼠标放上去字体颜色
          },
        },
        itemStyle: {
          //省突起来的效果
          normal: {
            areaColor: "#24CFF4",
            borderColor: "#53D9FF",
            borderWidth: 1,
            shadowBlur: 15,
            shadowColor: "rgb(58,115,192)",
            shadowOffsetX: 0,
            shadowOffsetY: 0,
          },
          emphasis: {
            areaColor: "#8dd7fc",
            borderWidth: 1.6,
            shadowBlur: 25,
          },
        },
        data: json,
      },
    ],
  };
  //加载进去，后面的true为了重新绘制
  mapChart.setOption(mapOption, true);
  //点击事件
  mapChart.on("click", (params) => {
    let obj = {
      title: params.data.name,
      adcode: params.data.adcode,
    };
    //存储点击下钻的数据，方便回到上级
    history.value.push(obj);
    //调用获取json
    getJson(params.data.adcode);
  });
};
</script>

效果如下