Vue+Vite+Antv X6实现的流程图功能

最新推荐文章于 2024-05-22 17:13:16 发布
最新推荐文章于 2024-05-22 17:13:16 发布
阅读量1.6k 收藏 10
点赞数 1
分类专栏： Vue 文章标签： vue.js 流程图 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yanyihan16/article/details/125642514
版权

Vue+Vite+Antv X6

参考内容

antv x6的图表示例——业务场景——流程图 （https://antv-x6.gitee.io/zh/examples/showcase/practices#flowchart）
独梦寒风的X6FlowChart（https://blog.csdn.net/qq_32396313/article/details/122126074）

实现的功能

左侧工具栏：

使用graph的registerNode和registerHTMLComponent注册各种流程块
在这里插入图片描述

中间画布：

  • 点击节点和连接线后右键可以进行编辑或删除操作

在这里插入图片描述

  • 点击画布右键可以进行数据导出和数据清空
    在这里插入图片描述

右侧工具栏

节点和线的编辑

最低0.47元/天 解锁文章
yanyihan16
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
antV x6 开发流程图实例
u014650004的博客
01-12 7353
antV x6 流程图案例
antvx6 流程设计器+ vite + vue3
12-26
antvx6 流程设计器+ vite + vue3
基于Vue3+ts+AntV X6实现的流程图编辑器
10-17
基于Vue3+ts+element-plus+AntV X6实现的流程图编辑器，框架核心功能已经搭好，组态化呈现，自定义节点、属性绑定、样式调整等，采用pinia统一管理各个属性，根据自己需求在此基础上自定义调整修改添加等，最终可导出json数据加以回显
基于vue3简单使用antv/x6 2.x.x的学习笔记
最新发布
qq_37822457的博客
05-22 641
X6 是基于 HTML 和 SVG 的图编辑引擎，提供低成本的定制能力和开箱即用的内置扩展，方便我们快速搭建 DAG 图、ER 图、流程图、血缘图等应用。1、定义渲染流程图的容器。2、在script引入。
Vue使用AntV X6绘制流程图（组态呈现）
热门推荐
m0_51431448的博客
10-16 2万+
先说下我项目中的需求，就是要自己绘制出一个我们想要的图，组态化呈现出来，然后这个图中会有很多节点，每个节点都会有自己的状态，状态会实时改变，状态变化的时候，对应的节点标签颜色等都要跟随变化。 那么我们该用什么绘制呢，绘制出来还要符合我们的业务需求，说白了就是要很灵活，想改什么，想用什么节点（自定义图片等），想绑定什么属性等等，我们都可以很灵活的实现。所以就基于AntV X6 来实现这么个事儿。
antv/x6 2.x 搭建流程图编辑页面（1）
bighead的博客
02-02 2621
【代码】antv/x6 2.x 搭建流程图编辑页面（1）
「AntV」X6图编辑器的应用——流程图实现
这魏先森-forguo
02-02 1万+
「AntV」X6图编辑器的应用——流程图实现
vue3+vite+ts+antv/x6搭建的流程图编辑页面
03-26
提供了复制、剪切、粘贴、撤销、恢复、删除、清空等常用功能，使我们可以轻松地对流程图进行编辑和调整。此外，还支持组合和取消组合节点，方便用户对流程图进行整体管理。 为了适应不同项目的需求，还提供了适配...
基于Vue2+element-ui+AntV X6实现的流程图编辑器
11-02
基于Vue2+element-ui+AntV X6实现的流程图编辑器，框架核心功能已经搭好，组态化呈现，自定义节点、属性绑定、样式调整等，采用Vuex统一管理各个属性，根据自己需求在此基础上自定义调整修改添加等，最终可导出json...
vue3+antv x6+tsx 制作自定义流程图
09-23
总而言之，"vue3+antv x6+tsx 制作自定义流程图"项目结合了现代前端技术，旨在创建一个高效、灵活的流程图编辑平台。Vue3提供了优秀的组件化开发体验，AntV X6则带来了强大的图形绘制能力，而TSX则保证了代码的类型...
antv-流程图，一个简易的基于antv x6实现的流程图绘制
12-15
antv-流程图，一个简易的基于antv x6实现的流程图绘制
会用这些的api，轻松绘制流程图（antv/g6流程图入门）
qq_35094120的博客
01-30 4724
g6的api使用常用graph属性和方法graph属性graph方法getPointByClient(clientX, clientY)getZoom()zoomTo(toRatio, center)get(key)find(type, fn)removeItem(item, stack)update(node/edge,nodeModel/edgeModel)updateItem(item, model, stack)destroy()setAutoPaint(auto)paint()setItemSta
使用 AntV X6 + vue 实现单线流程图
Big_YiFeng的博客
08-01 5147
X6 是 AntV 旗下的图编辑引擎，提供了一系列开箱即用的交互组件和简单易用的节点定制能力，方便我们快速搭建 DAG 图、ER 图、流程图等应用。
vue项目中使用antvX6新手教程，附demo案例讲解（可拖拽流程图、网络拓扑图）
wzy_PROTEIN的博客
02-28 8056
用户可以自己拖拽节点，节点之间可以随意连线，保存拓扑图数据后传给后端，然后在另一个页面拿到之前的数据进行渲染展示。
antv-X6-Vue3总结03-Vue节点配置
eadela的博客
11-26 5535
channelReferral.vue 节点组件 <template> <!-- 多波次 --> <div class="node-box"> <Icon type="cancel-questionnaire" class="icon" /> <p> 渠道转介 </p> <div class="child"> <Button type="text" @click="edi
G6框架Dagre流程图第三个自左向右的 Dagre 上对齐改造，对齐结点和边添加样式，并添加修改节点和展示结点详细信息交互
XIAOYAN_v587的博客
08-22 1889
G6框架Dagre流程图第三个自左向右的 Dagre 上对齐改造，对齐结点和边添加样式，并添加修改节点和展示结点详细信息交互
使用antv/X6实现流程图（包括线条动画流动，路径标签，悬浮窗口等）快速搭建流程图，DAG图等初始实践记录
Gatekeeper的博客
05-24 2万+
文章目录开始使用Step 1 创建容器Step 2 准备数据Step 3 渲染画布取消节点的移动使用不同图形渲染节点画布居中和缩放修改边样式给虚线增加流动效果修改节点和边的属性鼠标悬浮高亮显示完整代码如下： 最近需要将深度学习网络结构图以比较直观的形式在前端显示出来，对于数据的传输，计划使用数据路径流动的形式来做，因为我也没怎么学过前端变成，对于自己写js和css代码，感觉之后会出不少问题，前端显示的美观度，自适应窗口大小，组件位置的自适应等都是问题，搜了搜相关的教程推荐，发现阿里开发的antv/X6插件用
javascript自定义右键菜单并屏蔽默认右键菜单【原创】
前端小记
08-13 4823
原理很简单，就是右击鼠标（oncontextmenu事件）return false阻止默认右键菜单，之后显示自定义的右键菜单，菜单显示位置由事件源的clientX和clientY计算得出。 拖拽+自定义右键菜单 body{ margin:0; padding:0} #ul1{ width:130px; height:120px;
vue3+vite+@antv/f2
03-01
Vue 3是一种流行的JavaScript框架，用于构用户界面。它具有响应式数据绑定、组件化开发和虚拟DOM等特性，使得开发者可以更高效地构建交互式的Web应用程序。 Vite是一个基于ES模块的构建工具，专为现代化的前端开发而设计。它具有快速的冷启动、按需编译和热模块替换等特性，使得开发者可以更快地构建和调试应用程序。 @antv/f2是一个基于Canvas的移动端可视化库，用于绘制各种图表和图形。它提供了丰富的图表类型和交互功能，可以轻松地创建漂亮而功能丰富的移动端可视化应用。 结合Vue 3、Vite和@antv/f2，你可以使用Vue 3的响应式数据绑定和组件化开发能力来构建交互式的Web应用程序，并使用Vite进行快速的开发和调试。同时，你可以使用@antv/f2来绘制各种图表和图形，实现移动端的可视化效果。 如果你想了解更多关于Vue 3、Vite和@antv/f2的信息，可以参考官方文档或者相关教程。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值