antV G6流程图在Vue中的使用

张宪坤发布于2019-08-23 12:02 / 1909人阅读

原文首发于我的博客，欢迎点击查看获得更好的阅读体验~

更新内容

相关资源下载

antV G6( v1.2.8)

字体图标

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

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

技术栈

Vue v2.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 文档

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97870.html

antV G6流程图在Vue中的使用

原文首发于我的博客，欢迎点击查看获得更好的阅读体验~ 更新内容最新版本请关注G6官方的github仓库https://github.com/antvis/g6 2.x版本后,可以通过npm install直接安装使用了相关资源下载 antV G6( v1.2.8) 字体图标最近我司项目中需要加入流程图制作功能，于是乎百度各种找可视化绘制拓扑图的轮子，大部分都是国外的，看...

cnio 2019-08-02 16:06 评论0 收藏0
G6 2.0 开源发布 -- 裂变·聚变

摘要：从年月，立项至今，已经过去了年半的时间。期间获得过赞誉，也有吐槽，取得一定成就，也暴露过不少问题。这次，我们很高兴的告诉大家，今天除了开源，还会开放取得了阶段性成果的详见链接。与产品深度融合为了避免和成为工程师闭门造车的产物。 showImg(https://segmentfault.com/img/remote/1460000015199265?w=1500&h=756); G6 是...

ThinkSNS 2019-08-26 12:00 评论0 收藏0
G6文档

这个项目采用的是G6（阿里开源），由于现在已经没有维护了，导致很多的配置，参数，方法示例demo等都是自己摸索的，大概介绍下本案例中使用到的以及一些后续维护可能会用到的。 Editor 该类是整个编辑器的主控类，其主要职责是将编辑器的各个组件协同起来。 //实例化： import G6Editor from @antv/g6-editor const editor = new G6Editor()...

venmos 2019-08-26 14:05 评论0 收藏0
G6的插件系统

摘要：的插件系统做的相当完善可惜文档没有具体说到这里整理一下的插件插件大致分为四种类型行为可以理解为事件处理的插件就是和的样式同样是插件插件的布局之类这部分涉及的算法比较多插件就是自定义工具函数将其内置中这四种插件都有各自的写法以及但是文档中没有 G6的插件系统做的相当完善, 可惜文档没有具体说到. 这里整理一下g6的插件. 插件大致分为四种类型: behaviour 行为, 可以理解为事...

Ilikewhite 2019-08-23 13:43 评论0 收藏0
[BizCharts学习笔记] --- 数据可视化

摘要：所以笔者选择了，为什么会选择一是因为它是阿里出品，经历了一年左右的打磨已经完全适应在使用其次是它支持自由定制，不会像那样高度封装，所以在开发复杂图表的时候会更加得心应手。只是阿里图表库中的一员。实际上，在数据可视化这一块笔者并没有很多的开发经历和经验，不过正是因为这个问题笔者才决定学习一门数据可视化框架来弥补自己在这一方面的不足。在这个大数据统治的时代，数据能给我们提供前所未有的便捷...

CoffeX 2019-08-23 11:56 评论0 收藏0