本课程是面向前端开发工程师、数据分析师及可视化爱好者的“交互式可视化赋能体系”，聚焦可视化基础、ECharts生态、D3.js开发、AntV系列、地图可视化、实时数据、大屏工程七大核心领域。课程完整覆盖从渲染原理→图表配置→定制开发→动态交互→实时数据→工程落地的全链路能力栈，每个技术模块均绑定主流可视化开发库及工程框架，帮助学员建立从“静态图表”到“动态交互”再到“大屏工程”的能力跃迁。学员可根据自身技术基础与项目需求，自主选修任一专题，各专题独立成章。
培训目标：帮助学员建立Web可视化开发的底层认知，理解SVG/Canvas/WebGL三种渲染技术的核心差异与适用场景，掌握浏览器渲染原理及性能优化基础，为后续工具库学习奠定理论基础。
|
模块 |
主要培训内容 |
软件工具 |
|
SVG矢量图形 |
SVG DOM结构、基本形状、路径绘制、文本与图像、样式与动画 |
浏览器开发者工具、SVG编辑器 |
|
Canvas像素渲染 |
Canvas 2D上下文、绘图API、状态管理、像素操作、性能特性 |
浏览器开发者工具 |
|
WebGL三维渲染 |
WebGL基础概念、着色器编程、三维变换、GPU加速原理 |
Three.js、浏览器开发者工具 |
|
渲染技术对比 |
SVG/Canvas/WebGL适用场景对比、性能测试方法、选型决策树 |
性能测试工具 |
|
浏览器渲染原理 |
渲染流水线、重绘与回流、层合成、帧率优化 |
Chrome DevTools Performance |
|
可视化性能优化 |
大数据渲染策略、防抖节流、离屏渲染、虚拟滚动 |
性能分析工具 |
|
工程实践 |
三种渲染技术实现同一图表的性能对比测试 |
浏览器开发者工具 + 示例代码 |
前置要求：HTML/CSS/JavaScript基础
培训目标：使学员系统掌握Apache ECharts这一国产主流可视化库的核心功能，精通图表配置、数据集声明、响应式适配、主题定制等高级特性，能够快速构建企业级数据可视化应用。
|
模块 |
主要培训内容 |
软件工具 |
|
ECharts架构认知 |
库设计理念、核心组件体系、初始化与销毁、事件系统 |
Apache ECharts |
|
图表配置体系 |
系列配置、坐标系配置、组件配置、多系列混合 |
ECharts官方示例 |
|
数据集声明 |
dataset数据集、维度与指标、数据转换、源格式支持 |
ECharts数据集功能 |
|
响应式适配 |
容器尺寸监听、自适应配置、移动端适配、百分比布局 |
ECharts响应式工具 |
|
主题定制 |
内置主题应用、自定义主题、主题构建工具、动态切换 |
ECharts主题构建器 |
|
动画与交互 |
初始动画、数据更新动画、状态切换、图形交互事件 |
ECharts动画配置 |
|
扩展组件 |
视觉映射、数据区域缩放、工具箱、提示框组件 |
ECharts组件库 |
|
工程实践 |
企业级数据看板的多图表集成与主题定制 |
ECharts + Vue/React |
前置要求：专题一
培训目标：使学员深入理解D3.js的核心理念与编程范式，精通选择集、数据绑定、比例尺、图形绘制、动画过渡等核心技术，能够实现高度定制化的数据可视化作品。
|
模块 |
主要培训内容 |
软件工具 |
|
D3核心理念 |
数据驱动文档思想、链式语法、模块化设计、版本差异 |
D3.js库 |
|
选择集与操作 |
select/selectAll、元素操作、属性/样式/文本设置、类操作 |
D3选择器 |
|
数据绑定 |
datum与data方法、enter/exit/update模式、数据连接原理 |
D3数据绑定 |
|
比例尺 |
线性比例尺、序数比例尺、时间比例尺、颜色比例尺 |
D3-scale模块 |
|
坐标轴 |
轴生成器、轴配置、刻度定制、多轴协同 |
D3-axis模块 |
|
图形绘制 |
简单图形、线生成器、区域生成器、弧生成器、符号生成器 |
D3-shape模块 |
|
布局与地理 |
饼图布局、力导向图布局、堆叠布局、地图投影 |
D3布局模块 |
|
动画过渡 |
过渡方法、缓动函数、延迟与持续时间、插值器 |
D3-transition模块 |
|
工程实践 |
基于D3的自定义可视化组件开发 |
D3.js + 现代前端框架 |
前置要求：专题一、JavaScript进阶
培训目标：使学员掌握蚂蚁集团AntV系列可视化库的完整生态，精通G2统计图表、G6图可视化、F2移动端等工具的应用，能够根据不同场景选择最优解决方案。
|
模块 |
主要培训内容 |
软件工具 |
|
AntV生态全景 |
G2/G6/F2/L7/X6定位与适用场景、设计语言、技术架构 |
AntV官网、GitHub |
|
G2统计图表 |
数据驱动语法、几何标记、统计变换、视图合成、交互语法 |
AntV G2 |
|
G2进阶特性 |
多视图合成、自定义形状、动态数据、仪表板集成 |
G2扩展能力 |
|
G6图可视化 |
图基础概念、节点与边、布局算法、交互事件、动画配置 |
AntV G6 |
|
G6高级应用 |
自定义节点/边、图算法集成、大规模图渲染、图分析 |
G6高级功能 |
|
F2移动端 |
轻量级设计、移动端适配、手势交互、Canvas/WebGL双引擎 |
AntV F2 |
|
L7地理可视化 |
地理数据可视化、点线面渲染、3D地图、动态轨迹 |
AntV L7 |
|
工程实践 |
复杂关系网络的可视化分析与呈现 |
G6 + Vue/React |
前置要求：专题一
培训目标：使学员掌握地理空间数据的可视化方法，精通ECharts GL、Mapbox等地图库的应用，能够实现迁徙图、热力图、三维地图等复杂地理可视化效果。
|
模块 |
主要培训内容 |
软件工具 |
|
地理可视化基础 |
地理坐标系统、地图投影、GeoJSON格式、瓦片地图原理 |
地理数据工具 |
|
ECharts GL三维 |
三维地图配置、建筑纹理、光照效果、视角控制 |
ECharts GL |
|
迁徙图实现 |
飞线图配置、轨迹动画、数据格式、动态效果 |
ECharts GL |
|
热力图绘制 |
热力图数据格式、半径设置、模糊参数、颜色梯度 |
ECharts GL/Leaflet |
|
Mapbox GL应用 |
地图样式定制、矢量瓦片、数据驱动样式、交互控制 |
Mapbox GL JS |
|
地理数据可视化 |
点聚合、等值线、区域着色、时空轨迹 |
Mapbox + Turf.js |
|
三维地形 |
地形瓦片、高程数据、阴影效果、倾斜摄影 |
Cesium.js |
|
工程实践 |
城市交通流量/人口迁徙的地理可视化大屏 |
ECharts GL + Mapbox |
前置要求：专题二/三
培训目标：使学员掌握实时数据流的可视化技术，精通WebSocket通信、动态图表更新、流式数据处理等核心能力，能够构建股票行情、设备监控等实时可视化应用。
|
模块 |
主要培训内容 |
软件工具 |
|
实时数据架构 |
轮询与长连接对比、WebSocket协议、消息推送模式 |
Socket.io、WebSocket API |
|
WebSocket集成 |
客户端连接、事件监听、消息收发、重连机制 |
Socket.io客户端 |
|
动态图表更新 |
数据追加、数据替换、移位更新、动画过渡 |
ECharts/D3更新方法 |
|
流式图表 |
实时折线图、K线图、仪表盘、水位图 |
ECharts流式示例 |
|
数据缓冲区 |
环形缓冲区设计、滑动窗口、数据降采样 |
自定义实现 |
|
性能优化 |
高频更新节流、增量渲染、离屏优化 |
性能调试工具 |
|
断线重连 |
连接检测、心跳机制、数据补偿、状态恢复 |
Socket.io高级配置 |
|
工程实践 |
实时股票行情/设备监控可视化看板 |
Socket.io + ECharts |
前置要求：专题二、Node.js基础
培训目标：使学员掌握企业级可视化大屏的完整工程化开发方法，精通大屏架构设计、组件化开发、多屏适配、性能优化等核心技术，能够交付生产级别的可视化大屏项目。
|
模块 |
主要培训内容 |
软件工具 |
|
大屏架构设计 |
大屏系统分层架构、数据流设计、模块划分、技术选型 |
架构设计工具 |
|
组件化开发 |
可视化组件封装、属性暴露、事件通信、复用策略 |
Vue/React + ECharts |
|
多屏适配方案 |
视口单位、rem适配、scale缩放、多分辨率兼容 |
响应式设计工具 |
|
主题与品牌 |
动态主题切换、企业色嵌入、字体系统、品牌元素 |
CSS变量/主题工具 |
|
数据对接 |
RESTful API集成、定时刷新、WebSocket混合、Mock数据 |
Axios、Mock.js |
|
性能优化 |
首屏加载优化、按需渲染、虚拟滚动、内存管理 |
Lighthouse、性能工具 |
|
部署与运维 |
打包构建、CDN加速、监控告警、版本回滚 |
Webpack、Nginx |
|
工程实践 |
完整的企业级可视化大屏项目开发 |
Vue/React + ECharts + 地图库 |
前置要求：专题二/五/六
培训目标：使学员掌握可视化交互设计的核心原则与方法，精通悬停提示、筛选联动、钻取分析、历史记录等交互模式，能够提升可视化应用的用户体验与探索分析能力。
|
模块 |
主要培训内容 |
软件工具 |
|
交互设计原则 |
施耐德曼交互原则、即时响应、渐进呈现、用户控制 |
交互设计工具 |
|
悬停与提示 |
Tooltip定制、数据详情展示、高亮关联、自定义内容 |
ECharts/D3交互事件 |
|
筛选与联动 |
图表间联动、全局过滤器、点击筛选、范围选择 |
ECharts联动配置 |
|
钻取分析 |
层级下钻、上卷返回、钻取路径、数据粒度切换 |
自定义实现 |
|
缩放与平移 |
数据区域缩放、漫游导航、概览视图、重置控制 |
ECharts数据区域缩放 |
|
历史记录 |
操作历史、前进/后退、状态快照、分享链接 |
状态管理工具 |
|
键盘辅助 |
快捷键设计、焦点管理、无障碍访问 |
辅助功能规范 |
|
工程实践 |
支持多维度钻取与联动的交互式数据分析应用 |
ECharts + 状态管理 |
前置要求：专题二
培训目标：使学员掌握可视化中的动画与叙事设计方法，精通过渡动画、时间轴叙事、故事点串联等高级技巧，能够构建具有情节性和引导性的数据叙事可视化。
|
模块 |
主要培训内容 |
软件工具 |
|
动画设计原理 |
缓动函数、动画时长、时序编排、视觉引导 |
动画设计工具 |
|
过渡动画 |
数据更新动画、状态切换动画、入场动画、离场动画 |
D3过渡、ECharts动画 |
|
时间轴叙事 |
时间滑块设计、时序数据播放、速率控制、时间标注 |
ECharts时间轴组件 |
|
故事点串联 |
分步引导、场景切换、视点控制、故事线设计 |
自定义实现 |
|
可视化讲解 |
注释系统、焦点引导、语音合成、自动演示 |
多媒体工具 |
|
情感化设计 |
色彩情感、形态度量、隐喻表达、文化适配 |
设计工具 |
|
工程实践 |
带叙事引导的数据故事可视化作品 |
D3 + 动画库 |
前置要求：专题三/七
培训目标：使学员深入理解可视化开源生态，掌握可视化库的二次开发、自定义组件封装、贡献社区等进阶能力，能够参与开源项目并构建团队可视化资产库。
|
模块 |
主要培训内容 |
软件工具 |
|
开源生态认知 |
Apache 2.0/MIT协议、主流库源码结构、社区治理模式 |
GitHub |
|
ECharts扩展开发 |
自定义系列开发、自定义组件、主题插件、扩展包发布 |
ECharts扩展API |
|
D3模块化开发 |
D3模块组合、自定义布局、自定义形状、npm发布 |
D3 + npm |
|
可视化组件库 |
组件设计规范、Storybook文档、单元测试、版本管理 |
Storybook、Jest |
|
源码调试 |
源码构建、断点调试、性能分析、提交PR |
Chrome DevTools |
|
技术选型评估 |
功能对比、性能基准、社区活跃度、维护周期 |
选型评估工具 |
|
团队资产沉淀 |
组件库建设、文档系统、示例集合、最佳实践 |
内部npm + 文档站 |
|
工程实践 |
团队可视化组件库的规划与MVP实现 |
Storybook + npm + 文档工具 |
前置要求：专题二/三
|
学员角色 |
建议选修专题 |
核心软件工具链 |
学习目标 |
|
前端入门开发者 |
专题一 + 专题二 |
ECharts + 浏览器工具 |
掌握基础可视化库，快速构建图表应用 |
|
中高级前端工程师 |
专题三 + 专题四 + 专题八 |
D3 + AntV + 交互设计 |
精通定制化开发与复杂交互实现 |
|
数据分析师/数据产品 |
专题二 + 专题五 + 专题九 |
ECharts + Mapbox |
掌握多维度数据可视化与叙事表达 |
|
大屏开发工程师 |
专题二 + 专题五 + 专题七 |
ECharts + Vue/React + 地图库 |
精通大屏工程实践，交付企业级项目 |
|
实时监控系统开发者 |
专题六 + 专题二 |
Socket.io + ECharts |
掌握实时数据流可视化技术 |
|
地理信息开发者 |
专题五 + 专题一 |
Mapbox + ECharts GL |
精通地理数据可视化与三维地图 |
|
可视化架构师/技术负责人 |
专题七 + 专题十 + 专题八 |
工程化工具 + 开源生态 |
构建团队可视化能力，主导技术选型与资产沉淀 |
|
数据新闻/媒体从业者 |
专题九 + 专题三 |
D3 + 动画库 |
掌握数据叙事与故事化表达 |
|
可视化专职团队 |
全十专题（按需组合） |
全工具链覆盖 |
建立完整交互式可视化知识体系，成为团队核心力量 |
体系特色：
✅ 完整工具链覆盖：ECharts、D3.js、AntV、Mapbox四大主流可视化库独立成专题，适应不同开发需求
✅ 选修机制灵活：专题独立成章，按技术方向精准匹配工具链，支持“点单式”培训采购
