antV G6流程图在Vue中的使用

最近我司项目中需要加入流程图制作功能，于是乎百度各种找可视化绘制拓扑图的轮子，大部分都是国外的，看文档太吃力，不过好在最终让我发现了AntV G6流程图图表库，最新版为2.0，不过编辑器在2.0版本还没有进行开源，所以只能退而求其次，使用了1.2.8版本。希望2.0版本的编辑器尽早开源，在交互方面1.2.8版本还是差了一些。

该组件并非开箱即食，需要根据自己的业务进行修改，右侧属性表单部分如果有时间考虑改为插槽形式，方便以后复用~

技术栈

• Vue v3.0.1
• Element-ui v2.4.5
• antV G6 v1.2.8
• Sass

效果图

引入

在index.html中进行了全局引用

实例代码

仿照2.0版本的编辑器将G6作为了一个组件使用，代码：

流图属性

参数	说明	类型	可选值	默认值
actionList	动作数据	Array	——	[]
funcList	功能数据	Array	——	[]
accountList	账号数据	Array	——	[]
workflowList	流图数据	Array	——	[]
nodeTypeList	节点类型数据	Array	——	[{id: 0, label: '普通节点'},{id: 1, label: '入口节点'},{id: 2, label: '出口节点'}]

所有属性接收的数据格式需要与 nodeTypeList的默认值相同

流图事件

事件名	说明	参数
saveData	当用户手动点击保存触发事件	source,type

参数 type可为空，在此项目中主要用来区分 新建与 编辑

流图方法

方法名	说明	参数
clearView	清空当前视图	——
source	渲染数据	nodes, edges, name, type

参数 type与事件中相同，参数 name的作用是用来取流图名

参考文档

使用 G6关系图类库 开发流程图工具

旧版本G6 1.x API 文档

新版本G6 2.x API 文档