1、前言

目前实现了两点：

1. 根据准备好的数据生成树形图
2. 根据数据数值改变节点以及节点文本颜色

百度上关于g6树形图的文章挺少的，因为g6功能很齐全非常庞大 （非常用心的在做图表，真的好用）但用脚写的文档而且主要我比较菜 所以我还是摸了一天才实现了效果

实现效果如下：

2、数据处理

1. 安装和引入G6
   我直接在用到树图的vue文件引入了，在main.js中全局引入似乎没有效果

npm install --save @antv/g6
import G6 from "@antv/g6";

2. 数据处理

• 注意：
• 1、生成树形图的数据中必须包含id 和 children 两个数据项，
• 2、id的数据类型为字符串类型，不然在图上操作收缩节点的时，收到最后一个节点的时候会报错。可以在数据处理将id转为string类型

id:  String(item.id)

• 从后台返回的数据没有包含上面两个必要数据项，所以这里写了个方法处理一下
• 定义了一个数组接收处理后的数据 treedata 使用的时候图表数据 const data = this.treedata[0]

    changeTreeData() {
      this.getTreedata.forEach((item, i) => {
        let data2 = [];
        for (var i in item.indexList) {
          let data3 = [];
          for (var j in item.indexList[i].indexList) {
           var data = (
              item.indexList[i].indexList[j].indexName +
              "(" +
              item.indexList[i].indexList[j].newData +
              "/" +
              item.indexList[i].indexList[j].tarData +
              ")"
            ).replace(/(.{18})/g, "$1\n");
            data3.push({ id: String(item.indexList[i].indexList[j].id), label: data, status: item.indexList[i].indexList[j].status });
          }
          data2.push({
            id: String(item.indexList[i].id),
            label: item.indexList[i].indexTitle,
            children: data3,
          });
        }
        this.treedata.push({id:  String(item.id),label: item.indexTitle, children: data2 })
      });
    },

处理出来的数据长这样

3、自定义节点样式方法

官方文档里做了样式的详细介绍 节点总览

我这里做了个简单的，根据数据项判断，修改节点样式

    // 这个方法是为不同节点进行配置 必须在 render 之前调用 定义的样式优先级
    graph.node(function (node) {
      return {
      //节点样式 根据数据项更改节点填充和描边颜色
         style: {
           fill:node.depth==2 && node.status?'#c1422b':'#c6e5ff',
           stroke:node.depth==2 && node.status?'#c1422b':'#6b9bfa'
        },
        //String 类型。标签文本的文字内容,在本文开头展示的图里这里写的是 label: node.id
        label: node.label,
        labelCfg: { 
          // 文本的偏移
          offset: 10,
          // 文本相对于节点的位置
          position: node.children && node.children.length > 0 ? 'left' : 'right',
          //文本样式 根据数据项更改文本颜色
          style:{ fill:node.depth==2 && node.status?'#c1422b':'#2c3e50'},
        },
      };
    });

4、完整代码

<template>
  <div>
    <div id="container" :style="{ height: '800px', width: '100%' }" />
  </div>
</template>
<script>
import G6 from "@antv/g6";

export default {
  data() {
    return {
      getTreedata: [
      		..你的数据
         ],
      treedata: [],
    };
  },
  mounted() {
    this.changeTreeData();
    this.showChart();
  },
  methods: {
  //处理数据
    changeTreeData() {
      this.getTreedata.forEach((item, i) => {
        let data2 = [];
        for (var i in item.indexList) {
          let data3 = [];
          for (var j in item.indexList[i].indexList) {
            var data = (
              item.indexList[i].indexList[j].indexName +
              "(" +
              item.indexList[i].indexList[j].newData +
              "/" +
              item.indexList[i].indexList[j].tarData +
              ")"
            ).replace(/(.{18})/g, "$1\n");
            data3.push({ id:item.indexList[i].indexList[j].id, label: data, status: item.indexList[i].indexList[j].status });
          }
          data2.push({
            id: String(item.indexList[i].id),
            label: item.indexList[i].indexTitle,
            children: data3,
          });
        }
        this.treedata.push({id: item.id,label: item.indexTitle, children: data2 })
      console.log(this.treedata);
    },
    //生成树图
    showChart() {
      const data = this.treedata[0]
      const container = document.getElementById("container");
      if (container) {
        const width = container.clientWidth;
        const height = container.clientHeight;
        const graph = new G6.TreeGraph({
          // 图的DOM 容器，可以传入该 DOM 的 id 或者直接传入容器的 HTML 节点对象。
          container: container,
          width: width,
          height: height,
          // 设置画布的模式 包含default 模式和 edit 模式
          modes: {
            // default 模式中包含点击选中节点行为和拖拽画布行为
            default: [
              {
                type: "collapse-expand",
                  trigger: 'click',
              },
              // 拖拽画布 和 缩放画布
              "drag-canvas",
              "zoom-canvas",
            ],
          },
          // 默认的节点设置
          defaultNode: {
            //节点的大小
            size: 14,
            // 指定边连入节点的连接点的位置
            anchorPoints: [
              [0, 0.5],
              [1, 0.5],
            ],
            // 节点样式
            style: {
              fill: "#C6E5FF",
              stroke: "#5B8FF9",
            },
          },
          // 默认的配置
          defaultEdge: {
            type: "cubic-horizontal",
            style: {
              stroke: "#A3B1BF",
            },
          },
          layout: {
            type: "compactBox",
            direction: "LR",
            // 指定节点 ID
            getId: function getId(d) {
              return d.id;
            },
            // 指定节点高度
            getHeight: function getHeight() {
              return 16;
            },
            //指定节点宽度
            getWidth: function getWidth() {
              return 16;
            },
            // 指定节点之间的垂直间距
            getVGap: function getVGap() {
              return 10;
            },
            // 指定节点之间的水平间距
            getHGap: function getHGap() {
              return 100;
            },
          },
        });

    // 为不同节点进行不同的配置 必须在 render 之前调用
    graph.node(function (node) {
      return {
         style: {
           fill:node.depth==2 && node.status?'#c1422b':'#c6e5ff',
           stroke:node.depth==2 && node.status?'#c1422b':'#6b9bfa'
        },
        //String 类型。标签文本的文字内容
        label: node.label,
        labelCfg: { 
          // 文本的偏移
          offset: 10,
          // 文本相对于节点的位置
          position: node.children && node.children.length > 0 ? 'left' : 'right',
          //文本样式
          style:{ fill:node.depth==2 && node.status?'#c1422b':'#2c3e50'},
        },
      };
    });
	//初始化数据
    graph.data(data);
    //渲染视图
    graph.render();
    //让画布内容适应视口
    graph.fitView();
      }
    },
  },
};
</script>

——————————————————————————————————————
以上是我的一些学习记录，大多都是啃文档来的，如果有理解错误或者理解不周全的地方欢迎指正~