在vue中使用AntV/G6完成“V”型树状图且上下级明确，学习心得记录

效果如图：

学习之路

安装

 npm install --save @antv/g6

在文件中引入

import G6 from '@antv/g6';

在需要操作的方法中定义并且调用：

mounted() {
   
	this.initGraph()
}

data中的数据格式：
一个根节点（id:root）、两个子节点(id:1和id:2)区分上和下

relationData: {
   
		// 第一层
        id: 'root',
        type: 'rect',
        label: '@@@@@有限公司',
        children: [{
   
        // 第二层
          id: '1',
          label: '下',
          children: [
            {
   
              id: '1-1',
              label: '@@@@@@@有限公司',
              money: '3,283.456',
              percent: 23,
            },
            {
   
              id: '1-2',
              label: '@@@@@@@有限公司',
              money: '3,283.456',
              percent: 23,
            },
            {
   
              id: '1-3',
              label: '@@@@@@@有限公司',
              money: '3,283.456',
              percent: 23,
            },
            {
   ......} // 省略
          ]
        }, {
   
          id: '2',
          label: '上',
          children: [
            {
   
              id: '2-1',
              name: '李易峰',
              shares: '3,283.456',
              percent: 23,
            },
            {
   
              id: '2-2',
              name: '李易峰',
              shares: '3,283.456',
              percent: 23,
            },
            {
   
              id: '2-3',
              name: '李易峰',
              shares: '3,283.456',
              percent: 23,
            },
            {
   .....}
          ]
        }]
      },

代码如下：

initGraph() {
   
	// 对数据进行处理
      this.relationData.children.forEach(i => {
   
      // 上层节点的子节点都标注位置为上（用于设置不同样式）
        if (i.label === '上') {
   
          i.children.forEach(j => {
   
            j.position = '上'
            // 上层节点的连接点的位置
            j.anchorPoints = [
              [0.5, 0],
              [0.5, 1]
            ]
          })
        } else if (i.label === '下'){
   
          i.children.forEach(j => {
   
            j.position = '下'
          })
        }
      })
      /* 中间的根节点 */
      G6.registerNode('root', {
   
        draw: (cfg, group) => {
   
        // 设置样式
          const size = [130, 22]
          const keyShape = group.