地图下钻+标记点

首先老规矩，上代码

    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);
          });
        }
      });
    },

参考网址——Make A Pie - “困难人数” - 杭州市

参考网址里的楼主用的下钻方法挺好的，mapInit函数，每次点击选择地图Json再初始化地图。包括数据点，市级和区级切换的时候涉及到装载和清空的两种情况。

我这个版本因为echarts5.1.2的缘故，改了一些Option选项，（不然每次一运行黄色的警告，难受）

加点用的这个网站坐标——geojson.io

如果直接把加点的坐标json复制过来，图会变得很奇怪，所以就用数组用的时候装进地图里。

效果如图