Echarts 实现矩形树图

  ​​​​​​​​​​​​​​

​​​​​​​

  const getData = () => {
      const data = {
        deep: 10,
        needNum: 1,
        chainIdList: [props.industryType],
      };
      let list = [],
        array = [];
      updata.getChainTree(data).then((res) => {
        if (res) {
          if (!res.data || res.data.length <= 0) {
            emit("noDataFn", true);
            return;
          }
          array = recursiveFilter(res.data[0].childList);
          list = JSON.parse(
            JSON.stringify(array)
              .replace(/chainName/g, "name")
              .replace(/selfChildNum/g, "value")
              .replace(/childList/g, "children")
          );
          creatCharts(list);
        }
      });
    };
    // 由于数据差距较大出现的问题导致有些矩形特别大或者特别小的情况使用对数来处理数据
    const recursiveFilter = (items) => {
      for (let i = 0; i < items.length; i++) {
        const item = items[i];
        item.oldValue = item.selfChildNum
        item.selfChildNum = Math.log(item.oldValue)
        // 当前对象存在children
        if (item && item["childList"]) {
          // children为空数组时删除
          if (item["childList"].length === 0) {
            delete item["childList"];
          } else {
            // 递归当前children数组
            recursiveFilter(item["childList"]);
          }
        }
      }
      return items;
    };

     var option = {
        tooltip: {
          show: true,
          formatter: function (params) {
            return params.name +' '+ params.data.oldValue + '家';
          },
        },
        backgroundColor: "#ebebeb",
        // visualMap:{
        //     type: 'continuous',
        //     min:0,
        //     max:19551,
        // },
        series: [
          {
            name: "产业环节",
            type: "treemap",
            // backgroundColor: "blue",
            leafDepth: 1,
            left: 0,
            top: 0,
            right: 0,
            bottom: 25,
            textStyle: {
              color: "#000",
            },
            // emphasis:{
            //     itemStyle:{
            //         color:'blue'
            //     }
            // },
            data: list,
            label: {
              show: true,
              formatter: function (params) {
                return params.name+': '+ params.data.oldValue + "家";
              },
              // formatter: "{title|{b}}",
              fontSize: 15,
            },
            nodeClick: "none",
            roam: false,
            levels: [
              {
                colorSaturation: [0.4, 0.5, 0.6],
                colorMappingBy: "value",
                color: ["#9CC6FF", "#80B1FC", "#5F8DE7"],
                itemStyle: {
                  borderColor: "transparent",
                  borderWidth: 0,
                  gapWidth: 0,
                },
              },
              {
                colorSaturation: [0.4, 0.5, 0.6],
                colorMappingBy: "value",
                color: ["#9CC6FF", "#80B1FC", "#5F8DE7"],
                itemStyle: {
                  borderColor: "transparent",
                  gapWidth: 0,
                  borderWidth: 0.1,
                },
              },
              {
                colorSaturation: [0.4, 0.5, 0.6],
                colorMappingBy: "value",
                color: ["#9CC6FF", "#80B1FC", "#5F8DE7"],
                itemStyle: {
                  borderColorSaturation: 0.1,
                  gapWidth: 0,
                  borderWidth: 0.1,
                },
              },
            ],
          },
        ],
      };
      myCharts.on("click", (params) => {
        console.log(params);
      });
      myCharts.setOption(option);