Vue实现Antv/X6中的示例,以及一些er图开发场景

1,157 阅读1分钟

通过Vue实现Antv X6中的示例,以及一些开发场景,代码已经丢到仓库里了。

介绍

使用脚手架(自动生成接口、路由)实现一些x6在vue2中的实例写法 已实现ER、 BPMN、 UML、 思维导图、 自定义功能

ER图---完善为db数据库图表

dber.jpg

ER图---er图增加布局等

laydber.jpg

ERV2图---x6-V2.x

  • 增加tooltip dber-v2(tooltip).jpg
  • 增加右键菜单 dber-v2(rightmenu).jpg
  • 全屏处理

dber-v2(full).jpg

  • 一对多自定义连线 dber-v2(1...n).jpg
  • 画布移动与节点选择切换
  • 大数据量demo测试(配合可视化区域内节点可以在3000个节点时依然能够操作)
  • 仅加载可视化区域内的节点
  • 对应dberv2中的register.js中有箭头适配的实现法

BPMN图---实现当前节点和通过节点的高亮,以及驳回边的智能处理

bpmn.png

拖拽绘制BPMN图(Stencil基于dnd拖拽封装的插件实现UI组件)

bpmn.png

UML图

uml.jpg

思维导图

swdt.jpg

自定义流程图(vue-shape)

home.jpg

自定义散点图(vue-shape)

points.jpg

散点关系图谱(vue-shape)

tech.jpg

circle关系图谱(内置shape)

circle.jpg