1.修改樹狀圖表的節點為實心或者圖片

1.1 空心和實心

	symbol: "emptyCircle",// 空心
    symbol: "circle",// 實心

1.2 修改為圖片并且所有節點的圖片都一樣

    symbol:'image://' + require('@/assets/images/cute.jpg'),         

1.3 動態判斷修改為不同圖片

symbol: function(value, params) {
      console.log("params", value, params);
      // params.data節點的所有資料
     if (params.data.name == "學校") {
         return "image://" + require("@/assets/images/cute.jpg");
      } else if (params.data.name == "1年級") {
        return "image://" + require("@/assets/images/cute1.jpg");
     }
}

2.修改節點的顏色

在需要修改顏色的節點的資料中加itemStyle

 itemStyle: { color: "#ff0000" }

2.1 樹的資料

	data2: {
        name: "學校",
        value: 2,
        children: [
          {
            name: "1年級",
            value: 2,
            children: [
              {
                name: "1班",
                children: [
                  { name: "張三", value: 3938 },
                  { name: "李四", value: 6714 },
                ],
              },
              {
                name: "2班",
                children: [
                  { name: "張三", value: 3938 },
                  { name: "李四", value: 6714 },
                ],
              },
            ],
          },
          {
            name: "2年級",
            children: [
              {
                name: "1班",
                itemStyle: { color: "#ff0000" },
                children: [
                  { name: "張三", value: 3938 },
                  { name: "李四", value: 6714 },
                ],
              },
              {
                name: "2班",
                itemStyle: { color: "#8AC007" },
                children: [
                  { name: "張三", value: 3938 },
                  { name: "李四", value: 6714 },
                ],
              },
            ],
          },
        ],
      },

3.修改樹的顯示的層級

initialTreeDepth

4.運用

<template>
  <div style="padding:20px;">
    <el-card>
      <el-tabs type="border-card" v-model="tabName" @tab-click="handleClick">
        <el-tab-pane label="用戶管理" name="用戶管理">
          <el-button @click="open">{{
            initialTreeDepth === 1 ? "展開第二層" : "收起第二層"
          }}</el-button>
          <div id="tree" style="width:100%;height:500px;"></div>
        </el-tab-pane>
        <el-tab-pane label="配置管理" name="配置管理">
          <div class="echart-top"></div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      tabName: "用戶管理",
      initialTreeDepth: 1,
      data2: {
        name: "學校",
        value: 2,
        children: [
          {
            name: "1年級",
            value: 2,
            children: [
              {
                name: "1班",
                children: [
                  { name: "張三", value: 3938 },
                  { name: "李四", value: 6714 },
                ],
              },
              {
                name: "2班",
                children: [
                  { name: "張三", value: 3938 },
                  { name: "李四", value: 6714 },
                ],
              },
            ],
          },
          {
            name: "2年級",
            children: [
              {
                name: "1班",
                itemStyle: { color: "#ff0000" },
                children: [
                  { name: "張三", value: 3938 },
                  { name: "李四", value: 6714 },
                ],
              },
              {
                name: "2班",
                itemStyle: { color: "#8AC007" },
                children: [
                  { name: "張三", value: 3938 },
                  { name: "李四", value: 6714 },
                ],
              },
            ],
          },
        ],
      },
    };
  },
  mounted() {
    this.init();
  },
  watch: {
    "$store.state.collapse"(val) {
      console.log(val);
      setTimeout(() => {
        //echarts得重繪方法
        this.myChart.resize();
      }, 300);
    },
  },
  methods: {
    init() {
      this.getTree();
    },
    handleClick(value) {
      console.log("value", value);
      if (value.name === "用戶管理") {
        this.getTree()
      }
    },
    open() {
      if (this.initialTreeDepth == 1) {
        this.initialTreeDepth = 2;
      } else {
        this.initialTreeDepth = 1;
      }
      this.getTree();
    },
    getTree() {
      this.$nextTick(() => {
        this.$echarts.init(document.getElementById("tree")).dispose()
        this.myChart = this.$echarts.init(document.getElementById("tree"));
        let option = {
          tooltip: {
            trigger: "item",
            triggerOn: "mousemove",
            formatter: function(params) {
              return (
                params.name +
                "<br/>" +
                "下屬終端個數" +
                (params.value || "") +
                "<br/>" +
                "當前狀態" +
                "<span style='color:pink'>888<span>"
              );
            },
          },
          series: [
            {
              type: "tree",
              data: [this.data2],
              left: "2%",
              right: "2%",
              top: "8%",
              bottom: "20%",
              // symbol: "emptyCircle",
              symbol: "circle",
              // symbol:'image://' + require('@/assets/images/cute.jpg'),
              // symbol: function(value, params) {
              //   console.log("params", value, params);
              //   if (params.data.name == "學校") {
              //     return "image://" + require("@/assets/images/cute.jpg");
              //   } else if (params.data.name == "1年級") {
              //     return "image://" + require("@/assets/images/cute1.jpg");
              //   }
              // },
              symbolSize: [30, 30],
              orient: "vertical",
              expandAndCollapse: true,
              label: {
                position: "top",
                rotate: 0,
                verticalAlign: "middle",
                align: "right",
                fontSize: 16,
              },
              leaves: {
                label: {
                  position: "bottom",
                  rotate: 0,
                  verticalAlign: "middle",
                  align: "left",
                },
              },
              initialTreeDepth: this.initialTreeDepth,
              animationDurationUpdate: 750,
            },
          ],
        };
        this.myChart.setOption(option);
        window.addEventListener("resize", () => {
          this.myChart.resize();
        });
      });
    },
  },
};
</script>

<style scoped>
.echart-top {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 500px;
}
</style>

5.series引數

• layout：樹圖的布局，有 正交 和 徑向 兩種（正交就是水平或垂直；徑向就是以根節點為原點，每一層為一環）
• orient：樹圖中 正交布局 的方向
• symbol：標記的圖形（默認：emptyCricle)
• initialTreeDepth：樹圖初始展開的層級（深度）（默認：2）
• itemStyle：樹圖中每個節點的樣式
• label：每個節點所對應的文本標簽的樣式
• rich：自定義富文本樣式，在標簽中做出非常豐富的效果，
• leaves：葉子節點的特殊配置
• emphasis：樹圖中個圖形和標簽高亮的樣式
• data：資料格式是樹狀結構
• lineStyle：定義樹圖邊的樣式