vue使用g6做流程圖

一、安裝使用

下載安裝：

npm install @antv/g6 --save

導入使用：

import G6 from '@antv/g6';

二、初始化畫布

1. 建立一個div

<div id="mountNode" style="margin-top: 20px;"></div>

 2. js生成畫布

渲染數據格式“：

// 數據結構分為節點數組nodes和邊對應關系數組edges
const data = {
  // 節點數組
  nodes: [
    {
      id: 'node1',
      x: 100,
      y: 200,
    },
    {
      id: 'node2',
      x: 300,
      y: 200,
    },
  ],
  // 邊對應關系數組
  edges: [
    // 從 node1 節點連接到 node2 節點的邊線
    {
      source: 'node1',
      target: 'node2',
    },
  ],
};

實例化畫布：

 methods: {
      initG6() {
        const nodes = this.data.nodes
        // 創建 G6 圖實例
        this.graph = new G6.Graph({
          container: 'mountNode',  // 畫布容器id
          width: 1200,  // 畫布寬度
          height: 3200,    // 畫布高度
          modes: {
            default: ['drag-canvas','click-select']
          },
          layout: {
            type: 'dagre',
            rankdir: 'LR',
            align: 'UL',
            nodesep:15,
            controlPoints: true,
          },
        //默認節點樣式設置
          defaultNode: {  
              size: [100, 30],
              type: 'rect',
              color:"#ffffff",
              style: {
                lineWidth: 2,
                stroke: '#5B8FF9',
                fill: '#C6E5FF',
                radius:5
              },
              labelCfg: {
                style: {
                  fontSize: 12,
                },
              },
          },
           // 默認的邊樣式設置
          defaultEdge: { 
            type: 'polyline',
            size: 1,
            color: '#c8c8c8',
            style: {
              endArrow: {
                path: 'M 0,0 L 8,4 L 8,-4 Z',
                fill: '#c8c8c8',
              },
              radius: 5,
            },
          },
        })
        this.graph.data(this.data)  // 讀取數據
        this.graph.render()  // 渲染數據
        this.graph.on('click', (ev)=>{  // 監聽節點點擊事件
          this.evt = ev.item
          const shape = ev.target;
          if(ev.item){
            const item = ev.item;
            const type = item.getType();
            // console.log('點擊節點shape,item,type',shape,item,type)
            this.selectedItem = ev.item._cfg.model
            console.log('treecomplex click 當前節點信息',this.selectedItem)
          }65         });
        if (typeof window !== 'undefined')
          window.onresize = () => {
            if (!this.graph || this.graph.get('destroyed')) return;
            if (!mountNode || !mountNode.scrollWidth || !mountNode.scrollHeight) return;
            this.graph.changeSize(mountNode.scrollWidth, mountNode.scrollHeight);
          };
      },
}

 三、G6官方文檔

文檔鏈接：https://g6.antv.vision/zh/docs/manual/introduction