echart自适应tree树图，结构组织图模板

1. 处理数据(代码中有处理数据逻辑，可忽略，因为后端返回的格式不匹配，需要自己处理)
   [{
   name: ‘test1’,
   children: [{
   name: ‘test2’
   }]
   }]

<template>
  <div class="boxEchart">
    <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: "100%",
      heightPro: "100%",
      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: "体系结构图",
            data: [],
            type: "tree",
            top: "1%",
            left: "10%",
            bottom: "1%",
            right: "10%",
            symbolSize: 9,
            label: {
              position: "left",
              verticalAlign: "middle",
              align: "right",
              fontSize: 11,
            },
            leaves: {
              label: {
                position: "right",
                verticalAlign: "middle",
                align: "left",
              },
            },
            emphasis: {
              focus: "descendant",
            },
            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750,
          },
        ],
      },
    };
  },
  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 = 120 * deepNum + "px";
          this.heightPro = 50 * 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,
        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,
        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">
.boxEchart {
  // border: 1px solid red;
  width: 100%;
  height: 100%;
  overflow: auto;
  margin: 0;
}
</style>