echarts地图下钻

    init() {
    // 获取地图数据接口
      getChart({
        address: "浙江省",
      }).then((res) => {
        this.mapData = res.regionDetailList;
        // 处理接口数据 返回name value
        this.mapData = this.mapData.map((item, index) => {
          return {
            name: item.regionName,
            value: item.needPeopleMagnification,
          };
        });
        // 获取数据之后初始化地图
        this.initMap();
      });
    },
    initMap() {
      let that = this;
      const chart = this.$echarts.init(document.getElementById("map-box"));
      // 鼠标右键返回省级地图
      // document.getElementById("map-box").oncontextmenu = (e) =>
      //   e.preventDefault();
      document.getElementById("map-box").onmousedown = function (e) {
        if (e.button == 2) {
        // 返回重新获取数据
          that.init();
          // 初始化place
          that.$emit("place", "浙江省");
        }
      };
      // 添加地图点击事件
      chart.on("click", function (params) {
      // 点击的地图名字传入父组件
        that.$emit("place", params.name);
        // 根据下钻地区获取该地区的数据
        getChart({
          address: params.name,
        }).then((res) => {
          that.mapData = res.regionDetailList;
          that.mapData = that.mapData.map((item, index) => {
            return {
              name: item.regionName,
              value: item.needPeopleMagnification,
            };
          });
          // 获取该地区的json数据
          var hz = require(`../../../../static/zhejiang/${params.name}.json`);
          const data = hz;
          // 注册地图
          that.$echarts.registerMap("hz", data);
          that.option = {
          // 鼠标悬浮提示
            tooltip: {
              show: false,
              formatter: "{a}<br/>{b}: {c}",
            },
            geo: {
              map: "hz",
              show: true,
              itemStyle: {
                normal: {
                  shadowColor: "#00002A", // 外边框阴影色
                  shadowBlur: 10000, //外边框阴影
                  opacity: 1,
                },
              },
            },
            //颜色范围
            dataRange: {
              show: false,
              x: "left",
              y: "bottom",
              // 根据value确定地图区域颜色
              splitList: [
                { start: 3, end: 4, color: "#ac4b42" },
                { start: 2, end: 3, color: "#a67027" },
                { start: 1, end: 2, color: "#3d8d61" },
              ],
            },
            textStyle: {
              color: "#3899FF", // 值域文字颜色
            },
            selectedMode: false,
            series: [
              {
                type: "map",
                mapType: "hz",
                roam: false,
                zoom: 1,
                hoverable: false,
                lengend: {
                  show: false,
                },
                itemStyle: {
                  normal: {
                    borderWidth: 1, //区域边框宽度
                    borderColor: "#4aa4d5", //区域边框颜色
                    // 地图上文本颜色属性设置
                    label: {
                      show: true,
                      color: "#fff",
                      fontSize: 18,
                      // 文本显示内容
                      formatter: (data) => `{num|${data.value}}\n${data.name}`,
                      rich: {
                      // 数值单独设置color
                        num: {
                          color: "yellow",
                          fontSize: 18,
                        },
                      },
                    },
                  },
                  //高亮区域属性设置
                  // emphasis: {
                  //   // borderWidth: 0,
                  //   // borderColor: "transparent",
                  //   // areaColor: "transparent",
                  // },
                },
                //数据评分value
                data: that.mapData,
                // 自定义名称映射 将地图上的名称 映射成我们需要的名称
                nameMap: {
                  临安区: "临安市",
                  奉化区: "奉化市",
                  玉环市: "玉环县",
                  龙港市: "龙岗市",
                },
                //数据格式eg:
                // data: [
                //   { name: "开化县", value: 1.5 },
                //   { name: "江山市", value: 2.5 },
                //   { name: "常山县", value: 2.5 },
                //   { name: "衢江区", value: 1.5 },
                //   { name: "龙游县", value: 2.5 },
                //   { name: "柯城区", value: 3 },
                // ],
              },
            ], //各省地图颜色数据依赖value
          };
          chart.setOption(that.option);
        });
      });
      // 引用地图json数据
      var hz = require("../../../../static/china_province/330000_full.json");
      const data = hz;
      // 注册地图
      this.$echarts.registerMap("hz", data);
      this.option = {
        // 鼠标移入悬浮
        tooltip: {
          show: false,
          formatter: "{b}:{c}",
        },
        geo: {
          map: "hz",
          show: true,
          itemStyle: {
            normal: {
              shadowColor: "#00002A", // 外边框阴影色
              shadowBlur: 10000, //外边框阴影
              opacity: 1,
            },
          },
        },
        //颜色范围，底部标签
        dataRange: {
          show: false,
          x: "left",
          y: "bottom",
          splitList: [
            { start: 3, end: 4, color: "#ac4b42" },
            { start: 2, end: 3, color: "#a67027" },
            { start: 1, end: 2, color: "#3d8d61" },
          ],
        },
        series: [
          {
            name: "浙江",
            type: "map",
            mapType: "hz",
            itemStyle: {
              normal: {
                borderWidth: 1, //区域边框宽度
                borderColor: "#4aa4d5", //区域边框颜色
                // 地图内部文字
                label: {
                  show: true,
                  color: "#fff",
                  fontSize: 18,
                  formatter: (data) =>
                    `{num|${data.data.value}}\n${data.data.name}`,
                  rich: {
                    num: {
                      color: "yellow",
                      fontSize: 18,
                    },
                  },
                },
              },
              // emphasis: {
              //   // borderWidth: 0,
              //   // borderColor: "transparent",
              //   // areaColor: "transparent",
              // },
            },
            //数据评分value
            // 地图内部数据 name value
            data: this.mapData,
          },
        ], //各省地图颜色数据依赖value
      };
      chart.setOption(this.option);
      // setTimeout(function () {
      //   window.onresize = function () {
      //     chart.resize();
      //   };
      // }, 200);
    },