uniapp + echart 实现地图下钻

 <view id="map"></view>

创建实例

  mounted() {
    getMarkers().then((res) => {
      this.dataLists = res.data.regional_data;
      res.data.regional_data.forEach((item) => {
        const featuresdata = {
          geometry: item.geometry,
          properties: item.features[0].properties,
          type: item.features[0].type,
        };

        this.features.push(featuresdata);
      });
      this.dataList = {
        features: this.features,
        type: "FeatureCollection",
      };
      echarts.registerMap("", this.dataList);

      this.datafor();
      this.myChart = echarts.init(document.getElementById("map"));
      this.option = {
        visualMap: {
          min: 0,
          max: 1500,
          left: "left",
          top: "bottom",
          text: ["高", "低"], //取值范围的文字
          inRange: {
            color: ["#092d68"], //取值范围的颜色
          },
          show: false, //图注
        },
        geo: {
          selectedMode: "single",
          zoom: 2,
          roam: true,
          top: "9%",
          left: "11%",
          z: 5,
          label: {
            show: true,
            position: "center", // 修改为center使文字居中
            fontSize: 12,
            color: "#FFF",
            formatter: function (params) {
              return `${params.name}`;
            },
          },
          itemStyle: {
            areaColor: "#fff",
            borderColor: "#1291b9",
            borderWidth: 2,
            shadowColor: "#0f4c74",
            shadowOffsetX: 0,
            shadowOffsetY: 4,
            shadowBlur: 10,
            emphasis: {
              areaColor: "#fc6109",
              textStyle: {
                color: "#fff", // 点击后文字变成白色
              },
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: "#1188d4",
            },
          },
        },
        series: [
          {
            map: "china",
            name: "参数",
            type: "map",
            geoIndex: 0,
            label: {
              show: true,
              position: "center", // 修改为center使文字居中
              fontSize: 12,
              color: "#000",
            },
            data: this.mapData,
          },
        ],
      };
      this.init();
    });
  },

  xiazuan() {
      const params = this.params;
      console.log(params, "区域");
      this.regionName = params.data.name;
      this.nameList.push(params.data.name);
      console.log(this.nameList, "nameList");

      if (!params.data.is_can_lower) {
        uni.showToast({
          title: "暂无下级区域",
          icon: "none",
          mask: true,
        });
        return;
      }
      this.isShowBtn = false;

      if (params.data.grade == "area") {
        uni.showToast({
          title: "已是最低层",
          icon: "none",
          mask: true,
        });
        return;
      }
      if (params.data.level == "district") {
        return;
      } else if (params.data.level == "province") {
        this.levelValCode = params.data.id;
      } else if (params.data.level == "city") {
        if (params.data.cityCode == 510100) {
          this.option.series.push({
            type: "scatter",
            coordinateSystem: "geo",
            symbol: "pin",
            symbolSize: 20,
            rippleEffect: {
              brushType: "stroke",
            },
            itemStyle: {
              show: false,
              color: "red",
              formatter: function (params) {},
            },
            data: this.convertData(datas),
          });
        }
      }
      this.levelVal = params.data.level;
      this.onUpdate(params.data.id);
    },