echarts画工作流（流程图）

最新推荐文章于 2024-04-17 03:18:52 发布
置顶 最新推荐文章于 2024-04-17 03:18:52 发布
阅读量2.5w 收藏 21
点赞数 5
分类专栏： JS | Vue | React | 前端踩坑实战教程 文章标签： echarts 工作流 流程图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_29777207/article/details/101222330
版权
本文介绍了如何使用Echarts实现交互式的工作流程图。通过展示不同颜色（灰色、蓝色、黄色）代表的状态，并强调在实现过程中考虑通用性、可扩展性和可插拔性。文章提供核心配置代码、渲染代码以及节点点击事件处理方法，帮助读者理解并应用到实际项目中。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、流程图介绍

老规矩，先来一张效果图压压惊，流程来源于某宝，某鱼，某电商平台的货物流转流程，自己稍微修改了一下。仅供学习参考使用。

使用echarts等开源框架开发可以减少自己的开发时间，提高工作效率。

 一般流程图如果仅仅是作为静态页面，不需要考虑交互还是很容易画出来的，但是如果需要考虑到交互效果，那就需要自己在基于对开源框架集成使用中多加思考了，毕竟现在很多开源框架的基本思想都是组合优于继承，所以在使用中可以很灵活的融入自己的想法。

二、流程图实现

上面所展示的流程图中很明显的可以看到三种颜色。

灰色：代表不可用，点击无效。

蓝色：代表可用，但是当前并不处于这个节点

黄色：代表当前处于这个点，或者节点被点击

 在渲染流程图时要考虑通用和可扩展，可插拔，所以在渲

了解本专栏 订阅专栏 解锁全文
echarts 画流程图
张音乐的博客
08-01 2万+
先看效果图 标题 //渲染流程图 var drawForceChart = function(data){ console.log('开始执行流程图'); var forceOption = { tooltip: {}, animationDurationUpdate: 1500, animationEasingUpdat...
vue echarts流程图（流程线、流程节点），鼠标点击节点后关联echarts以外元素联动
weixin_44006009的博客
03-22 568
vue echarts流程图（流程线、流程节点），鼠标点击节点后关联echarts以外元素联动。
用echarts绘制流程图
liuli0927的博客
07-20 6512
当这两个流程图进行切换展示时，一定要使用v-show。
echarts 流程图
yangchuangxyz的博客
04-22 6509
先附图： 代码如下： let myCharts = echarts.init(document.getElementById("techCharts")); let charts = { nodes: [ // 节点 {name: '流程1',value: [0, 500]}, {name: '流程2',value: [150, 500]}, {name: '流程3',value: [300...
echars实现全流程图
weixin_51935690的博客
01-08 5944
流程图效果图如下 可自己添加节点，更改数据流等，数据流是动画的方式进行节点间流动 步骤如下： 1.vue引入echars 终端下载echarts npm install echarts@4.8.0 --save 2.在main.js中引入 import echarts from "echarts" Vue.prototype.$echarts = echarts; 3.在组件中代码如下(已标注) <template> <div class="server"> &lt
echarts+流程图
weixin_44727080的博客
08-22 4454
前言： echarts+流程图 效果图： 实现源码： var title = [ // 第零层 { label: '0', warn: 5, error: 8, value: 2 }, // 第一层 { label: '1-0', warn: 5, error: 8, value: 5 }, {...
echart流程图-工序及状态
yefeng1308的博客
09-17 2297
参考了一下资料，流程图可以实现当前在那个工序流程图，还需求展示当前状态（可以用色来标记），还有返工的流程在里面（默认是弧线）。图中返工的连接线的版本需要写一点位计算方法，这部分比较复杂。后面上传一个DEMO.
基于jQuery+ECharts制作自定义工作流程图代码.zip
11-21
**ECharts** 是百度公司开源的一款JavaScript数据可视化库，支持丰富的图表类型，包括柱状图、折线图、饼图、散点图等，同时也支持自定义的工作流图。ECharts的特点包括良好的性能、易用性和高度的可配置性。在这个...
使用activiti工作流引擎显示流程图时高亮显示流程图中已执行节点和已执行路径方法源代码
02-14
这通常通过将流程图导出为图片或者在前端使用绘图库（如 D3.js 或者 echarts）动态渲染来实现。 在提供的源代码中，应该包含了以上步骤的具体实现，包括如何获取历史数据、解析 BPMN 模型、设置高亮样式以及最终的...
使用echarts创建流程图
热门推荐
mermanangel的博客
05-26 1万+
使用echarts创建流程图使用echarts创建流程图 使用echarts创建流程图 为了建立流程图，需要使用echarts的关系图组件，即type类型为‘graph’。 首先创建一个div，为echarts准备一个具备大小的Dom <div id="main" style="width: 900px;height:1500px;padding-left: 250px;"></div> <script type="text/javascript"> // 基
工作流Activiti, echart，oa等框架，支持二次开发
05-30
办公oa，工作流，echart, 数据库安装，spring mvc框架，自动做成代码等，支持二次开发，快速上手和开发。
echarts绘制流程图
YLiu77的博客
11-02 4162
先上效果图： js代码： // 图标坐标，预先调好每个点的坐标 var nodes = [{ x: 100, y: 950, nodeName: '', svgPath: './Images/tank.png', symbolSize: 80, position: 'inside' }, { x: 300, y: 950, nodeName: '', svgPath: './Images/tank.png',
记录echarts绘制流程图，及自定义样式
weixin_45952434的博客
03-03 1742
echarts绘制流程图及自定义样式
ECharts关系图、流程图、导向图(详细示例——满满的注释)
2401_84141337的博客
04-17 2182
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
Echarts实现流程图关系图拓扑图
请叫我欧皇！的博客
06-21 3491
实现如下，可以横着排竖着排都可以。
【echarts】用地图模块做动态流程图2.0（根据后台数据自动均匀排布，且实时更新节点状态）
arminc的博客
08-09 6929
1.效果 2.说明 这个升级版几乎就是我们公司用的这个功能了，设计到的功能就是可以根据后台数据重新进行位置排布，且实时刷新节点的数据。用ec写出这个效果不难，参考demo1 这个主要是设计到如何根据数据进行重新排布，实时刷数据，这些都是ec插件没有的，需要我们去苦逼手写的。 3.代码： 3.1要知道的： 其实在敲代码前，就应该意识到和后台要的数据是什么样的，要知道我们是用地图模块实现...
jsdroid 获取节点_建筑施工细部节点工艺培训讲义
weixin_39663593的博客
10-30 170
今日分享专篇建筑施工细部节点工艺培训讲义包含图纸 计算书仅供参考Word、PPT格式下载链接获取方式见文末内容截图52.51.混凝土修补方案50.一套完整的工程量计算例子(可下载包括计算书和图纸)49.精装修工艺工法培训48.万达质量防治手册47.17套施工计算讲义，详情见截图(可下载)46.图解钢结构(可下载)45.万科住宅空间功能—— 新版标准44.地下工程施工管理要点43.复...
用Echart的Graph实现双向流程图
caoyan0829的博客
04-27 1523
效果图： Echart代码： initChart(item) { this.chart = echarts.init(document.getElementsByClassName("popupQualified")[0]); this.chart.setOption({ yAxis: [ { type: "category", boundaryGap: false, ..
系统流程图 echarts
最新发布
01-14
### 使用 ECharts 绘制系统流程图 为了使用 ECharts 创建系统流程图，可以利用其内置的支持图形和关系展示的功能。虽然 ECharts 更常用于创建统计图表如柱状图、饼图等，但对于复杂的关系网络或流程图，也可以通过 `graph` 和 `sankey` 类型来实现。 #### 准备工作 确保已经引入了 ECharts 库并初始化了一个合适的 DOM 容器[^2]： ```html <div id="flowChart" style="width: 600px;height:400px;"></div> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> ``` 接着初始化 ECharts 实例对象[^1]: ```javascript let flowChart = echarts.init(document.getElementById('flowChart')); ``` #### 配置项设置 对于简单的流程图，可以选择使用 `graph` 图表类型；而对于更复杂的具有流向特性的流程，则推荐采用 `sankey` 图表类型。这里给出一个基于 `graph` 的简单例子配置: ```javascript option = { title: { text: '简易系统流程图' }, tooltip: {}, animationDurationUpdate: 1500, series : [ { type: 'graph', layout: 'force', // 力导向布局 symbolSize: 50, roam: true, label: { show: true }, edgeLabel: { fontSize: 8 }, force: { repulsion: 1000 }, data: [ {name: "节点A", value: 10}, {name: "节点B", value: 20}, {name: "节点C", value: 30} ], links: [ {source: "节点A", target: "节点B"}, {source: "节点B", target: "节点C"} ] } ] }; ``` 最后应用这些选项到实例上完成渲染: ```javascript flowChart.setOption(option); ``` 此段代码定义了一组相互关联的数据点作为流程中的各个阶段，并指定了它们之间的连接方式形成一条清晰可见的工作流路径[^3]。
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

张音乐

请我喝杯咖啡吧

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值