VIP20
本课程属于：042-可视化分析实战 半导体工艺与制造设备 · 共 20 门相关课程，组合学习更完整。
查看所属VIP全部课程 →
← 返回所属目录 咨询 / 购买

实时监控大屏KPI指标看板与SQL查询数据集成

共计 30 章节
点击此处阅读海量试读课程：100+行业、1000+细分领域
01
课程导论
实时监控大屏的应用场景（运维 · 电商 · 金融）
课程导论实时监控大屏的应…
02
环境搭建
Python虚拟环境配置 · Flask框架安装 · MySQL数据库安装与连接
环境搭建Python
03
SQL基础回顾（一）
SELECT查询 · WHERE条件过滤 · ORDER BY排序
SQL基础回顾
04
SQL基础回顾（二）
聚合函数（COUNT · SUM · AVG
SQL基础回顾
05
SQL进阶
多表JOIN（INNER JOIN · LEFT JOIN） · 子查询
SQL进阶
06
SQL窗口函数
ROW_NUMBER · RANK · DENSE_RANK
SQL窗口函数
07
SQL视图与存储过程
创建视图简化复杂查询 · 编写存储过程实现定时KPI计算
SQL视图
08
Python连接数据库
使用pymysql库连接MySQL · 执行SQL语句 · 获取结果集（fetchone/fet…
Python连接数据库
09
Python数据预处理
使用Pandas清洗数据 · 处理空值 · 数据类型转换
Python数据预处理
10
Flask基础
路由与视图函数 · GET/POST请求处理 · 返回JSON数据
Flask路由
11
Flask RESTful API设计
设计KPI数据接口规范（/api/k… · /api/kpi/trend） · 状态码与错误处理
FlaskRESTful
12
ECharts入门
引入ECharts CDN · 初始化图表实例 · 基本配置项（title
EChartsCDN
13
ECharts核心图表（一）
折线图展示KPI趋势 · 面积图展示累计值 · 柱状图对比不同维度
ECharts核心图表
14
ECharts核心图表（二）
饼图展示占比 · 仪表盘展示完成率 · 雷达图展示多维度KPI
ECharts核心图表
15
ECharts高级交互
数据缩放（dataZoom） · 区域选择（brush） · 图表联动（connect）
ECharts高级交互
16
大屏布局设计
使用CSS Grid/Flexbox… · 栅格系统 · 背景与字体适配
大屏布局设计CSS
17
KPI指标卡设计
使用HTML+CSS实现数字滚动效果 · 指标卡样式（标题 · 数值
KPI指标卡设计
18
实时数据刷新机制
前端使用setInterval定时请… · 后端使用缓存（Redis）减轻数据库…
实时数据刷新机制setInterval
19
WebSocket实时推送
使用Flask-SocketIO建立… · 后端主动推送KPI更新 · 前端监听事件更新图表
WebSocket实时推送
20
项目实战（一）
数据库表设计——订单表 · 用户表 · 商品表
项目实战数据库表设计
21
项目实战（二）
编写SQL查询当日实时KPI（总订单… · 总销售额 · 活跃用户数
项目实战SQL
22
项目实战（三）
编写SQL查询历史趋势KPI（近7天… · 用户增长趋势）
项目实战SQL
23
项目实战（四）
Python后端实现KPI汇总接口 · 趋势接口 · 排行榜接口
项目实战Python
24
项目实战（五）
前端大屏页面开发——顶部KPI指标卡 · 中间折线图与柱状图 · 底部排行榜表格
项目实战KPI
25
项目实战（六）
集成WebSocket实现KPI数值… · 图表自动刷新
项目实战WebSocket
26
性能优化
SQL查询优化（索引 · EXPLAIN分析） · 前端数据懒加载
性能优化SQL
27
安全与权限
API鉴权（） · SQL注入防范（参数化查询） · CORS跨域配置
安全权限
28
部署上线
使用Gunicorn + Nginx… · 配置HTTPS · 使用Supervisor管理进程
部署上线Gunicorn
29
监控与告警
集成Prometheus监控大屏AP… · 设置阈值告警（钉钉/邮件通知）
监控告警
30
课程总结与扩展
大屏设计原则（黄金比例 · 色彩搭配） · 未来方向（3D大屏
课程总结扩展