原文首发于我的博客,欢迎点击查看获得更好的阅读体验~更新内容
最新版本
请关注G6官方的github仓库https://github.com/antvis/g6
2.x版本后,可以通过npm install直接安装使用了
相关资源下载
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作为了一个组件使用,代码:
流图属性{{infoTitle}}属性网格对齐
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
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
原文首发于我的博客,欢迎点击查看获得更好的阅读体验~ 更新内容 最新版本 请关注G6官方的github仓库https://github.com/antvis/g6 2.x版本后,可以通过npm install直接安装使用了 相关资源下载 antV G6( v1.2.8) 字体图标 最近我司项目中需要加入流程图制作功能,于是乎百度各种找可视化绘制拓扑图的轮子,大部分都是国外的,看...
摘要:从年月,立项至今,已经过去了年半的时间。期间获得过赞誉,也有吐槽,取得一定成就,也暴露过不少问题。这次,我们很高兴的告诉大家,今天除了开源,还会开放取得了阶段性成果的详见链接。与产品深度融合为了避免和成为工程师闭门造车的产物。 showImg(https://segmentfault.com/img/remote/1460000015199265?w=1500&h=756); G6 是...
摘要:的插件系统做的相当完善可惜文档没有具体说到这里整理一下的插件插件大致分为四种类型行为可以理解为事件处理的插件就是和的样式同样是插件插件的布局之类这部分涉及的算法比较多插件就是自定义工具函数将其内置中这四种插件都有各自的写法以及但是文档中没有 G6的插件系统做的相当完善, 可惜文档没有具体说到. 这里整理一下g6的插件. 插件大致分为四种类型: behaviour 行为, 可以理解为事...
摘要:所以笔者选择了,为什么会选择一是因为它是阿里出品,经历了一年左右的打磨已经完全适应在使用其次是它支持自由定制,不会像那样高度封装,所以在开发复杂图表的时候会更加得心应手。只是阿里图表库中的一员。 实际上,在数据可视化这一块笔者并没有很多的开发经历和经验,不过正是因为这个问题笔者才决定学习一门数据可视化框架来弥补自己在这一方面的不足。在这个大数据统治的时代,数据能给我们提供前所未有的便捷...
阅读 1445·2021-10-14 09:43
阅读 1393·2021-10-09 09:58
阅读 1902·2021-09-28 09:42
阅读 3688·2021-09-26 09:55
阅读 1722·2021-08-27 16:23
阅读 2666·2021-08-23 09:46
阅读 882·2019-08-30 15:55
阅读 1320·2019-08-30 15:54