📚 课程目录第1章课程导学与项目全景

一、课程导学与项目全景：实时指标看板能解决什么问题？

大家好，欢迎来到《实时指标看板：从开发到上线实战课程》。我是这门课的主讲，一个在数据可视化领域摸爬滚打了好几年的前端工程师。

先聊聊这门课要做什么。说白了，我们要一起从零到一，搭建一个真正能用的实时指标看板。不是那种只展示静态数据的 Demo，而是能跟后端保持长连接、数据秒级刷新、图表动态变化的实战项目。

你想想看，传统的数据报表长什么样？打开页面，看到的是昨天甚至上周的数据。对于运营同学来说，这够用了。但对于监控系统、交易大盘、直播数据大屏这些场景，延迟几分钟可能就意味着损失。

我印象很深，之前给一家电商公司做双十一大屏。运营总监盯着屏幕问：「这个 GMV 数据怎么还是 10 分钟前的？」当时用的是定时轮询，每 30 秒请求一次接口。结果流量一上来，接口响应变慢，数据延迟越来越严重。嗯，那次之后，我彻底转向了 WebSocket 方案。

实时指标看板的核心价值就三点：

一句话总结：实时看板解决的是「数据新鲜度」和「系统吞吐量」之间的矛盾。轮询是「你问我答」，WebSocket 是「有变化我告诉你」。

这门课不是纯理论，也不是只讲 API 怎么用。我的目标是让你学完后，能独立完成一个生产级别的实时看板项目。具体来说：

我的建议：如果你对 Vue3 还不熟，别担心。前几章我会带着你过一遍核心概念。但如果你完全没接触过 JavaScript 和 Node.js，建议先补一下基础。

选技术栈这件事，我个人的习惯是「够用就好，不追新」。这套组合我用了两年多，在多个项目中验证过，稳定且高效。

技术	版本	选型理由
Vue 3	3.4+	组合式 API 让逻辑复用更干净，响应式系统天然适合数据驱动视图
ECharts	5.5+	国内最成熟的可视化库，文档全、社区大、图表类型丰富
WebSocket	原生 API	浏览器原生支持，没有额外依赖，配合 ws 库后端实现简单
Node.js	20 LTS	前后端统一语言，开发效率高，生态成熟
Vite	5.x	构建速度快，热更新体验好，Vue3 官方推荐

为什么不用 React？不是 React 不好，而是 Vue3 的响应式系统在处理实时数据流时，心智负担更低。你想想看，数据一变，视图自动更新，不需要手动 setState 或者 dispatch。这一点在频繁更新的场景下特别舒服。

注意：ECharts 5.5 版本开始，部分旧版 API 被标记为废弃。我会在课程中使用最新的推荐写法，但如果你用的是旧版本，代码可能需要微调。

下面这张图，是整个项目的骨架。我建议你多看几遍，后面每一章都会对应到图中的某个模块。

这张图展示了完整的数据流向。从最底部的数据源开始，经过后端聚合处理，通过 WebSocket 推送到前端，最终渲染成图表。每一层都有明确的职责，这也是我推荐的分层架构思路。

30 章的内容，我把它分成了 5 个阶段：

每个阶段结束，我都会安排一个综合练习。不是那种「照着敲一遍」的练习，而是给你一个需求，让你自己动手实现。代码仓库里会有参考答案，但我建议你先自己试试。

一个小建议：别急着往后翻。把架构图存下来，每学完一章，回来看看你学到的东西在图中哪个位置。这样学完 30 章，你脑子里会有一张完整的知识地图。

工欲善其事，必先利其器。我建议你提前装好这些：