基于G6的流程图绘制

最近项目中，有一个功能为流程图绘制，一开始是基于cavans进行绘制，但是由于绘制路线太多，计算点太多，额，然后费了好大劲，还是各种问题，最终放弃，选择基于g6重新进行了流程图绘制

• 安装： npm install --save @antv/g6
• 引用： import G6 from '@antv/g6'

简单demo

• 这是官方的基础demo，可以看到流程图绘制，主要是对节点与边进行配置，并读取配置进行图像绘制

data() {
   
     return {
   
        nodes: [{
   
                id: 'node1',
                shape: 'rect',  
                x: 100,
                y: 200
              },{
   
                id: 'node2',
                x: 300,
                y: 200
              }],
        edges: [{
   
                id: 'edge1',
                target: 'node2',
                source: 'node1'
              }]
     }
 }

    methods: {
   
      init() {
   
        let graph = new G6.Graph({
   
          container: "flowChart",
          width: 1000,
          height: 300,
          fitView: 'cc',   // 初始化视口区域
          modes: {
   
            default: ['drag-canvas', 'zoom-canvas']   // 模式集：当前模式 可拖拽 可缩放
          }
        });
        let data = {
   
          nodes: this.nodes,
          edges: this.edges
        }
        graph.read(data);  // 读取并渲染图数据。  
      }
    }

• 效果图如下：
  

自定义节点与边进行流程图绘制

• 下面是绘制流程图的初始化函数

import G6 from '@antv/g6';
export