antv g6 禁止移动_antV G6流程图在Vue中的使用

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

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

如何将数据进行数据可视化展现?

技术栈

Vue v3.0.1

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的作用是用来取流图名

参考文档

你可能感兴趣的:(antv,g6,禁止移动)