G6实现纵向流程图

效果图：

html：

<div id="tree_container" />

js：

initTree() {
      // 数据
      const data = {
        id: 'root',
        label: 'root',
        children: [
          {
            id: 'c1',
            label: 'c1',
            children: [
              {
                id: 'c1-1',
                label: 'c1-1'
              },
              {
                id: 'c1-2',
                label: 'c1-2',
                children: [
                  {
                    id: 'c1-2-1',
                    label: 'c1-2-1'
                  },
                  {
                    id: 'c1-2-2',
                    label: 'c1-2-2'
                  }
                ]
              }
            ]
          },
          {
            id: 'c2',
            label: 'c2'
          },
          {
            id: 'c3',
            label: 'c3',
            children: [
              {
                id: 'c3-1',
                label: 'c3-1'
              },
              {
                id: 'c3-2',
                label: 'c3-2',
                children: [
                  {
                    id: 'c3-2-1',
                    label: 'c3-2-1'
                  },
                  {
                    id: 'c3-2-2',
                    label: 'c3-2-2'
                  },
                  {
                    id: 'c3-2-3',
                    label: 'c3-2-3'
                  }
                ]
              },
              {
                id: 'c3-3',
                label: 'c3-3'
              }
            ]
          }
        ]
      }
      // 文本
      G6.registerNode(
        'icon-node',
        {
          options: {
            size: [60, 20],
            stroke: '#91d5ff',
            fill: '#91d5ff'
          },
          draw(cfg, group) {
            const styles = this.getShapeStyle(cfg)
            const { labelCfg = {}} = cfg

            // const w = styles.width
            const h = styles.height

            const keyShape = group.addShape('rect', {
              attrs: {
                ...styles,
                y: -h / 2
              }
            })

            if (cfg.label) { // 展示的文本
              group.addShape('text', {
                attrs: {
                  ...labelCfg.style,
                  text: cfg.label,
                  textAlign: 'center',
                  y: 25 - h / 2
                }
              })
            }

            return keyShape
          },
          update: undefined
        },
        'rect'
      )

      // 线
      G6.registerEdge('flow-line', {
        draw(cfg, group) {
          const startPoint = cfg.startPoint
          const endPoint = cfg.endPoint

          const { style } = cfg
          const shape = group.addShape('path', {
            attrs: {
              stroke: style.stroke,
              endArrow: style.endArrow,
              path: [
                ['M', startPoint.x, startPoint.y],
                ['L', startPoint.x, (startPoint.y + endPoint.y) / 2],
                ['L', endPoint.x, (startPoint.y + endPoint.y) / 2],
                ['L', endPoint.x, endPoint.y]
              ]
            }
          })

          return shape
        }
      })

      const defaultNodeStyle = {
        fill: '#fff',
        stroke: '#DDE2EE'
      }

      const defaultEdgeStyle = {
        stroke: '#DDE2EE',
        endArrow: {
          path: 'M 0,0 L 12, 6 L 9,0 L 12, -6 Z',
          fill: '#DDE2EE',
          d: -20
        }
      }

      const defaultLabelCfg = {
        style: {
          fill: '#3C4353',
          fontSize: 8
        }
      }

      const defaultLayout = {
        type: 'compactBox',
        direction: 'TB',
        getId: function getId(d) {
          return d.id
        },
        getHeight: function getHeight() {
          return 16
        },
        getWidth: function getWidth() {
          return 16
        },
        getVGap: function getVGap() {
          return 40
        },
        getHGap: function getHGap() {
          return 70
        }
      }

      const container = document.getElementById('tree_container')
      const width = container.scrollWidth
      const height = container.scrollHeight || 500

      const graph = new G6.TreeGraph({
        container: container,
        width,
        height,
        linkCenter: true,
        modes: {
          default: ['drag-canvas', 'zoom-canvas']
        },
        defaultNode: {
          type: 'icon-node',
          size: [120, 40],
          style: defaultNodeStyle,
          labelCfg: defaultLabelCfg
        },
        defaultEdge: {
          type: 'flow-line',
          style: defaultEdgeStyle
        },
        layout: defaultLayout
      })

      graph.data(data)
      graph.render()
      graph.fitView()

      if (typeof window !== 'undefined') {
        window.onresize = () => {
          if (!graph || graph.get('destroyed')) return
          if (!container || !container.scrollWidth || !container.scrollHeight) return
          graph.changeSize(container.scrollWidth, container.scrollHeight)
        }
      }
    }
 

标签：G6,const,流程图,纵向,label,c3,container,c1,id
来源： https://www.cnblogs.com/angia/p/16254444.html