antv g6决策树

antv g6决策树

<template>
  <div id="container"></div>
</template>

<script>
import G6 from "@antv/g6";

export default {
  name: "index",
  mounted() {
    // console.log(777777778889);
//  this.treedata=    JSON.parse(JSON.stringify(this.treedata).replace(/"name"/g,'"label"'))
//   this.treedata=   JSON.parse(JSON.stringify(this.treedata).replace(/"sub_folder"/g,'"children"'))

    let backgroundColor = 'rgba(255,230,230,0.88)'
    let fontColor = 'rgb(0,0,0)'
    let trueincreaseColor = 'rgb(111,255,115)'
    let increaseFontColor = 'rgb(255,255,255)'
    let falseincreaseColor = 'rgb(255,0,0)'
    let circleColor = 'rgba(17,28,236,0.85)'
    let lineColor = 'rgba(83,124,248,0.85)'
    this.init(backgroundColor, fontColor, trueincreaseColor, falseincreaseColor, circleColor, lineColor, increaseFontColor);
  },
  // props:["treedata"],

  methods: {
    init(color, fontColor, trueincreaseColor, falseincreaseColor, circleColor, lineColor, increaseFontColor) {

// root node
      G6.registerNode('root', {
        draw: (cfg, group) => {
          const size = [80, 30];
          const keyShape = group.addShape('rect', {
            attrs: {
              width: size[0],
              height: size[1],
              x: -size[0] / 2,
              y: -size[1] / 2,
              fill: color,
              radius: 5
            },
            draggable: true,
            name: 'root-keyshape'
          });
          group.addShape('text', {
            attrs: {
              text: `${cfg.ratio}%`,
              fill: fontColor,
              fontSize: 6,
              x: 10 - size[0] / 2,
              y: 3,
            },
            draggable: true,
            name: 'ratio-shape'
          });
          group.addShape('text', {
            attrs: {
              text: `${cfg.label}`,
              fill: fontColor,
              fontSize: 9,
              x: -6,
              y: 0,
            },
            draggable: true,
            name: 'label-shape'
          });
          group.addShape('line', {
            attrs: {
              x1: -6,
              x2: 35,
              y1: 2,
              y2: 2,
              stroke: 'rgba(255, 255, 255, 0.85)',
              lineWidth: 0.5
            },
            draggable: true,
            name: 'divider-shape'
          });
          group.addShape('text', {
            attrs: {
              text: `${cfg.subLabel}`,
              fill: fontColor,
              fontSize: 6,
              x: -6,
              y: 10,
            },
            draggable: true,
            name: 'sublabel-shape'
          });
          return keyShape;
        }
      });

// level1 node
      G6.registerNode('level1node', {
        draw: (cfg, group) => {
          const size = [60, 40]
          const keyShape = group.addShape('rect', {
            attrs: {
              width: size[0],
              height: size[1],
              x: -size[0] / 2,
              y: -size[1] / 2,
              fill: color,
              radius: 5
            },
            draggable: true,
            name: 'level1node-keyshape'
          });
          group.addShape('text', {
            attrs: {
              text: `${cfg.label}`,
              fill: fontColor,
              fontSize: 6,
              x: 0,
              y: -6,
              textAlign: 'center'
            },
            draggable: true,
            name: 'label-shape'
          });
          group.addShape('text', {
            attrs: {
              text: `${cfg.subLabel}`,
              fill: fontColor,
              fontSize: 8,
              x: 0,
              y: 6,
              fontWeight: 800,
              textAlign: 'center'
            },
            draggable: true,
            name: 'sublabel-shape'
          });
          group.addShape('rect', {
            attrs: {
              x: -12,
              y: 8,
              width: 25,
              height: 8,
              radius: 4,
              fill: cfg.increase ? trueincreaseColor : falseincreaseColor
            },
            draggable: true,
            name: 'ratio-box',
          })
          group.addShape('text', {
            attrs: {
              text: `${cfg.ratio}%`,
              fill: increaseFontColor,
              fontSize: 6,
              x: 0,
              y: 9,
              textAlign: 'center',
              textBaseline: 'top'
            },
            draggable: true,
            name: 'ratio-shape'
          });
          // edge end
          group.addShape('line', {
            attrs: {
              x1: -size[0] / 2,
              x2: -size[0] / 2 + 6,
              y1: 0,
              y2: 0,
              lineWidth: 1,
              stroke: lineColor,
            }
          });
          group.addShape('circle', {
            attrs: {
              r: 2,
              x: -size[0] / 2 + 6,
              y: 0,
              fill: circleColor,
            }
          })
          return keyShape;
        },
        update: undefined,
      }, 'rect')

// other node
      G6.registerNode('othernode', {
        draw: (cfg, group) => {
          const size = [100, 30];
          const keyShape = group.addShape('rect', {
            attrs: {
              width: size[0],
              height: size[1],
              x: -size[0] / 2,
              y: -size[1] / 2,
              fill: color,
              radius: 5
            },
            draggable: true,
            name: 'level1node-keyshape'
          });
          group.addShape('text', {
            attrs: {
              text: `${cfg.label}`,
              fill: fontColor,
              fontSize: 6,
              x: 10 - size[0] / 2,
              y: -2,
              textAlign: 'left'
            },
            draggable: true,
            name: 'label-shape'
          });
          group.addShape('text', {
            attrs: {
              text: `${cfg.subLabel}`,
              fill: fontColor,
              fontSize: 8,
              fontWeight: 800,
              x: 10 - size[0] / 2,
              y: 8,
              textAlign: 'left'
            },
            draggable: true,
            name: 'sublabel-shape'
          });
          group.addShape('rect', {
            attrs: {
              x: 12,
              y: -4,
              width: 25,
              height: 8,
              radius: 4,
              fill: cfg.increase ? trueincreaseColor : falseincreaseColor
            },
            draggable: true,
            name: 'ratio-box'
          })
          group.addShape('text', {
            attrs: {
              text: `${cfg.ratio}%`,
              fill: increaseFontColor,
              fontSize: 6,
              x: 18,
              y: -3,
              textAlign: 'left',
              textBaseline: 'top'
            },
            draggable: true,
            name: 'ratio-shape'
          });

          // edge end
          group.addShape('line', {
            attrs: {
              x1: -size[0] / 2,
              x2: -size[0] / 2 + 6,
              y1: 0,
              y2: 0,
              lineWidth: 1,
              stroke: lineColor,
            }
          });
          group.addShape('circle', {
            attrs: {
              r: 2,
              x: -size[0] / 2 + 6,
              y: 0,
              fill: circleColor,
            }
          })
          return keyShape;
        },
        update: undefined
      }, 'rect')

// edge
      G6.registerEdge('round-poly', {
        getControlPoints: (cfg) => {
          const {startPoint, endPoint} = cfg;
          return [
            startPoint,
            {
              x: startPoint.x,
              y: endPoint.y
            },
            endPoint
          ];
        }
      }, 'polyline')

      const data = {
        id: 'root',
        label: '利息收入',
        subLabel: '3,283.456',
        ratio: 3,
        children: [
          {
            id: 'child-a',
            label: '平均利息',
            subLabel: '9%',
            ratio: 1,
            increase: true,
            children: [
              {
                id: 'child-a-1',
                label: '平均利息1',
                subLabel: '9%',
                ratio: 1,
                increase: true,
                children: [
                  {
                    id: 'child-a-1-1',
                    label: '平均利息1-1',
                    subLabel: '9%',
                    ratio: 1,
                    increase: true,
                  },
                  {
                    id: 'child-a-1-2',
                    label: '平均利息1-2',
                    subLabel: '9%',
                    ratio: 1,
                    increase: true,
                  }]
              },
              {
                id: 'child-a-2',
                label: '平均利息2',
                subLabel: '9%',
                ratio: 1,
                increase: true,
              }]
          }, {
            id: 'child-b',
            label: '贷款余额',
            subLabel: '1,789,567',
            ratio: 23,
            increase: true,
            children: [{
              id: 'child-b-a',
              label: '投放金额',
              subLabel: '2,385,124',
              ratio: 17,
              increase: true,
              operator: '-',
            }, {
              id: 'child-b-b',
              label: '还款金额',
              subLabel: '595,557',
              ratio: 12,
              increase: true,
            }
            ]
          }, {
            id: 'child-c',
            label: '还款期限',
            subLabel: '7',
            ratio: 23,
            increase: true,
          }
        ]
      };

      G6.Util.traverseTree(data, subtree => {
        if (subtree.level === undefined) subtree.level = 0;
        // subtree.children?.forEach(child => child.level = subtree.level + 1);
        if (subtree.children && subtree.children.forEach) {
          subtree.children.forEach(child => {
            if (child) {
              child.level = subtree.level + 1;
            }
          });
        }

        switch (subtree.level) {
          case 0:
            subtree.type = 'root';
            break;
          case 1:
            subtree.type = 'level1node';
            break;
          default:
            subtree.type = 'othernode';
        }
      });

      const width = container.scrollWidth;
      const height = (container.scrollHeight || 500) - 30;
      const graph = new G6.TreeGraph({
        container: 'container',
        width,
        height,
        fitView: true,
        layout: {
          type: 'compactBox',
          direction: 'LR',
          getHGap: function getVGap() {
            return 5;
          },
        },
        defaultEdge: {
          type: 'round-poly',
          sourceAnchor: 0,
          targetAnchor: 1,
          style: {
            radius: 8,
            stroke: lineColor
          }
        },
        defaultNode: {
          anchorPoints: [
            [0.9, 0.5],
            [0, 0.5]
          ]
        },
        nodeStateStyles: {
          hover: {
            fill: '#fff',
            shadowBlur: 30,
            shadowColor: '#ddd',
          },
          operatorhover: {
            'operator-box': {
              opacity: 1
            }
          }
        },
        modes: {
          default: ['zoom-canvas', 'drag-canvas', 'collapse-expand']
        }
      });

      graph.on('node:mouseenter', e => {
        // if (e.target.get('name')?.includes('operator')) {
        if (e.target && e.target.get && e.target.get('name') && e.target.get('name').includes('operator')) {

          graph.setItemState(e.item, 'operatorhover', true);
        } else {
          graph.setItemState(e.item, 'hover', true);
        }
      })
      graph.on('node:mouseleave', e => {
        graph.setItemState(e.item, 'operatorhover', false);
        graph.setItemState(e.item, 'hover', false);
      });

      graph.data(data);
      graph.render();

    },
  },
};
</script>