ANTV/G6 绘制网络拓扑图

最近看其他项目绘制网络拓扑图用了vue-super-flow 绘制的不是太理想,所以自己研究了一下,尝试用antv/g6绘制了一下。
参看了官方api https://g6.antv.vision/zh/docs/api/Graph
以及官方推荐的第三方实现 github https://github.com/claudewowo/welabx-g6

使用了 vue-elementui-antv/g6 成果如下:
ANTV/G6 绘制网络拓扑图_第1张图片
节点详情右侧显示
ANTV/G6 绘制网络拓扑图_第2张图片
点击节点显示节点菜单
ANTV/G6 绘制网络拓扑图_第3张图片
展开节点 切换节点样式
ANTV/G6 绘制网络拓扑图_第4张图片

ctrl+拖拽 多选节点
ANTV/G6 绘制网络拓扑图_第5张图片
选择网格样式选择蓝色点阵
ANTV/G6 绘制网络拓扑图_第6张图片
选择机房添加一个combo
ANTV/G6 绘制网络拓扑图_第7张图片
鼠标移入节点显示锚点,从锚点上拖动进入另一个节点显示该节点锚点,停在该节点上完成,可完成边的绘制
ANTV/G6 绘制网络拓扑图_第8张图片

你可能感兴趣的:(vue.js)