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

你可能感兴趣的:(antV G6流程图在Vue中的使用)