echarts+流程图

最新推荐文章于 2025-07-12 15:41:42 发布
最新推荐文章于 2025-07-12 15:41:42 发布
阅读量4.5k 收藏 17
点赞数 7
CC 4.0 BY-SA版权
分类专栏： echarts 文章标签： 流程图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44727080/article/details/108169327

前言：

         echarts+流程图

效果图：

实现源码：

var title = [
    // 第零层
    {
        label: '0',
        warn: 5,
        error: 8,
        value: 2
    },
    // 第一层
    {
        label: '1-0',
        warn: 5,
        error: 8,
        value: 5
    },
    {
        label: '1-1',
        warn: 5,
        error: 8,
        value: 7
    },
    {
        label: '1-2',
        warn: 5,
        error: 8,
        value: 7
    },
    {
        label: '1-3',
        warn: 5,
        error: 8,
        value: 7
    },
    // 第二层
    {
        label: '2-0',
        warn: 5,
        error: 8,
        value: 2
    },
    {
        label: '2-1',
        warn: 5,
        error: 8,
        value: 2
    },
    {
        label: '2-2',
        warn: 5,
        error: 8,
        value: 2
    },
    {
        label: '2-3',
        warn: 5,
        error: 8,
        value: 2
    },
    {
        label: '2-4',
        warn: 5,
        error: 8,
        value: 2
    },
    // 第三层
    {
        label: '3-0',
        warn: 5,
        error: 8,
        value: 2
    },
    {
        label: '3-1',
        warn: 5,
        error: 8,
        value: 2
    },
    {
        label: '3-2',
        warn: 5,
        error: 8,
        value: 2
    },
];
var colorMap = {
    normal: '#18a849',
    warn: '#FFC125',
    error: '#FF0000',
};

colorFunction = function(obj) {
    if (obj.value < obj.warn) {
        return colorMap.normal;
    } else if (obj.warn <= obj.value && obj.value < obj.error) {
        return colorMap.warn;
    } else if (obj.error <= obj.value) {
        return colorMap.error;
    }
};
//具体的绘制流程图的方法
option = {
    tooltip: {
        trigger: 'item',
        formatter: function(para) {
            if (para.name != 'x' || para.name != 'y') {
                return para.name;
            } else {
                //其他的都正式显示，自己是什么就显示什么。
                return '';
            }
        }
    },
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    textStyle: {
        color: '#000'
    },
    series: [{
        type: 'graph',
        tooltip: {
            backgroundColor: 'skyblue',
            //formatter: "{b} <br/>{a} : {c} h "
        },
        layout: 'none',
        symbolSize: 10,
        roam: false,
        label: {
            normal: {
                show: true,
                position: 'inside',
                //offset: [0,-60],//居上 20
                textStyle: {
                    fontSize: 12,
                    color: '#fff',
                    fontWeight: 'BOLD',
                },
            }
        },
        edgeSymbol: ['circle', 'arrow'],
        edgeSymbolSize: [4, 10],
        edgeLabel: {
            normal: {
                textStyle: {
                    fontSize: 18
                }
            }
        },
        //注意，所有节点的位置都是根据自己设置的x, y坐标来设置的
        data: [
            // 零层
            {
                name: title[0].label,
                x: 300,
                y: 0,
                value: title[0],
                symbolSize: 50,
                itemStyle: {
                    normal: {
                        color: colorFunction(title[0]),
                    }
                }
            },
            // 一层
            {
                name: title[1].label,
                x: 0,
                y: 200,
                value: title[1],
                symbolSize: 50,
                itemStyle: {
                    normal: {
                        color: colorFunction(title[1]),
                    }
                }
            },
            {
                name: title[2].label,
                x: 150,
                y: 200,
                value: title[2],
                symbolSize: 50,
                itemStyle: {
                    normal: {
                        color: colorFunction(title[2]),
                    }
                }
            },
            {
                name: title[3].label,
                x: 350,
                y: 200,
                value: title[3],
                symbolSize: 50,
                itemStyle: {
                    normal: {
                        color: colorFunction(title[3]),
                    }
                }
            },
            {
                name: title[4].label,
                x: 600,
                y: 200,
                value: title[4],
                symbolSize: 50,
                itemStyle: {
                    normal: {
                        color: colorFunction(title[4]),
                    }
                }
            },
            // 二层
            {
                name: title[5].label,
                x: 0,
                y: 400,
                value: title[5],
                symbolSize: 50,
                itemStyle: {
                    normal: {
                        color: colorFunction(title[5]),
                    }
                }
            },
            {
                name: title[6].label,
                x: 150,
                y: 400,
                value: title[6],
                symbolSize: 50,
                itemStyle: {
                    normal: {
                        color: colorFunction(title[6]),
                    }
                }
            },
            {
                name: title[7].label,
                x: 300,
                y: 400,
                value: title[7],
                symbolSize: 50,
                itemStyle: {
                    normal: {
                        color: colorFunction(title[7]),
                    }
                }
            },
            {
                name: title[8].label,
                x: 450,
                y: 400,
                value: title[8],
                symbolSize: 50,
                itemStyle: {
                    normal: {
                        color: colorFunction(title[8]),
                    }
                }
            },
            {
                name: title[9].label,
                x: 600,
                y: 400,
                value: title[9],
                symbolSize: 50,
                itemStyle: {
                    normal: {
                        color: colorFunction(title[9]),
                    }
                }
            },
            // 三层
            {
                name: title[10].label,
                x: 0,
                y: 600,
                value: title[10],
                symbolSize: 50,
                itemStyle: {
                    normal: {
                        color: colorFunction(title[10]),
                    }
                }
            },
            {
                name: title[11].label,
                x: 150,
                y: 600,
                value: title[11],
                symbolSize: 50,
                itemStyle: {
                    normal: {
                        color: colorFunction(title[11]),
                    }
                }
            },
            {
                name: title[12].label,
                x: 450,
                y: 600,
                value: title[12],
                symbolSize: 50,
                itemStyle: {
                    normal: {
                        color: colorFunction(title[12]),
                    }
                }
            },

            // 一层
            {
                name: '1',
                x: 300,
                y: 100,
                symbolSize: 0,
            },
            {
                name: '2',
                x: 150,
                y: 100,
                symbolSize: 0,
            },
            {
                name: '3',
                x: 0,
                y: 100,
                symbolSize: 0,
            },
            {
                name: '4',
                x: 350,
                y: 100,
                symbolSize: 0,
            },
            {
                name: '5',
                x: 600,
                y: 100,
                symbolSize: 0,
            },
            // 二层
            {
                name: '21',
                x: 0,
                y: 300,
                symbolSize: 0,
            },
            {
                name: '22',
                x: 150,
                y: 300,
                symbolSize: 0,
            },
            {
                name: '23',
                x: 300,
                y: 300,
                symbolSize: 0,
            },
            {
                name: '24',
                x: 350,
                y: 300,
                symbolSize: 0,
            },
            {
                name: '25',
                x: 450,
                y: 300,
                symbolSize: 0,
            },
            {
                name: '26',
                x: 600,
                y: 300,
                symbolSize: 0,
            },
            // 三层
            {
                name: '31',
                x: 0,
                y: 500,
                symbolSize: 0,
            },
            {
                name: '32',
                x: 150,
                y: 500,
                symbolSize: 0,
            },
            {
                name: '33',
                x: 300,
                y: 500,
                symbolSize: 0,
            },
            {
                name: '34',
                x: 450,
                y: 500,
                symbolSize: 0,
            },
        ],
        // links: [],
        //这是点与点之间的连接关系
        links: [
            // 零层
            {
                source: title[0].label,
                target: '1',
            },
            // 一层
            {
                source: '3',
                target: title[1].label,
            },
            {
                source: '2',
                target: title[2].label,
            },
            {
                source: '4',
                target: title[3].label,
            },
            {
                source: '5',
                target: title[4].label,
            },
            // 二层
            {
                source: title[3].label,
                target: '24',
            },
            {
                source: '21',
                target: title[5].label,
            },
            {
                source: '22',
                target: title[6].label,
            },
            {
                source: '23',
                target: title[7].label,
            },
            {
                source: '25',
                target: title[8].label,
            },
            {
                source: '26',
                target: title[9].label,
            },
            // 三层
            {
                source: title[7].label,
                target: '33',
            },
            {
                source: '31',
                target: title[10].label,
            },
            {
                source: '32',
                target: title[11].label,
            },
            {
                source: '34',
                target: title[12].label,
            },

            // 一层
            {
                source: '1',
                target: '2',
                symbol: 'none',
            },
            {
                source: '2',
                target: '3',
                symbol: 'none',
            },
            {
                source: '1',
                target: '4',
                symbol: 'none',
            },
            {
                source: '4',
                target: '5',
                symbol: 'none',
            },
            // 二层
            {
                source: '21',
                target: '22',
                symbol: 'none',
            },
            {
                source: '22',
                target: '23',
                symbol: 'none',
            },
            {
                source: '23',
                target: '24',
                symbol: 'none',
            },
            {
                source: '24',
                target: '25',
                symbol: 'none',
            },
            {
                source: '25',
                target: '26',
                symbol: 'none',
            },
            // 三层
            {
                source: '31',
                target: '32',
                symbol: 'none',
            },
            {
                source: '32',
                target: '33',
                symbol: 'none',
            },
            {
                source: '33',
                target: '34',
                symbol: 'none',
            },
        ],
        //线条的颜色
        lineStyle: {
            normal: {
                opacity: 0.9,
                color: '#53B5EA',
                type: 'dashed',
                width: 1
            }
        }
    }]
};

更多入口

echarts画工作流（流程图）
张音乐的博客
09-23 2万+
一、流程图介绍 老规矩，先来一张效果图压压惊，流程来源于某宝，某鱼，某电商平台的货物流转流程，自己稍微修改了一下。仅供学习参考使用。 使用echarts等开源框架开发可以减少自己的开发时间，提高工作效率。 一般流程图如果仅仅是作为静态页面，不需要考虑交互还是很容易画出来的，但是如果需要考虑到交互效果，那就需要自己在基于对开源框架集成使用中多加思考了，毕竟现在很多开源框架的基本思想都是组...
echarts 画流程图
热门推荐
张音乐的博客
08-01 2万+
先看效果图 标题 //渲染流程图 var drawForceChart = function(data){ console.log('开始执行流程图'); var forceOption = { tooltip: {}, animationDurationUpdate: 1500, animationEasingUpdat...
echarts 流程图
yangchuangxyz的博客
04-22 6575
先附图： 代码如下： let myCharts = echarts.init(document.getElementById("techCharts")); let charts = { nodes: [ // 节点 {name: '流程1',value: [0, 500]}, {name: '流程2',value: [150, 500]}, {name: '流程3',value: [300...
ECharts图表使用指南：从入门到实战
weixin_31776191的博客
07-12 350
ECharts，这个名字源于Enterprise Charts（企业级图表），是一个基于JavaScript的开源可视化解决方案，致力于提供简单易用、功能强大的数据可视化工具。其诞生源于百度的内部项目，旨在解决复杂的业务场景下数据展示的需求。ECharts不仅支持多种常见图表类型，如折线图、柱状图、饼图等，还能实现更为复杂的数据可视化，例如地图、热力图以及多轴的结合。与其他流行的图表库相比，ECharts具有几个显著的特点。
用echarts绘制流程图
liuli0927的博客
07-20 6900
当这两个流程图进行切换展示时，一定要使用v-show。
echars实现全流程图
weixin_51935690的博客
01-08 6057
流程图效果图如下 可自己添加节点，更改数据流等，数据流是动画的方式进行节点间流动 步骤如下： 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绘制流程图
YLiu77的博客
11-02 4203
先上效果图： 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创建流程图
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"> // 基
基于 vue3 + echarts + amap(高德地图) + pinia 开发的大屏可视化项目，支持拖拽布局.zip
01-05
ECharts 是一个由百度开发的开源数据可视化库，支持丰富的图表类型，如柱状图、折线图、饼图等，且具备良好的交互性。在大屏可视化项目中，ECharts是绘制各类数据图表的关键工具，用于将复杂的数据以直观的方式展示...
基于Vue 3+ Vite+Vue-Router 4+Element-Plus+Echarts+Axios 开发的后台管理系统
06-14
基于Vue 3+ Vite+Vue-Router 4+Element-Plus+Echarts+Axios 开发的后台管理系统 项目经过严格测试，确保可以运行！ 基于 Spring Boot 和 Vue 以及相关技术栈开发。 前台商城系统包含首页门户、商品分类、新品上线、...
毕业设计 基于python的新冠疫情数据分析系统 request+echarts+layui
06-13
项目为本人的毕业设计 数据来源 实时采集某平台疫情数据 request实现对某平台疫情数据爬虫 线性回归预测分析 flask实现前后端交互 luyui前端页面 echarts实现新冠疫情数据分析 项目不易 多多支持！
基于Echarts+Python的图书零售监测系统设计与实现.zip
最新发布
07-22
3.2数据采集与处理模块介绍数据采集的来源、方式及数据预处理流程。3.3数据可视化模块阐述如何利用Echarts实现数据的可视化展示和分析。第4章系统实现与测试说明系统的具体实现过程及测试结果。4.1系统实现环境介绍...
SSM+Echarts+Mysql实现的从数据库获取数据展示图表
12-12
Echarts是百度开发的开源JavaScript库，支持丰富的图表类型，如折线图、柱状图、饼图等，并提供了高度的定制化能力。在本项目中，Echarts用于将从数据库获取的数据转化为可视化图表，用户可以通过交互式的界面查看和...
echart流程图-工序及状态
yefeng1308的博客
09-17 2324
参考了一下资料，流程图可以实现当前在那个工序流程图，还需求展示当前状态（可以用色来标记），还有返工的流程在里面（默认是弧线）。图中返工的连接线的版本需要写一点位计算方法，这部分比较复杂。后面上传一个DEMO.
Echarts实现流程图关系图拓扑图
请叫我欧皇！的博客
06-21 3621
实现如下，可以横着排竖着排都可以。
记录echarts绘制流程图，及自定义样式
weixin_45952434的博客
03-03 1778
echarts绘制流程图及自定义样式
ECharts关系图、流程图、导向图(详细示例——满满的注释)
2401_84141337的博客
04-17 2341
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。
【echarts】用地图模块做动态流程图2.0（根据后台数据自动均匀排布，且实时更新节点状态）
arminc的博客
08-09 7006
1.效果 2.说明 这个升级版几乎就是我们公司用的这个功能了，设计到的功能就是可以根据后台数据重新进行位置排布，且实时刷新节点的数据。用ec写出这个效果不难，参考demo1 这个主要是设计到如何根据数据进行重新排布，实时刷数据，这些都是ec插件没有的，需要我们去苦逼手写的。 3.代码： 3.1要知道的： 其实在敲代码前，就应该意识到和后台要的数据是什么样的，要知道我们是用地图模块实现...
jsdroid 获取节点_建筑施工细部节点工艺培训讲义
weixin_39663593的博客
10-30 181
今日分享专篇建筑施工细部节点工艺培训讲义包含图纸 计算书仅供参考Word、PPT格式下载链接获取方式见文末内容截图52.51.混凝土修补方案50.一套完整的工程量计算例子(可下载包括计算书和图纸)49.精装修工艺工法培训48.万达质量防治手册47.17套施工计算讲义，详情见截图(可下载)46.图解钢结构(可下载)45.万科住宅空间功能—— 新版标准44.地下工程施工管理要点43.复...
vue+ECharts 绘制流程图
05-08
### 在 Vue 中结合 ECharts 绘制流程图 要在 Vue 中使用 ECharts 实现流程图，可以按照以下方式操作： #### 1. 安装依赖 通过 `npm` 或 `yarn` 安装 ECharts 库： ```bash npm install echarts --save ``` 或者使用 Yarn： ```bash yarn add echarts ``` #### 2. 引入 ECharts 可以选择全局引入或局部引入。 ##### 全局引入（适用于整个项目都需要使用 ECharts） 在项目的入口文件 `main.js` 中进行如下设置： ```javascript import * as echarts from 'echarts'; Vue.prototype.$echarts = echarts; ``` 这样可以在任何组件中通过 `this.$echarts` 访问到 ECharts[^4]。 ##### 局部引入（仅限于特定组件） 如果只需要在一个组件中使用 ECharts，则可以直接在该组件中导入： ```javascript const echarts = require('echarts'); // 或者 ES6 模块语法 import * as echarts from 'echarts'; ``` #### 3. 准备 DOM 容器 在模板中定义一个具有固定宽度和高度的容器用于渲染图表。例如： ```html <template> <div> <h3>流程图</h3> <div ref="flowChart" style="width: 100%; height: 500px;"></div> </div> </template> ``` #### 4. 初始化并配置 ECharts 流程图 以下是完整的代码示例，展示如何在 Vue 中绘制流程图： ```javascript <script> export default { data() { return { chartInstance: null, }; }, mounted() { this.initFlowChart(); }, beforeDestroy() { if (this.chartInstance) { this.chartInstance.dispose(); // 销毁实例以释放资源 } }, methods: { initFlowChart() { const domElement = this.$refs.flowChart; if (!domElement) { console.error('DOM element not found!'); return; } this.chartInstance = echarts.init(domElement); const option = { title: { text: '流程图', left: 'center', }, tooltip: {}, series: [ { type: 'graph', // 设置图形类型为 graph 表示关系图/流程图 layout: 'force', // 力引导布局 symbolSize: 50, // 节点大小 roam: true, // 是否开启鼠标缩放和平移漫游 label: { show: true, position: 'inside', }, edgeSymbol: ['circle', 'arrow'], // 边缘箭头样式 edgeLabel: { normal: { show: true, textStyle: { fontSize: 10, }, }, }, force: { repulsion: 100, // 节点之间的斥力因子 }, data: [ { name: '节点A', category: 0 }, { name: '节点B', category: 1 }, { name: '节点C', category: 2 }, { name: '节点D', category: 3 }, ], links: [ { source: '节点A', target: '节点B' }, { source: '节点B', target: '节点C' }, { source: '节点C', target: '节点D' }, ], categories: [ { name: '类别1' }, { name: '类别2' }, { name: '类别3' }, { name: '类别4' }, ], }, ], }; this.chartInstance.setOption(option); }, }, }; </script> <style scoped> /* 可选样式 */ </style> ``` 以上代码展示了如何创建一个简单的流程图，并设置了基本属性如节点名称、连接线以及分类信息[^1]。 --- ### 注意事项 - **性能优化**：对于复杂的大规模数据集，建议调整 `repulsion` 和其他参数以获得更好的显示效果。 - **动态更新**：可以通过监听事件或其他机制实时修改 `option` 数据源，调用 `setOption()` 方法刷新视图[^3]。 - **清理工作**：当组件被销毁时记得调用 `dispose()` 来释放内存占用[^5]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值