树tree递归，获取深度和广度,用于计算echarts结构树图

树trees
数据实例：
data: [{
name: ‘test1’,
children: []
}]

1. 获取深度

 let deepNum = this.getDepth(this.option.series[0].data);
  console.log("深度");
 console.log(deepNum);

    getDepth(arr) {
      var depth = 0;
      while (arr.length > 0) {
        var temp = [];
        for (var i = 0; i < arr.length; i++) {
          temp.push(arr[i]);
        }
        arr = [];
        for (var i = 0; i < temp.length; i++) {
          for (var j = 0; j < temp[i].children.length; j++) {
            arr.push(temp[i].children[j]);
          }
        }
        if (arr.length >= 0) {
          depth++;
        }
      }
      return depth;
    },

2. 获取广度

const maxNode = []
this.countChildren(this.option.series[0].data, 0, maxNode)
console.log("广度");
console.log(maxNode);
 // 获取其中最大的层数
// this.heightPro = 120 * Math.max(...maxNode) + 'px'

 
// 返回每层的节点个数（数组形式）
countChildren(tree, level, result) {
  if (!result[level]) {
    result[level] = 0;
  }
  result[level] += tree.length;

  for (let i = 0; i < tree.length; i++) {
    if (tree[i].children && tree[i].children.length > 0) {
      this.countChildren(tree[i].children, level + 1, result);
    }
  }
}

3. 全部代码

<template>
  <div style="width: 100%; height: 100%; overflow: auto;">
    <div ref="echart" :style="{ width: width, height: height }"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme

export default {
  props: {
    chartData: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      id: "chart",
      myChart: null,
      widthPro: "1200px",
      heightPro: "600px",
      option: {
        toolbox: {
          left: 10,
          show: true,
          iconStyle: {
            // color: '#1890ff',
          },
          feature: {
            dataZoom: {
              show: false,
            },
            dataView: { show: false },
            magicType: { show: false },
            restore: {
              show: false,
            },
            saveAsImage: {
              name: "体系结构图",
            },
          },
        },
        tooltip: {
          trigger: "item",
          triggerOn: "mousemove",
          formatter: function (params, ticket, callback) {
            return params.name;
          },
        },
        series: [
          {
            name: "体系结构图",
            type: "tree",
            orient: "horizontal", // vertical horizontal
            // rootLocation: { x: "0%", y: "0%" }, // 根节点位置  {x: 'center',y: 10}
            nodePadding: 20,
            initialTreeDepth: 10,
            // symbolSize: [220, 30], //设置框的大小
            layerPadding: 40,
            edgeShape: "polyline", //设置连接线曲线还是折线，默认情况下是曲线，curve曲线 polyline直线
            symbol: "rect",
            borderColor: "black",
            itemStyle: {
              color: "#fff",
              borderColor: "#333",
              borderWidth: 1,
              overflow: "truncate",
            },
            label: {
              show: true,
              position: "inside",
              textStyle: {
                fontSize: 15,
                color: "#333",
              },
              ellipsis: '...',
              // overflow: 'breakAll',
              // formatter: function (params, ticket, callback) {
              //   if(params.data.level > 2) {
              //     if(params.name.length > 10) {
              //       return params.name.substring(0, 10).split("").join("\n")+ '\n...';
              //     } else {
              //       return params.name.split("").join("\n")
              //     }
              //   }
              // }
            },
            lineStyle: {
              color: "#7b7b7b", //连接线的颜色
              width: 1,
            },
            // zoom: 0.5, //当前视角的缩放比例
            roam: true, //是否开启平游或缩放  // 是否开启鼠标缩放或平移，默认false
            scaleLimit: {
              //滚轮缩放的极限控制
              min: 0.2,
              max: 1,
            },
            data: []
          }
        ],
      },
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.treeData = this.initData();
        console.log("数据处理结果---");
        console.log(this.treeData);
        this.option.series[0].data[0] = this.treeData;
        if (this.myChart) {
          console.log("-----重新渲染");
          // this.widthPro = "1200px";
          // this.heightPro = "900px";
          // 计算树的深度，来动态改变图形高度
          let deepNum = this.getDepth(this.option.series[0].data);
          const maxNode = []
          this.countChildren(this.option.series[0].data, 0, maxNode)
          console.log("广度");
          console.log(maxNode);
          console.log("深度");
          console.log(deepNum);

          this.widthPro = 350 * deepNum + "px";
          this.heightPro = 120 * Math.max(...maxNode) + 'px'
          this.option.series[0].initialTreeDepth = deepNum

          this.$nextTick(() => this.resize());

          this.myChart.setOption(this.option, true);
        }
      },
    },
  },
  computed: {
    width() {
      return this.widthPro ? this.widthPro : "100%";
    },
    height() {
      return this.heightPro ? this.heightPro : "100%";
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.myChart = echarts.init(this.$refs.echart, "shine");
      this.myChart.setOption(this.option);
      this.myChart.on("click", (params) => {
        this.$emit("click", params);
      });
    });
    window.addEventListener("resize", () => {
      this.resize();
    });
  },
  beforeDestroy() {
    console.log("销毁-----");

    if (!this.myChart) {
      return;
    }
    this.myChart.dispose();
    this.myChart = null;
  },
  methods: {
    resize() {
      this.myChart.resize();
    },
    initData() {
      let chatDataObj = {
        name: this.chartData.systemName,
        level: 1,
        symbolSize: [this.chartData.systemName.length * 25, 30],
        children: [],
      };
      if (this.chartData.chidrenVoList) {
        // 处理数据
        let childrenDef = this.chartData.chidrenVoList.map((org) =>
          this.mapTree({
            level: 2,
            ...org,
          })
        );
        chatDataObj.children = childrenDef;
      }
      return chatDataObj;
    },
    mapTree(org) {
      const haveChildren =
        Array.isArray(org.childrenList) && org.childrenList.length > 0;
      return {
        name: org.systemName,
        level: org.level,
        symbolSize: [org.systemName.length * 23, 30],
        data: { ...org },
        //判断它是否存在子集，若果存在就进行再次进行遍历操作，知道不存在子集便对其他的元素进行操作
        children: haveChildren
          ? org.childrenList.map((i) =>
              this.mapTree({
                level: org.level + 1,
                ...i,
              })
            )
          : [],
      };
    },
    getDepth(arr) {
      var depth = 0;
      while (arr.length > 0) {
        var temp = [];
        for (var i = 0; i < arr.length; i++) {
          temp.push(arr[i]);
        }
        arr = [];
        for (var i = 0; i < temp.length; i++) {
          for (var j = 0; j < temp[i].children.length; j++) {
            arr.push(temp[i].children[j]);
          }
        }
        if (arr.length >= 0) {
          depth++;
        }
      }
      return depth;
    },
    countChildren(tree, level, result) {
  if (!result[level]) {
    result[level] = 0;
  }
  result[level] += tree.length;

  for (let i = 0; i < tree.length; i++) {
    if (tree[i].children && tree[i].children.length > 0) {
      this.countChildren(tree[i].children, level + 1, result);
    }
  }
}
  },
};
</script>
<style scoped lang="scss"></style>