VIP20

本课程属于：042-可视化分析实战 半导体工艺与制造设备 · 共 20 门相关课程，组合学习更完整。

查看所属VIP全部课程 →

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

ECharts图表实时监控大屏数据刷新与KPI看板配置

共计 30 章节

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

课程导论与项目全景

实时监控大屏的应用场景 · KPI看板核心概念 · 课程目标与项目架构总览

课程导论项目全景

ECharts基础回顾

ECharts库的引入方式 · 基本配置项（option）结构 · 渲染器选择（Canvas/SVG）

ECharts基础回顾

数据驱动与响应式设计

理解数据驱动视图 · 窗口resize自适应 · 大屏分辨率适配方案

数据驱动响应式设计

实时数据模拟与推送

使用setInterval模拟数据更… · WebSocket概念简介 · 数据推送流程设计

实时数据模拟推送

ECharts动态更新API

setOption的第二个参数（no… · 图表实例的dispose与重建 · 增量更新技巧

折线图实时刷新

动态追加数据点 · 限制数据窗口长度 · 平滑曲线与区域样式配置

折线图实时刷新动态追加数据点

柱状图实时刷新

动态更新数据系列 · 柱状图动画效果 · 堆叠柱状图的实时更新

柱状图实时刷新动态更新数据系列

饼图与环形图实时刷新

数据项动态增减 · 南丁格尔玫瑰图 · 环形图中心文本动态显示

饼图环形图实时刷新

仪表盘（Gauge）实时刷新

指针动画 · 多指针仪表盘 · 分段颜色区间配置

雷达图实时刷新

多维度KPI指标展示 · 动态更新数据项 · 填充区域样式

雷达图实时刷新KPI

散点图与热力图实时刷新

大规模数据点更新 · 散点图涟漪动画 · 热力图颜色映射

散点图热力图实时刷新

地图（Map）实时刷新

中国地图/世界地图数据加载 · 散点地图与飞行线图 · 区域颜色动态变化

KPI看板核心指标卡设计

指标卡布局（flex/grid） · 数字滚动动画（countUp.js） · 趋势箭头与状态色

KPI看板核心指标卡设…

大屏布局与栅格系统

Grid布局实现模块化 · 百分比与vw/vh单位 · 响应式断点设计

大屏布局栅格系统

CSS动画与过渡效果

关键帧动画 · 过渡效果 · 大屏背景粒子特效

数据过滤与交互筛选

点击图表联动 · 图例开关控制 · 数据钻取（drill-down）概念

数据过滤交互筛选

多图表联动与事件同步

ECharts事件系统（click · mouseover） · 图表间数据高亮联动

多图表联动事件同步

定时器管理与性能优化

requestAnimationFr… · 页面可见性API（visibilit… · 内存泄漏防范

定时器管理性能优化

数据缓存与状态管理

全局数据状态对象 · 历史数据快照 · 数据回放功能设计

数据缓存状态管理

WebSocket实战接入

Node.js简易WebSocket… · 客户端接收实时数据 · 断线重连机制

WebSocket实战接入

RESTful API轮询刷新

Axios定时请求 · 错误重试策略 · 数据增量合并

大屏主题与暗黑模式

ECharts暗黑主题配置 · CSS变量实现主题切换 · 大屏背景动效

大屏主题暗黑模式

国际化与多语言支持

i18n方案 · 数字格式化（千分位 · 单位）

国际化多语言支持

大屏安全与权限控制

前端数据脱敏 · 接口鉴权（） · 敏感指标隐藏/显示

大屏安全权限控制

大屏性能监控与调试

Chrome Performance… · ECharts渲染性能分析 · 大数据量优化策略

大屏性能监控调试

大屏导出与截图

html2canvas实现大屏截图 · ECharts图表单独导出图片 · PDF报告生成

大屏导出截图

大屏全屏与多屏展示

Fullscreen API · 多屏扩展（双屏/拼接屏） · 大屏遥控器操作

大屏全屏多屏展示

金融实时风控大屏：需求分析 · 数据流设计 · 折线图+仪表盘+地图组合实现

项目实战金融实时风控大屏

智慧工厂生产监控大屏：设备状态柱状图 · 产量折线图 · 告警列表滚动

项目实战智慧工厂生产监控…

项目总结与未来展望

课程知识点回顾 · 常见问题FAQ · ECharts 6.0新特性展望

项目总结未来展望