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
           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