简介这是一个面向数据可视化学习者的动态实时大屏源码范例基于 Echarts 与 Python 技术栈实现聚焦互联网大数据统计场景。适合已掌握 Python 基础与前端入门知识、希望快速上手大屏开发的读者通过源码练习逐步掌握数据接入、图表配置与动态刷新逻辑。资源包共 51 个文件压缩后仅 1.77MB内含 12 个 JSON 数据与地图配置、11 个 JS 图表脚本、5 个 Python 服务端脚本、5 个 CSS 样式以及 HTML 入口和说明文档。各类型文件协作清晰JSON 定义数据结构和地图边界Python 脚本通过异步请求或定时任务模拟实时数据源JS 基于 Echarts 渲染折线图、柱状图、地图等并调用 setOption 完成图表动态更新。已有 1105 人学习下载。通过研读本范例可复用其大屏栅格布局、深色主题配色和异步数据更新机制也能学习如何将 Echarts 与 Python 后端结合为实际业务数据可视化项目提供基础模板同时目录结构规范随附 Readme 说明便于二次开发与功能扩展是一份实用且易上手的参考实现。1. 从一份大屏源码反推它的工程结构解压这个基于 Echarts Python 的互联网大数据统计大屏源码包你会看到 bootstrap 样式、echarts.min.js、五个 box 开头的 JS 文件、四个 JSON 模板以及 httpserver.py、asyncJson.py、config.py 这些 Python 脚本。初次上手的人容易迷失在文件堆里但这套目录恰恰对应了大屏项目的标准分层浏览器端负责图表渲染Python 端负责把数据整理成 JSON 喂给图表。对做数据可视化的人而言这种前后端分离的实时大屏方案很常见特别适合互联网场景下用户访问量、流量来源、地域分布这类高频刷新的统计需求。花几分钟理清这条链路你就能把任何一份同类型源码快速改造成自己的企业级数据可视化看板。2. 后端数据服务Python 定时刷新与 JSON 接口设计2.1 源码里几个 Python 文件的职责划分先看源码包里的 Python 文件httpserver.py 负责启动 HTTP 服务和接口路由asyncJson.py 负责按大屏区块组装异步 JSONdb_common.py 封装数据库查询逻辑config.py 集中管理连接参数和刷新频率。这种拆分的价值在于变更隔离前端要加图表时后端只需要在 asyncJson 里增加一个返回分支后端换数据源时前端 box1.js 到 box5.js 完全不用动。文件职责部署时改动点对应前端入口config.py端口、数据库路径、刷新间隔换环境时统一修改不直接接触httpserver.py静态文件服务与 /api/ 路由新增接口时扩展fetch 请求地址db_common.pySQL 查询、结果转字典数据表结构调整时不直接接触asyncJson.py按 box 维度组织返回结构图表维度变化时box1.js 等实际工程里常有人把所有逻辑塞进一个 main.py结果图表数量一多改一处要重新测半天。这个范例的拆分思路更接近生产环境每个 box 的 JSON 结构独立维护db_common 只做数据访问不掺入图表语义。你接手后应当保留这个分层不要顺手把所有函数合并到单个文件里。2.2 config.py 与刷新间隔的设计config.py 是这个项目里最先要看懂的文件。里面通常会定义主机地址、端口、数据库连接串以及实时大屏的核心参数刷新间隔。刷新间隔决定了后端多久去数据源拉一次新数据同时也决定了数据库的压力设置太短会把数据源打死设置太长又失去实时意义。# config.py 常见结构 HOST 0.0.0.0 PORT 8000 DB_PATH ./data.db REFRESH_INTERVAL 5 # 单位: 秒控制数据拉取频率 CACHE_SIZE 200 # 内存中保留的最近数据条数配置项的说明HOST 绑定 0.0.0.0 是为了让局域网内其他机器能访问大屏如果只是本机调试可以改成 127.0.0.1REFRESH_INTERVAL 我一般建议先设 5 秒跑通链路再根据数据源压力调整到 10 到 30 秒。CACHE_SIZE 是内存缓存上限当数据源是大流量统计接口时先在后端聚合再返回要比每次查全量数据可靠得多。2.3 一个可用的异步 JSON 响应实现httpserver.py 在这个项目中承担双重角色既是静态文件服务器又是接口服务。它的核心逻辑是判断请求路径是否以 /api/ 开头如果是就把对应的 box 数据返回给前端。下面是这类服务最常见的实现方式与源码包的职责一致。# httpserver.py 最小可运行版本与源码包中职责对应 import json import threading from http.server import HTTPServer, BaseHTTPRequestHandler from urllib.parse import urlparse from config import HOST, PORT, REFRESH_INTERVAL from asyncJson import build_box_response class ScreenHandler(BaseHTTPRequestHandler): def do_GET(self): path urlparse(self.path).path if path.startswith(/api/): # 接口路由: 根据 box 编号返回对应图表数据 box_id path.replace(/api/, ) payload build_box_response(box_id) self.send_response(200) self.send_header(Content-Type, application/json; charsetutf-8) self.end_headers() self.wfile.write(json.dumps(payload).encode(utf-8)) else: # 静态资源: 读取 index.html、js、css 目录下的文件 super().do_GET() def start_cache_warmup(): # 常见做法: 后台线程定时预热数据保证前端请求时响应足够快 def _loop(): build_box_response(box1, force_refreshTrue) threading.Timer(REFRESH_INTERVAL, _loop).start() _loop() if __name__ __main__: start_cache_warmup() HTTPServer((HOST, PORT), ScreenHandler).serve_forever()逻辑说明do_GET 里先用 urlparse 拿到请求路径再判断是走接口还是返回静态文件。start_cache_warmup 用 threading.Timer 做循环定时预热这是解决实时大屏首屏加载慢的常见做法提前把 box1 的数据算好放内存避免前端五个图表同时请求时后端临时查库。注意这里的 build_box_response 是 asyncJson.py 提供的函数不直接在 HTTP handler 里写 SQL。2.4 db_common.py 的查询结果标准化大屏数据源往往不是单一表而是分布在多张表甚至多个数据库里。db_common.py 的职责就是把查询结果统一成字典列表这样 asyncJson 在做序列化时不需要关心底层是 MySQL、PostgreSQL 还是 SQLite。这里有一个关键点统一把 Row 转成 dict避免前端拿到带 Row 对象特征的数据。# db_common.py 查询封装示例 import sqlite3 class QueryCommon: def __init__(self, db_path: str): self.db_path db_path def query_to_dicts(self, sql: str, params: tuple None): conn sqlite3.connect(self.db_path) conn.row_factory sqlite3.Row cur conn.cursor() cur.execute(sql, params or ()) rows [dict(row) for row in cur.fetchall()] cur.close() conn.close() return rows参数说明db_path 来自 config.py避免在各个查询方法里重复写连接串。query_to_dicts 接收 SQL 和参数执行后把每一行转成 dict。你接到真实项目时如果数据量超过十万级建议把 sqlite3 换成连接池方案同时在 SQL 里按时间窗口过滤不要每次都全表扫描。这样 asyncJson 组装流量趋势图时拿到的就是结构干净的时间点列表。3. Echarts 渲染层模板 JSON 驱动的大屏布局3.1 index.html 的布局思路与容器分配大屏页面和普通后台页面的区别在于信息密度和视觉层级。index.html 里通常没有复杂交互组件而是用栅格系统把屏幕划分为多个图表容器。源码包里出现 bootstrap.css 就是为了做这种百分比栅格布局让五个图表在不同分辨率下自动伸缩。每个 box 对应一个 div 容器id 从 box1 到 box5后端每个接口返回的数据都指向这些容器。!-- index.html 中的典型容器结构 -- div classrow div classcol-md-8 div idbox1 styleheight: 360px;/div /div div classcol-md-4 div idbox2 styleheight: 360px;/div /div /div div classrow div classcol-md-6 div idbox3_left styleheight: 320px;/div /div div classcol-md-6 div idbox3_right styleheight: 320px;/div /div /div容器的 id 与 asyncJson.py 返回的 box 编号一一对应这是整套系统能跑通的前提。你改布局时可以调 col-md-* 的数值但不要随意改容器 id否则前端 JS 的 echarts.init 会找不到挂载节点。height 必须显式设置Echarts 不能自适应高度为零的容器。3.2 box1.js 到 box5.js 的模块化初始化每个 box 的 JS 文件独立维护这是该源码包最值得借鉴的地方。box1.js 只负责第一个图表box3_left.js 和 box3_right.js 分别处理左右两栏互不干扰。每个文件内部通常是三段式初始化图表实例、定义定时器、用后端数据调用 setOption。// box1.js —— 左上方图表的数据加载与更新 var box1Chart echarts.init(document.getElementById(box1)); function fetchBoxData() { fetch(/api/box1) .then(function (res) { return res.json(); }) .then(function (data) { box1Chart.setOption(data, true); }) .catch(function (err) { console.error(box1 数据加载失败:, err); }); } setInterval(fetchBoxData, 5000); fetchBoxData();逻辑说明fetch 请求 /api/box1 拿到的是完整 option 结构setOption 第二个参数传 true 表示完全替换旧的配置避免上一次的系列数据残留。定时器和首次执行都会触发加载这样页面刚打开时不用等一个刷新周期。这里把 5000 毫秒写死在前端你也可以从 config.py 提供的一个全局 meta 接口里读取刷新间隔实现前后端统一配置。3.3 JSON 模板与 setOption 的数据映射源码包里 json_template 目录中存放 box1.json、box2.json 这些模板这是理解这个项目的钥匙。模板里定义图表类型、坐标轴、颜色和系列初始值运行时后端只替换数据部分。这种做法比在前端拼接 option 更清晰因为数据结构可以在后端直接字段对齐。{ title: { text: 今日访问趋势 }, tooltip: { trigger: axis }, xAxis: { type: category, data: [00:00, 01:00, 02:00] }, yAxis: { type: value }, series: [ { name: PV, type: line, smooth: true, data: [1200, 1400, 1300] }, { name: UV, type: line, smooth: true, data: [800, 950, 900] } ] }字段说明xAxis.data 是类目轴的时间点series 数组支持多系列折线。smooth 设为 true 会把折线变成平滑曲线更适合展示流量变化趋势。实际接入时后端 build_box_response 返回的 data 就是类似上面这个结构前端无需知道数据从哪张表来直接 setOption。3.4 常用 Echarts 配置参数对照配置项作用大屏场景建议title.text图表标题使用简短业务名称tooltip.trigger提示框触发方式axis 适合趋势类图表legend.data系列名称列表与 series.name 保持一致grid.top / grid.bottom图表边距大屏留白不宜过大series.smooth曲线平滑折线图建议开启series.areaStyle区域渐变可增强视觉重量color 数组全局配色控制在 5 色以内其中 grid 参数最容易忽略。默认上下左右留白较大在大屏上会显得图表内容小。我一般会把 grid 的 left 设为 50right 设为 20让绘图区尽量撑满容器。tooltip 需要打开否则运营人员只看图形看不出具体数值但大屏上如果一秒刷新一次提示框会频繁跳动建议配合小于 300 毫秒的 hideDelay 使用。4. 启动、联调与常见问题处理4.1 本地快速启动这个项目的服务端是 Python 自带的 http.server 分支不需要安装 Flask 或 Django。启动前先确认机器上有 Python 3.6 以上版本然后在源码包根目录执行python httpserver.py启动后终端会输出监听地址默认通常是 0.0.0.0:8000。浏览器访问 http://127.0.0.1:8000/ 看到大屏页面说明静态资源服务正常。此时可以先验证接口curl http://127.0.0.1:8000/api/box1如果返回合法 JSON 且包含 xAxis 和 series 字段说明数据和前端链路已经打通。注意不要只测试一个接口box2 到 box5 都要分别 curl因为某些 box 的数据表可能是空的会导致前端显示空白。4.2 前后端字段对齐的调试方法大屏空白最常见的原因是字段名对不上。比如 asyncJson.py 返回的字段是 value而 box1.js 里 setOption 用的是 data那图表必然没有内容。调试时可以借助浏览器开发者工具的 Network 面板直接查看接口响应内容再和 json_template 里的模板文件做对比。常见字段错位包括时间字段命名不一致SQL 聚合后没按时间排序导致折线图乱跳decimal 类型数据被序列化成字符串导致 Y 轴数值异常。遇到数值问题我会在 db_common 的查询结果中做一层强制转换def _to_number(value): # 把 Decimal 或数字字符串统一转成 float try: return float(value) except (TypeError, ValueError): return 0这样处理过之后传输给前端的数值都是标准 JSON 数字类型。否则 Echarts 会把字符串当类别处理线图直接画断。period 这个字段也要确认格式一致否则用户看到的时间轴对不上。4.3 实时刷新节奏与性能取舍实时大屏不是刷新越快越好。前端五个图表同时 setInterval每 5 秒一次一分钟就是 60 个请求后端如果要查多张表做关联聚合数据库压力会成倍增加。建议把图表按重要性分级核心指标 5 秒刷新辅助图表 15 秒刷新地图类数据 30 秒刷新。// 分周期刷新的常见写法 setInterval(function () { fetch(/api/box1).then(function (r) { return r.json(); }).then(function (d) { box1Chart.setOption(d, true); }); }, 5000); setInterval(function () { fetch(/api/box4).then(function (r) { return r.json(); }).then(function (d) { box4Chart.setOption(d, true); }); }, 15000);这种写法没有引入额外依赖每个图表独立计时互不影响。后端 asyncJson.py 里如果有缓存机制可以进一步降低数据库查询频率。对于互联网大数据统计场景数据本身有延迟是正常的没必要让大屏的请求频率高于数据源的更新频率。4.4 缓存与刷新间隔的坑浏览器对 fetch 请求有缓存策略有时你会发现自己改了后端接口前端拿到的还是旧数据。一个简单办法是在接口地址上加时间戳参数curl http://127.0.0.1:8000/api/box1?_t$(date %s)fetch 同理在 URL 后面拼接一个随机数或者时间戳。此外还要检查系统时间是否准确这个项目如果按时间窗口统计数据服务器和数据库所在机器时间不一致就会得到错误的时间段结果。遇到图表不更新时先看 Network 面板里的请求有没有发出去再看响应有没有变化最后才怀疑前端渲染逻辑。5. 往生产方向改把演示项目变成可维护的大屏系统5.1 请求合并与页面生命周期管理演示版大屏每个 box 独立请求生产环境建议在页面可见性变化时统一处理。大屏通常全天候挂在会议室显示器上但浏览器标签页被切到后台时setInterval 会被浏览器降频导致重新切回时数据出现短暂空白。我一般会监听 visibilitychange 事件页面重新可见时立即触发一次全量刷新。document.addEventListener(visibilitychange, function () { if (!document.hidden) { // 页面回到前台时立即补拉一次数据 fetchBoxData(); } });代码说明fetchBoxData 内部会依次请求全部 box 接口并更新对应图表。参数方面可以给每个接口请求添加超时控制避免一个接口卡住拖慢整个页面。生产环境下建议把各图表初始化统一放到一个 initAll 函数里方便在数据源地址变化时集中修改 baseURL。5.2 地图与大屏适配技巧如果后续要加入地域分布可以直接用源码包里的 echarts.min.js 扩展地图模块。Echarts 的地图数据要求在 series 里配置 map 字段并注册 GeoJSON。常见的地图可视化大屏会在后端返回省份名称和数值前端按名称映射到地图区域。注意地图的 roam 参数控制缩放和拖拽在大屏上一般设为 false避免鼠标误操作打乱展示视角。5.3 最后的工程化收尾把你的调试经验沉淀到代码里不要在终端里靠肉眼找问题。启动时打印接口清单每次请求打印状态码和耗时这样到现场部署时能快速判断是数据没查出来还是传输慢。大屏项目维护周期通常很长三个月后你再读 asyncJson.py会感谢当时留下注释的自己。顺手把 box*.json 模板整理成一份字段说明文档列清楚每个 box 的数据来源表和更新频率这比任何代码注释都管用。当你的大屏从 5 个图表扩展到 10 个图表时这份文档会成为前后端对齐的唯一依据。本文还有配套的精品资源点击获取