VIP20

本课程属于：043-OLAP分析引擎 数据工程与实时数据平台 · 共 20 门相关课程，组合学习更完整。

查看所属VIP全部课程 →

← 返回所属目录咨询 / 购买

OLAP实时指标可视化看板开发

📚 共计 30 章节

点击此处阅读海量试读课程：100+行业、1000+细分领域

课程导学与项目全景

实时指标看板能解决什么问题？课程目标、技术栈选型（Vue3 + ECharts + WebSocket + Node.js）、项目整体架构图。

开发环境搭建

安装Node.js、Vue CLI、创建Vue3项目、配置ESLint和Prettier、初始化Git仓库。

Vue3核心基础（一）

Composition API（setup、ref、reactive）、模板语法、事件处理。

Vue3Composition API

Vue3核心基础（二）

计算属性（computed）、侦听器（watch）、生命周期钩子（onMounted等）。

计算属性侦听器

Vue3核心基础（三）

组件通信（props、emit、provide/inject）、插槽（slot）。

组件通信插槽

Vue Router实战

安装与配置路由、嵌套路由、编程式导航、路由守卫（权限控制）。

路由导航守卫

Pinia状态管理

安装Pinia、定义Store（Option Store vs Setup Store）、在组件中使用Store、Actions与Getters。

Pinia状态管理

ECharts简介、安装与引入、核心概念（option、series、xAxis、yAxis）、绘制第一个图表（折线图）。

ECharts折线图

ECharts进阶（一）

柱状图、饼图、散点图的配置与美化、调色板与主题定制。

柱状图饼图主题

ECharts进阶（二）

时间轴（timeline）、数据区域缩放（dataZoom）、图表交互（tooltip、legend）。

时间轴交互

ECharts高级技巧

多图表联动、图表自适应（resize）、大数据量优化（sampling）。

WebSocket基础

HTTP与WebSocket的区别、WebSocket握手过程、浏览器端WebSocket API。

WebSocket协议

Node.js后端搭建（一）

初始化Express项目、搭建基本服务器、配置CORS、创建WebSocket服务（ws库）。

ExpressWebSocket

Node.js后端搭建（二）

设计RESTful API接口（获取历史数据、配置项）、连接MySQL/Redis（模拟数据源）。

前后端联调（一）

前端通过Axios调用后端API、处理跨域问题、封装请求模块。

前后端联调（二）

前端建立WebSocket连接、接收实时推送数据、数据格式约定与解析。

实时数据WebSocket

看板布局设计

使用CSS Grid/Flexbox搭建看板主体框架、响应式设计（适配不同屏幕尺寸）。

布局响应式

核心看板组件开发（一）

开发「实时流量监控」卡片（折线图 + 数字滚动效果）。

流量监控数字滚动

核心看板组件开发（二）

开发「系统健康状态」卡片（环形图 + 状态指示灯）。

健康状态环形图

核心看板组件开发（三）

开发「Top 10 错误列表」卡片（表格 + 实时更新动画）。

错误列表实时更新

核心看板组件开发（四）

开发「地理分布地图」卡片（ECharts地图 + 散点图）。

地图散点图

数据模拟与Mock

使用Mock.js生成模拟数据、编写Node.js定时任务推送模拟数据。

Mock模拟数据

性能优化（一）

虚拟滚动（针对长列表）、组件懒加载、ECharts实例复用与销毁。

虚拟滚动懒加载

性能优化（二）

WebSocket心跳检测与断线重连、数据节流与防抖、内存泄漏排查。

心跳检测节流防抖

用户体验增强

加载骨架屏、空状态与错误状态处理、Toast通知、全屏模式。

单元测试（Vitest）、组件测试（Vue Test Utils）、E2E测试（Cypress）入门。

构建与部署

Vue3项目构建（vite build）、部署到Nginx、配置反向代理与SSL证书。

使用GitHub Actions实现自动化测试、构建与部署。

CI/CDGitHub Actions

监控与告警

接入Sentry进行错误监控、自定义性能指标上报、配置告警规则。

课程总结与扩展

项目复盘、常见面试题解析、扩展方向（移动端适配、大屏展示、AI辅助分析）。