一、先在页面绘制两个div,放置左侧模型栏与右侧画布 <template> </template> 二、js代码 1、引入X6 import {Graph, Shape, Addon, FunctionExt} from '@antv/x6'; const {Stencil} = Addon const {Rect} = Shape 2、初始化画布 this.graph = new Graph({}) //配置可参考官网 3、左侧模型...
中间就是我们操作的画板,上面是一些小工具,核心就是用到上面的 toJSON 可以将我们绘制的节点路径样式转为JSON,然后右边就是一些属性,当我们点击网格、点击节点、点击线在右侧都会有不同的属性,当然这些属性也都是自己加上的,还有很多属性都可以自定义加上,包括样式属性,节点的边框粗细、颜色,填充色,连接线的样式、...
9、动态节点流向动画 其余功能可在antv-x6文档自行添加 antv-x6流程图、DAG图、思维导图均可实现
一:实现流程图最重要得就是画布了,官网上都有文档可以轻松实现画布。下面放一下我用VUE写得画布代码。首先最重要得就是下载依赖了, x6在vue中下载得话需要下载两个依赖;npm install @antv/x6 --save npm vue.js 前端 javascript Graph 拖拽 转载 数码精灵abc 7月前 1538阅读 ...
(2)配置图属性并渲染 (3)自定义tooltip 5.插件 三、注意事项 总结 前言 设计师提供了一版样式较复杂的流程图,我搜了一些常用的vue-super-flow和vue-x6-flow等都只支持简单的样式。之前自己写过纯展示流程图不涉及太多交互,感觉还是找一个成熟的插件开发更适合,也方便其他同事参考,所以最后选择了用antv/G6自己...