3.echarts的树状图的相关修改：节点样式、颜色、tree组件的高度等的修改

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.修改树的显示的层级，tree组件的高度

initialTreeDepth
series.height

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：定义树图边的样式

树结构的所有参数