1. 三档技术路线
┌──────────────────────────────────────────────────────────────┐
│ A. 完全自研（框架 + 图表库 + 配置体系自己拼） │
│ 成本最高，灵活度最高。适合长期演进、强定制。 │
├──────────────────────────────────────────────────────────────┤
│ B. 框架 + 图表库（Vue/React + ECharts/AntV）✅ 主流 │
│ 工程师友好，生态厚，性价比最高。 │
├──────────────────────────────────────────────────────────────┤
│ C. 低代码大屏平台（DataV、百度 Sugar、观远、有数、帆软等） │
│ 运营/产品自助拖拽，开发量最少；定制天花板低。 │
└──────────────────────────────────────────────────────────────┘
2. A. 完全自研
适用：超大量同类大屏（>50 个）、强品牌视觉、要求把图表库改源码。
构成：
- 渲染层：Canvas 2D / WebGL（PIXI.js、Three.js）/ SVG。
- 图表层：自封装基础图元（柱、线、饼、地图）。
- 调度层：动画时间线、数据驱动更新策略。
- 配置层：自定义 Schema + 编辑器。
成本：1~2 个高级前端 + 半年起。除非业务足够大，否则不要走这条路。
3. B. 框架 + 图表库（推荐）
3.1 框架选择
| 框架 | 优势 | 劣势 |
|---|---|---|
| Vue3 | 模板直观、SFC 开发快、社区大屏模板丰富 | 大型应用 TS 类型推导比 React 弱 |
| React 18 | 状态/数据流灵活、生态广 | JSX 写大屏稍显啰嗦 |
| Svelte / Solid | 体积小、运行快 | 大屏组件库少、招人难 |
没有强偏好就 Vue3，社区大屏成熟模板（DataV-Vue3、jojojo 等）多；团队主栈是 React 就 React，别为大屏单独引入新框架。
3.2 图表库选择
| 库 | 适用 | 优势 | 劣势 |
|---|---|---|---|
| Apache ECharts | 通用 2D 图表 | 类型最全、文档好、配置驱动 | 大数据量需要自己优化 |
| AntV G2 / G2Plot | 统计图表、强语法 | 图形语法清晰、可组合 | 文档/示例不如 ECharts 直观 |
| AntV S2 | 大型透视表 | 万级行列、性能强 | 仅表格场景 |
| AntV G6 | 关系图、流程图、知识图谱 | 关系类最强 | 学习曲线陡 |
| AntV L7 | 地理空间可视化 | 与 Mapbox/AMap 融合好 | 需配地图底图 |
| AntV X6 | 流程图、ER 图 | 编辑器场景成熟 | |
| D3.js | 自定义可视化 | 极致灵活 | 上手慢、维护成本高 |
| Chart.js / Recharts | 简单图表 | 上手快 | 大屏复杂场景不够 |
| Highcharts | 商业图表 | 稳定 | 商用收费 |
默认 ECharts；遇到统计学语法（分面、统计变换）选 G2；关系/流程选 G6；地理选 L7。
3.3 3D / GIS 库选择
| 库 | 适用 | 备注 |
|---|---|---|
| Three.js | 通用 3D | 数字孪生、城市 3D、特效 |
| Babylon.js | 通用 3D | 文档/工具更工业，适合复杂引擎 |
| Cesium | 真实地球 / 时空 | 卫星、航空、影像；包大 |
| Mapbox GL JS | 矢量地图 | 海外/国内通用、样式灵活、商用计费 |
| MapLibre GL | Mapbox 开源分支 | 不想计费时用 |
| 高德/百度 JS API | 中国合规 | 政企必选 |
| deck.gl | 大数据量地理图层 | 与 Mapbox 配合，海量散点/弧线 |
| Leaflet | 轻量 2D 地图 | 老项目、简单需求 |
数字孪生场景常见栈：Cesium / Mapbox + deck.gl + Three.js（地图打底 + 大数据图层 + 自定义模型）。
3.4 配套库
| 类型 | 推荐 |
|---|---|
| 状态管理 | Pinia (Vue) / Zustand (React) |
| 动画 | GSAP（关键帧/时间轴）、anime.js、Framer Motion |
| 矢量动画 | Lottie（After Effects 导出） |
| 图标 | iconfont / SVG sprite |
| 工具 | dayjs、lodash-es、numeral、d3-format |
| 开发服务器 | Vite |
| Mock | MSW、vite-plugin-mock |
4. C. 低代码大屏平台
4.1 主流平台对比
| 平台 | 厂商 | 部署 | 特点 |
|---|---|---|---|
| 阿里 DataV | 阿里云 | SaaS / 私有化 | 模板/组件最多、生态成熟、按量计费 |
| 百度 Sugar BI | 百度智能云 | SaaS / 私有化 | 与百度生态融合、AI 分析 |
| 观远 BI | 观远 | 私有化 | 强 BI 路线，大屏是子能力 |
| 网易有数 | 网易 | 私有化 | 偏 BI |
| 帆软 FineReport / FineVis | 帆软 | 私有化 | 报表起家、政企渗透深 |
| DataV.GeoAtlas / 灯果数据 | 多家 | SaaS | 偏轻量演示 |
| 腾讯云 RayData | 腾讯云 | SaaS | 3D/数字孪生场景强 |
| 开源：DataEase、Metabase、Superset | 开源 | 私有化 | 定制成本低、视觉一般 |
4.2 选低代码的判断
✅ 适合：
- 业务部门要自助配看板，开发资源紧。
- 看板生命周期短（汇报、活动、临时）。
- 数据源标准（数据库、Excel、API）。
❌ 不适合：
- 7×24 监控（自恢复、告警链路无法掌控）。
- 极致视觉（领导汇报型，平台模板风格固定）。
- 强定制交互（拖拽、联动、跳转规则复杂）。
4.3 低代码 + 自研混合
常见做法：低代码做日常看板、自研做对外汇报与监控大屏。两者用同一套数据接口，皮肤主题一致。这是企业最划算的组合。
5. 选型决策树
是否需要拖拽自助？
├─ 是 → 选低代码 (C)，或自研 Schema 驱动 (B 进阶)
└─ 否
└─ 单纯展示？
├─ 视觉极致 / 一次性汇报 → B（Vue/React + ECharts + Three.js + GSAP）
├─ 7×24 监控 → B（Vue/React + ECharts + WebSocket + Electron）
└─ GIS / 3D 数字孪生 → B（Mapbox/Cesium + deck.gl + Three.js）
6. 反模式
- 用 D3 做整屏大屏：除非有专属可视化工程师，否则维护成本爆。
- 用 Highcharts 做 ToB 项目却没买 license：合规风险。
- 用低代码做 7×24 监控：自恢复、告警、降级没法接入。
- 同时引入 ECharts + AntV G2 + Chart.js：包体翻倍、风格漂移；选一个为主。
