使用 AntV X6 + vue 实现单线流程图

使用 AntV X6 + vue 实现单线流程图

X6 是 AntV 旗下的图编辑引擎,提供了一系列开箱即用的交互组件和简单易用的节点定制能力,方便我们快速搭建 DAG 图、ER 图、流程图等应用。

使用 AntV X6 + vue 实现单线流程图_第1张图片

官方文档

安装

yarn add  @antv/[email protected]

Tips: 目前 X6 有 1.x 和 2.x 两个版本,因为官方文档的示例代码都是 1.x 版本的,所以本文档也是基于 1.x 版本的,如果你使用的是 2.x 版本,可以参考官方文档。

常用 API

API 说明 使用方法
Graph 图实例 const graph=new Graph()
graph.zoomTo 缩放图形 graph.zoomTo(0.8)
graph.centerContent 图形居中 graph.centerContent()
graph.getCell 获取节点 graph.getCell(node.id)
graph.addCell 新增节点 graph.addCell([node1,edge1,node2,node3])
graph.removeCells 删除节点 graph.removeCells(cell)
graph.createEdge 创建连接线 graph.createEdge(node1,node2)
graph.removeEdge 删除连接线 graph.removeEdge(edge.id)
graph.getNodes 获取所有节点 graph.getNodes()
graph.getEdges 获取所有连接线 graph.getEdges()
Graph.registerNod 自定义元素样式 可查看文档

demo 代码(以下为 vue 实现单线流程图示例)

实现效果

使用 AntV X6 + vue 实现单线流程图_第2张图片

vue 代码

Tips: 示例代码需安装 dagre 和 insert-css 依赖






你可能感兴趣的:(vue.js,流程图,前端)