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

1.修改树状图表的节点为实心或者图片

3.echarts的树状图的相关修改:节点样式、颜色、tree组件的高度等的修改_第1张图片

1.1 空心和实心

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

1.2 修改为图片并且所有节点的图片都一样

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

3.echarts的树状图的相关修改:节点样式、颜色、tree组件的高度等的修改_第2张图片

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");
     }
}

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

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 +
                "
"
+ "下属终端个数" + (params.value || "") + "
"
+ "当前状态" + "888" ); }, }, 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:定义树图边的样式

树结构的所有参数

你可能感兴趣的:(Echarts的一些使用技巧)