简介这份源码资源面向具备一定 Python 与前端基础的开发者聚焦制造业生产管理场景提供基于 Echarts 与 Python Flask 的动态实时数据可视化大屏实现方案可用于工厂生产看板、车间数据监控等项目的快速搭建与二次开发。压缩包共 142 个文件约 9.96MB其中 60 个 js 脚本承担图表渲染与交互逻辑20 个 css 与 9 个 html 构成大屏页面布局与样式9 个 json 用于数据配置另有 3 个 py 文件负责 Flask 后端服务与数据接口并附带 png 素材与说明文档结构完整、层次清晰。目前已有 2611 人学习下载说明该方案在实际开发中具备较高参考价值。读者可从中获取前后端联调的完整代码框架、Echarts 实时刷新与数据驱动的实现思路以及大屏自适应布局的工程组织方式适合作为课程设计、毕业设计或企业原型开发的起步模板。1. 数据可视化大屏为什么总在“演示即巅峰”从 Echarts Flask 实时看板说起很多制造业数字化项目里数据可视化大屏的宿命是验收当天惊艳全场上线一周后没人再看。问题不在 Echarts 的图表不够炫也不在 Flask 太轻量而在于“动态实时”这四个字被当成了装饰——数据是写死的 JSON刷新靠手动 F5车间一断网整块屏就白屏。这套基于 Echarts Python Flask 的动态实时大屏方案核心要解决的是让生产管理看板上的产量、良率、设备状态、工单进度这些指标真正跟着产线数据动起来而不是停留在 PPT 里。它适合两类人一是手里有 MES 或 PLC 数据但不知道怎么快速搭出可视化界面的工厂 IT二是想用最小技术栈跑通“采集—接口—渲染”全链路的开发者。下面按我实际搭过几套类似系统的经验把选型、代码、参数和坑一次讲透。2. 为什么是 Flask Echarts 而不是 Vue 大屏框架选型逻辑与最小可跑架构2.1 轻量后端 声明式图表的组合边界制造业看板的需求有个特点图表类型固定折线、柱状、饼图、仪表盘、表格但数据更新频率高秒级到分钟级且部署环境往往很保守——车间服务器可能只有 Python 环境没有 Node 构建链。Flask 的优势在这里非常明显一个app.py加几个路由就能提供 JSON 接口不需要 Webpack、不需要打包改完代码重启即可。Echarts 则负责前端渲染它本身是纯 JavaScript 库通过setOption更新数据配合setInterval或 WebSocket 就能实现动态效果。但边界也要说清楚Flask 自带开发服务器不能扛生产流量Echarts 的动画在低端工控机上会掉帧。所以这套组合适合“单屏或少量并发”的场景比如车间入口一块 55 寸屏、办公室一块监控屏。如果要做多用户权限、复杂交互还是得上 Vue FastAPI 那套。选型不是比谁高级是比谁能在现场跑得稳。2.2 从零搭出可运行骨架的四个文件我一般会把项目拆成四个核心文件app.pyFlask 入口、data_source.py模拟/真实数据源、templates/dashboard.html大屏页面、static/js/dashboard.jsEcharts 逻辑。先看后端最小实现# app.py from flask import Flask, jsonify, render_template import data_source # 自定义数据模块 app Flask(__name__) app.route(/) def index(): # 渲染大屏模板模板里通过 JS 轮询接口 return render_template(dashboard.html) app.route(/api/production) def production(): # 返回产量、良率、设备状态等 JSON data data_source.get_realtime_data() return jsonify(data) if __name__ __main__: # host0.0.0.0 让车间其他机器也能访问 app.run(host0.0.0.0, port5000, debugFalse)这段代码的关键点render_template负责返回 HTML 骨架/api/production是数据接口。debugFalse在生产环境必须关掉否则会暴露调试器。host0.0.0.0是为了让大屏机器通过 IP 访问而不是只限本机。数据源模块可以先用模拟数据跑通再替换成真实查询# data_source.py import random from datetime import datetime def get_realtime_data(): # 模拟一条产线的实时指标 return { timestamp: datetime.now().strftime(%H:%M:%S), output: random.randint(800, 1200), # 当前班次产量 yield_rate: round(random.uniform(92, 99), 2), # 良率百分比 device_status: random.choice([运行, 待机, 故障]), work_orders: [ {id: WO-1001, progress: random.randint(30, 100)}, {id: WO-1002, progress: random.randint(30, 100)}, {id: WO-1003, progress: random.randint(30, 100)}, ] }参数说明output范围按实际产线节拍调整yield_rate保留两位小数避免前端显示过长。work_orders列表长度决定前端表格行数一般不超过 8 行否则大屏要滚动。前端模板里放一个容器然后由 JS 初始化 Echarts!-- templates/dashboard.html -- !DOCTYPE html html head meta charsetutf-8 title生产管理看板/title script srchttps://cdn.jsdelivr.net/npm/echarts5/dist/echarts.min.js/script style body { margin: 0; background: #0b1a2b; color: #fff; } #main { width: 100vw; height: 100vh; } /style /head body div idmain/div script src/static/js/dashboard.js/script /body /html这里用 CDN 引入 Echarts 是为了减少本地文件管理但车间内网如果无法访问外网必须把echarts.min.js下载到static/js/目录并改成本地引用。这是第一个容易翻车的点。2.3 前端轮询与 Echarts 动态更新的最小闭环前端 JS 负责定时拉数据并更新图表。下面是一个包含仪表盘和柱状图的简化实现// static/js/dashboard.js var chart echarts.init(document.getElementById(main)); // 初始配置仪表盘 柱状图组合 var option { series: [ { type: gauge, center: [25%, 50%], radius: 60%, detail: { formatter: {value}%, color: #00ffcc }, data: [{ value: 0, name: 良率 }] }, { type: bar, center: [70%, 50%], data: [] } ] }; chart.setOption(option); // 每 3 秒拉一次数据 setInterval(function () { fetch(/api/production) .then(function (res) { return res.json(); }) .then(function (data) { // 只更新变化的部分避免整图重绘 chart.setOption({ series: [ { data: [{ value: data.yield_rate, name: 良率 }] }, { data: data.work_orders.map(function (w) { return w.progress; }) } ] }); }) .catch(function (err) { console.error(数据拉取失败, err); }); }, 3000);逻辑说明setInterval每 3000 毫秒发起一次fetch拿到 JSON 后调用setOption做增量更新。Echarts 的setOption默认会合并配置所以只需要传变化的数据字段。参数上轮询间隔不要低于 1000 毫秒否则车间老旧浏览器容易堆积请求也不要高于 10000 毫秒否则“实时感”消失。如果产线数据变化慢可以放到 5000 毫秒。提示如果大屏机器是 Windows 7 上的旧版 ChromeEcharts 5 可能不兼容需要降到 Echarts 4 并关闭部分动画。3. 让数据真正“动”起来Flask 接口设计、数据缓存与 WebSocket 降级方案3.1 接口返回结构怎么定才不用反复改前端接口字段命名要一次定好否则前端改到崩溃。我习惯用扁平结构加固定键名避免嵌套过深{ ts: 14:23:05, output: 1050, yield_rate: 96.5, device_status: 运行, orders: [ {id: WO-1001, progress: 75}, {id: WO-1002, progress: 40} ] }字段名用ts而不是timestamp是为了减少传输体积orders而不是work_orders前端写起来短。这些细节在单屏场景无所谓但如果接口每秒被调用多次省下的字节会累积。更重要的是字段一旦确定前后端就按这个契约走不要今天叫output明天叫production_count。3.2 用内存缓存挡住数据库压力如果每次请求都去查 MES 数据库几十毫秒的查询在 3 秒轮询下还能接受但一旦大屏数量增加或查询变复杂数据库连接池很快耗尽。常见做法是在 Flask 进程内加一层缓存比如用cachetools的TTLCache# data_source.py 改造 from cachetools import TTLCache import random from datetime import datetime cache TTLCache(maxsize1, ttl2) # 缓存 2 秒 def get_realtime_data(): if data in cache: return cache[data] # 模拟真实查询耗时 data { ts: datetime.now().strftime(%H:%M:%S), output: random.randint(800, 1200), yield_rate: round(random.uniform(92, 99), 2), device_status: random.choice([运行, 待机, 故障]), orders: [ {id: WO-1001, progress: random.randint(30, 100)}, {id: WO-1002, progress: random.randint(30, 100)}, ] } cache[data] data return data参数说明ttl2表示缓存 2 秒比前端 3 秒轮询略短保证每次前端请求最多命中一次缓存不会拿到过期数据。maxsize1是因为只缓存一份全局数据。如果有多条产线可以按产线 ID 做 keymaxsize设为产线数量。3.3 轮询扛不住时怎么降级到 WebSocket轮询在 5 块屏以内没问题超过 10 块屏时每秒几十个 HTTP 请求会让 Flask 开发服务器直接卡死。这时候需要上 WebSocket但车间环境不一定允许装flask-socketio和eventlet。我的降级策略是先试 WebSocket如果依赖装不上就退回轮询并调大间隔到 5 秒同时在前端加一个“最后更新时间”提示让看板使用者知道数据不是卡住了。WebSocket 版本的核心改动是后端主动推# app_socket.py需安装 flask-socketio from flask import Flask, render_template from flask_socketio import SocketIO import data_source import time app Flask(__name__) socketio SocketIO(app, cors_allowed_origins*) app.route(/) def index(): return render_template(dashboard.html) def push_data(): while True: socketio.emit(production, data_source.get_realtime_data()) time.sleep(2) if __name__ __main__: socketio.start_background_task(push_data) socketio.run(app, host0.0.0.0, port5000)前端对应改成socket.on(production, function(data){ ... })。注意cors_allowed_origins*只适合内网公网环境必须收紧。如果车间服务器是 Python 3.6 且装不了新版eventlet就老老实实回到轮询方案别在这上面耗时间。4. 大屏适配与性能避坑从 4K 屏到工控机的 5 个血泪教训4.1 现象大屏在 4K 显示器上图表模糊、字体发虚原因Echarts 默认按 CSS 像素渲染如果页面没有设置devicePixelRatio在 4K 屏上 canvas 被拉伸导致模糊。解决在echarts.init时传入像素比var chart echarts.init(document.getElementById(main), null, { devicePixelRatio: window.devicePixelRatio || 1 });同时 CSS 里不要用transform: scale()去放大整个容器而是让图表容器本身占满视口。4.2 现象轮询一段时间后浏览器内存飙升页面卡死原因每次setOption都创建新的动画队列旧动画没被回收。解决在setOption第二个参数里关闭不必要的动画chart.setOption(newData, { notMerge: false, lazyUpdate: true });lazyUpdate: true让 Echarts 在下一帧统一更新减少重绘次数。另外如果图表类型多把不常变的图表用notMerge: true整体替换反而比增量合并更省内存。4.3 现象车间断网后大屏白屏恢复网络也不自动重连原因fetch失败后没有重试机制setInterval虽然还在跑但页面没有兜底显示。解决在 catch 里保留上一次数据并显示“连接中断”提示var lastData null; setInterval(function () { fetch(/api/production) .then(function (res) { return res.json(); }) .then(function (data) { lastData data; updateChart(data); document.getElementById(status).innerText 在线; }) .catch(function () { if (lastData) { updateChart(lastData); } document.getElementById(status).innerText 连接中断显示最后数据; }); }, 3000);4.4 现象Flask 日志里大量 499 错误前端却显示正常原因前端fetch设置了超时或者用户频繁刷新页面导致请求被取消。499 是客户端主动断开不是后端错误。解决不用管但如果数量太大说明轮询间隔太短或页面被反复加载检查是否有多个setInterval叠加。4.5 现象Echarts 图表在工控机触摸屏上点击无响应原因工控机浏览器版本老不支持pointer-events或 Echarts 的交互事件。解决关闭不必要的交互组件比如toolbox、dataZoom只保留tooltip并在初始化时设置silent: true让图表不响应鼠标事件减少 CPU 占用。5. 从能跑到好用把看板做成产线愿意天天看的三个进阶技巧5.1 用“变化高亮”代替数字刷新纯数字跳动看久了会麻木。我习惯在良率低于阈值时让仪表盘变红产量达标时柱状图变绿。实现方式是在setOption前判断var color data.yield_rate 95 ? #ff4d4f : #00ffcc; chart.setOption({ series: [{ data: [{ value: data.yield_rate, name: 良率, itemStyle: { color: color } }] }] });这个技巧让看板从“数据展示”变成“异常提醒”产线班长才会主动看。5.2 加一个“最后更新时间”和“数据来源”角标很多看板被质疑“数据是不是假的”就是因为没有时间戳。在页面右下角固定一个div每次更新时写入data.ts并标注“来源MES 实时接口”。这一个小动作能极大提升信任度。5.3 用 Flask 的send_file做一键导出当前看板截图有时候开会需要把当前看板截下来放进报告。可以在后端加一个路由用puppeteer或playwright截图但车间环境装这些太重。轻量做法是前端用html2canvas把#main转成图片再 POST 到 Flask 保存html2canvas(document.getElementById(main)).then(function (canvas) { var img canvas.toDataURL(image/png); fetch(/api/snapshot, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ image: img }) }); });后端收到 base64 后解码存成文件即可。这个功能不常用但关键时刻能省掉“拍照发群”的麻烦。我自己的习惯是每套看板上线前先让产线班长用一周只记录他每天看了几次、每次看多久。如果一周后他还在看这套看板才算合格如果没人看再炫的 Echarts 也只是自嗨。希望帮到你。本文还有配套的精品资源点击获取