大屏图表选型与定制化开发实战 · 课程目录

大屏可视化概述

什么是大屏可视化 · 智慧城市/企业驾驶舱/运维监控 · 设计原则

图表选型基础

折线图/柱状图/饼图/散点图/地图 · 选型决策树

简介 · CDN/npm 安装 · Hello World 图表

ECharts 核心概念

option · series · xAxis/yAxis · grid · tooltip · legend

ECharts 数据加载

静态/动态数据 · Ajax/WebSocket · dataset · 格式转换

ECharts 交互与动画

悬停/点击事件 · animation · 数据更新动画

ECharts 高级图表

雷达图 · 仪表盘 · 桑基图 · 关系图 · 树图

ECharts 地图可视化

中国/省市地图 · GeoJSON · 散点地图 · 热力图

ECharts 性能优化

大数据量渲染 · sampling/large · 销毁重建 · 内存泄漏

G2 简介与安装 · 与 ECharts 对比 · 第一个实例

AntV G2 图表实战

折线图/柱状图/饼图 · 图形语法理解

AntV G2 高级特性

分面 · 多图层 · 自定义 Shape · 动画与交互

AntV L7 地理可视化

L7 简介 · 点/线/面图层 · 3D 地图可视化

数据驱动 DOM · 选择集与绑定 · 比例尺与坐标轴

D3.js 图表实战

柱状图 · 折线图 · 力导向图

D3.js 高级技巧

过渡动画 · 拖拽交互 · 缩放平移 · 自定义布局

Three.js 3D 入门

场景/相机/渲染器 · 基本几何体

Three.js 3D 图表实战

3D 柱状图 · 3D 散点图 · 3D 地球

大屏布局设计

栅格系统 · Flex/Grid · rem/vw/vh 适配

大屏主题与样式

深色主题 · CSS 变量 · 字体与图标

大屏数据对接

RESTful API · WebSocket · Mock.js 模拟

大屏性能优化

Canvas vs SVG · 虚拟滚动 · 数据降采样 · Web Worker

大屏交互设计

钻取 · 联动 · 筛选器 · 轮播

大屏动效设计

CSS 动画 · GSAP · 入场动效 · 背景动效

大屏组件化开发

React/Vue 图表封装 · 组件通信 · 状态管理

大屏工程化

Webpack/Vite · 代码分割 · 按需加载 · 环境变量

大屏测试与调试

Chrome DevTools · Lighthouse · 单元测试

大屏部署与运维

Nginx · CDN · Docker · 监控告警

大屏项目实战 (上)

需求分析 · 技术选型 · 架构设计 · 原型设计

大屏项目实战 (下)

编码实现 · 联调测试 · 部署上线 · 复盘