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>

效果如下