首先老规矩，上代码
drawMap() { if ( this.myChart != null && this.myChart != "" && this.myChart != undefined ) { this.myChart.dispose(); } this.$nextTick(() => { let self = this; this.myChart = echarts.init(document.getElementById("mapTest")); // HuaiAn // let geoJson = "http://localhost:8080/static/mapHuaiAn.geoJson"; // XiaMen // let geoJson = "http://localhost:8080/static/mapXiaMen.geoJson"; // DrawMap // let geoJson = "http://localhost:8080/static/drawMap.geoJson"; // let geoJson = // "https://geo.datav.aliyun.com/areas_v3/bound/350200_full.json"; // "https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=350200_full"; // Origin let xiamen = "http://localhost:8080/static/mapXiaMen.geoJson"; // Test [BUG] // let xiamen = "http://localhost:8080/static/mapXiaMenTest.geoJson"; let haicang = "http://localhost:8080/static/HaiCang.geoJson"; let huli = "http://localhost:8080/static/HuLi.geoJson"; let jimei = "http://localhost:8080/static/JiMei.geoJson"; let siming = "http://localhost:8080/static/SiMing.geoJson"; let tongan = "http://localhost:8080/static/TongAn.geoJson"; let xiangan = "http://localhost:8080/static/XiangAn.geoJson"; var mapname = xiamen; var mapJson = [ { name: "海沧区", json: haicang, }, { name: "湖里区", json: huli, }, { name: "集美区", json: jimei, }, { name: "思明区", json: siming, }, { name: "同安区", json: tongan, }, { name: "翔安区", json: xiangan, }, ]; let mapDataOrigin = [ { name: "同安区", value: [118.14422607421875, 24.76927845059527, 29999], } ]; let mapData = mapDataOrigin; /** 此版本通过设置geoindex && seriesIndex: [1] 属性来实现geo和map共存，来达到hover散点 和区域显示tooltip的效果 默认情况下，map series 会自己生成内部专用的 geo 组件。 但是也可以用这个 geoIndex 指定一个 geo 组件。 这样的话，map 和 其他 series（例如散点图）就可以共享一个 geo 组件了。 并且，geo 组件的颜色也可以被这个 map series 控制，从而用 visualMap 来更改。 当设定了 geoIndex 后，series-map.map 属性，以及 series-map.itemStyle 等样式配置 不再起作用，而是采用 geo 中的相应属性。 并且加了pin气泡图标以示数值大小 */ this.myChart.showLoading(); this.myChart.on("click", function (e) { // console.log(e); var chooseName = mapJson.filter((item) => { return item.name == e.name; }); console.log("chooseName", chooseName[0].name); mapname = chooseName[0].json; // console.log(mapname, "选择地图"); mapData = []; $(\'<div class="back">返回市级</div>\').appendTo($("#mapTest")); $(".back").css({ position: "absolute", left: "17px", top: "25px", color: "rgb(222,222,222)", "font-size": "15px", cursor: "pointer", "z-index": "100", }); $(".back").click(function () { mapname = xiamen; mapData = mapDataOrigin; $(".back").css({ position: "absolute", left: "17px", top: "-25px", color: "rgb(222,222,222)", "font-size": "15px", cursor: "pointer", "z-index": "100", }); mapInit(); }); // Everytime after click, it needs to repaint. mapInit(); }); setTimeout(function () { mapInit(); }, 1000); function mapInit() { // geoJson --- map Location // res --- map Information // After everytime click, the mapname changes and also res. // $.get(geoJson, (res) => { // echarts.registerMap("xiamen", res); self.get(mapname).then((res) => { echarts.registerMap("xiamen", res); // console.log("我来了mapname", mapname); // console.log("new res", res); self.myChart.hideLoading(); let option = { backgroundColor: "#020933", title: { top: 20, text: "“困难人数” - 厦门市", subtext: "", x: "center", textStyle: { color: "#2ab8ff", }, }, visualMap: { min: 0, max: 1000000, right: 100, seriesIndex: 1, type: "piecewise", bottom: 100, textStyle: { color: "#FFF", }, splitList: [ { gt: 50000, color: "#F5222D", label: "困难人数大于5万人", }, //大于5万人 { gte: 30000, lte: 50000, color: "#FA541C ", label: "困难人数3-5万人", }, //3-5万人 { gte: 10000, lte: 30000, color: "#FA8C16", label: "困难人数1-3万人", }, //1-3万人 { lte: 10000, color: "#fbe1d6", label: "困难人数小于1万人", }, ], }, geo: { map: "xiamen", aspectScale: 0.75, //长宽比 zoom: 1.1, roam: false, itemStyle: { areaColor: "#013C62", shadowColor: "#182f68", shadowOffsetX: 0, shadowOffsetY: 25, }, }, emphasis: { itemStyle: { areaColor: "#2AB8FF", borderWidth: 0, color: "green", label: { show: false, }, }, label: { color: "#fff", }, scale: true, }, series: [ { type: "map", roam: true, label: { show: true, color: "#fff", }, itemStyle: { borderColor: "#2ab8ff", borderWidth: 1.5, // mapArea Color areaColor: "#12235c", }, zoom: 1.1, roam: false, map: "xiamen", // registerMap need to be same }, { type: "effectScatter", coordinateSystem: "geo", showEffectOn: "render", rippleEffect: { period: 15, scale: 4, brushType: "fill", }, itemStyle: { textStyle: { color: "yellow", }, shadowBlur: 10, shadowColor: "#333", }, data: mapData, }, ], }; self.myChart.setOption(option); }); } }); },
参考网址里的楼主用的下钻方法挺好的，mapInit函数，每次点击选择地图Json再初始化地图。包括数据点，市级和区级切换的时候涉及到装载和清空的两种情况。
我这个版本因为echarts5.1.2的缘故，改了一些Option选项，（不然每次一运行黄色的警告，难受）
加点用的这个网站坐标——geojson.io
如果直接把加点的坐标json复制过来，图会变得很奇怪，所以就用数组用的时候装进地图里。
效果如图