1. 课程导论与项目全景

1.1 实时监控大屏的应用场景

实时监控大屏是数据可视化领域最具冲击力的落地形态之一。它将企业核心运营指标以图表、数字、进度条等形式集中投射到大尺寸屏幕上，帮助决策者和管理层在“一眼之间”掌握全局态势。以下是当前最典型的应用场景：

1.2 KPI 看板核心概念

KPI（Key Performance Indicator）看板是监控大屏的“数据骨架”。它并非简单罗列数字，而是通过结构化设计，将海量数据提炼为可决策的关键信息。一个成熟的 KPI 看板通常包含以下层次：

• 全局指标层： 展示企业最核心的 3~5 个北极星指标，如“当日产值”、“综合良品率”、“设备综合效率”。
• 维度拆分层： 按产线、班组、时间段等维度对全局指标进行下钻，定位问题根因。
• 趋势与对比层： 通过折线图、柱状图展示指标随时间的变化趋势，以及同比/环比差异。
• 告警与异常层： 当指标超出阈值时，触发颜色变化、闪烁或弹窗提醒，形成闭环响应。

1.3 课程目标与项目架构总览

本课程旨在帮助学员掌握从零构建一套企业级实时监控大屏的完整技术栈。课程结束后，你将具备以下能力：

1. 熟练使用 ECharts 绘制折线图、柱状图、饼图、仪表盘、热力图等 10+ 种常用图表。
2. 实现基于 WebSocket / 轮询的实时数据刷新机制，让大屏数据“动起来”。
3. 设计并开发包含全局指标、维度拆解、趋势对比、告警联动的 KPI 看板。
4. 掌握大屏自适应布局、主题切换、性能优化等工程化实战技巧。

项目整体采用前后端分离架构，前端以 ECharts + Vue 3 为核心，后端以 Node.js + WebSocket 提供实时数据流。下图展示了项目的完整架构：

1.4 课程章节与知识图谱

本课程共 30 章，按“基础 → 进阶 → 实战 → 优化”四个阶段递进。下表展示了各阶段的核心内容与交付物：

1.5 项目全景：智慧工厂产线监控大屏

为了让课程内容更具实战性，我们设计了一个贯穿全课程的案例项目——智慧工厂产线监控大屏。该大屏模拟了真实工厂车间的数据监控场景，包含以下核心模块：

• 全局产值看板： 展示当日总产量、目标完成率、综合良品率。
• 产线实时状态： 以仪表盘和进度条展示各产线的运行效率与负荷。
• 质量趋势图： 折线图展示过去 24 小时良品率变化，支持阈值告警。
• 设备告警列表： 实时滚动展示设备故障、参数异常等告警事件。
• 班组排名： 柱状图对比各班组产量与质量得分。

下图展示了该大屏的最终效果布局：