值不值得学：先看你的工作场景是否真的需要它
前端可视化不是通用必修课，而是解决特定场景的硬技能。如果你日常只做中后台表单和增删改查页面，可能用不上；但只要业务里有大屏数据看板、复杂报表、金融走势图、拓扑关系图或图形编辑器需求，这门课就非常对路。它不教通用框架和基础布局，而是把 CSS、SVG、Canvas、D3 这些技术专门往绘图和动效方向讲，还拆解了 ECharts 等底层架构。对需要做数据展示页面的前端开发来说，这些是绕不开的硬骨头，学透能直接提升你在业务里的不可替代性。
资料怎么用：按基础分阶段啃，别从头顺着看
这门资料内容跨度很大，必须按基础挑着看。如果你对前端基础薄弱，建议先看 CSS 高阶技巧和 SVG 速学这两块，把二维图表的变形、动画和矢量标记语言弄懂，这能解决大部分轻量级图表需求。有了一定绘图概念后，再啃 Canvas 画布基础，接着进入柱状图、饼图和 K 线图的从零实现环节。最后，再去碰 ZRender 源码解析和 ECharts 架构分析。看理论时别光记笔记，要打开编辑器照着敲；看图表实现篇时，先暂停视频自己画一遍，卡住了再对照讲解找思路。
学完能独立做什么：从调包改参数到造轮子
把核心模块吃透后，你能独立完成几类实打实的工作。首先是脱离现成图表库，从零用 Canvas 或 SVG 手写定制化的柱状图、雷达图和金融 K 线图，解决组件库样式改不动的痛点。其次是实现思维导图、基于 Konva 的图形编辑器这类带交互的复杂应用。再者，学完源码架构篇，你不再只是调 API 的用户，而是能看懂底层渲染引擎的逻辑，遇到图表性能瓶颈或定制需求时，能自己改源码甚至造轮子。配合资料里的动效和游戏开发部分，还能顺手拿下页面粒子特效等视觉表现活儿。
从基础到高阶，全面掌握二维和三维的前端可视化开发
课程目录
* 开篇：可视化学习脉络
* 理论篇：一文聊懂可视化
* 理论篇：图表设计的神奇法则
* CSS：一文总结高阶技巧
* CSS：快速拿捏 2D、3D 图表
* SVG：矢量化标记语言速学
* SVG：动效、编辑器、图表实战
* SVG：从 0 到 1 实现思维导图
* D3 高级图表实战：柱状图、折线图
* D3 高级图表实战：饼图、雷达图
* Canvas：一文速学 HTML5 的画布
* Canvas 动效篇：实现粒子特效、曲线特效
* Canvas 图表篇：从 0 到 1 实现柱状图、饼图
* Canvas 图表篇：从 0 到 1 实现金融图表 K 线图
* Canvas 应用篇：实现 Konva 图形编辑器
* 源码篇：ZRender 源码解析
* 源码篇：ECharts 架构分析
* Canvas 游戏篇：一文入门 H5 游戏开发
* Canvas 游戏篇：上手游戏引擎 Phaser.js
* Canvas 游戏篇：从 0 到 1 开发横版卷轴游戏
* Three.js：一个简单的游戏案例带你入门
* Three.js：高级材质应用
* Three.js：实现 ECharts 官方示例 Bar3D 图表
* Three.js：实现三维建模软件
* Three.js：React Three Fiber 实践与原理
* R3F 实战篇：多人联机社交游戏
* 源码篇：Three.js 源码剖析
* Shader：一文速学 GLSL 语法
* Shader：理解图形和函数的关系
* Shader：随机性算法
* Shader：Ray Marching 光线追踪与 SDF
* Shader：模型动画的高阶技巧
* WebGL：一文速学 WebGL 基础
* WebGL：向量与矩阵应用
* WebGL：UV 纹理
* WebGL：光照模型 Phong 实现
* WebGL：图表应用
* WebGPU：面向未来的图形 API
* WebGPU：一文速学 WGSL 语法
* WebGPU：构建模型与纹理
* 结尾：路漫漫其修远兮
