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

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

  • lwstudy/antv-x6-vue-demo: Vue实现Antv X6中的示例,以及一些开发场景 (github.com)
  • learn-antv-x6: antv/X6学习 (gitee.com)

介绍

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

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

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

ER图—er图增加布局等

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

ERV2图—x6-V2.x

  • 增加tooltip
    Vue实现Antv/X6中的示例,以及一些er图开发场景_第3张图片

  • 增加右键菜单
    Vue实现Antv/X6中的示例,以及一些er图开发场景_第4张图片

  • 全屏处理
    Vue实现Antv/X6中的示例,以及一些er图开发场景_第5张图片

  • 一对多自定义连线
    Vue实现Antv/X6中的示例,以及一些er图开发场景_第6张图片

  • 画布移动与节点选择切换

  • 大数据量demo测试(配合可视化区域内节点可以在3000个节点时依然能够操作)

  • 仅加载可视化区域内的节点

  • 对应dberv2中的register.js中有箭头适配的实现法

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

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

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

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

UML图

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

思维导图

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

自定义流程图(vue-shape)

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

自定义散点图(vue-shape)

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

散点关系图谱(vue-shape)

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

circle关系图谱(内置shape)

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

你可能感兴趣的:(大前端,Vue,js,前端,javascript,vue)