a27e3b8e43
Optimized the root .gitignore to exclude virtual environments, node modules, and temp folders to ensure clean and lightweight version tracking. Co-authored-by: Cursor <cursoragent@cursor.com>
1.9 KiB
1.9 KiB
默认图表库推荐
使用时机：仅在用户未指定图表库 且 项目中无现有图表方案时使用。
📊 推荐列表
| 图表库 | 推荐理由 | 核心优劣 | 适用场景 |
|---|---|---|---|
| Recharts | 🌟 首选通用方案 React 原生，组件化极好，代码最干净。 |
✅ 组件化设计，代码简洁 ✅ React 原生，易于集成 ⚠️ 复杂交互（3D、地理）支持较弱 |
常规折线、柱状、面积图。 兜底必选。 |
| Tremor | Tailwind 绝配 专为 Dashboard 设计，样式极美，开箱即用。 |
✅ API 极简，上手快 ✅ 与 Tailwind 完美融合 ⚠️ 定制性低，仅支持预设图表类型 |
现代 SaaS 风格的 KPI 面板、统计卡片。 |
| Ant Design Charts (@ant-design/plots) |
B 端业务神器 基于 G2，交互强，默认样式符合国内审美。 |
✅ 图表类型丰富，交互强 ✅ 国内 B 端审美 ⚠️ 包体积大，非 React 原生 (Canvas) ⚠️ 需锁定 v2 版本避免混淆 |
后台管理系统，复杂漏斗图、桑基图。 |
| ECharts (echarts-for-react) |
重型全能王 图表类型最全（地图/3D），渲染性能最强。 |
✅ 图表类型最全，性能强 ✅ 文档和示例丰富 ⚠️ 难与 Tailwind 融合 ⚠️ 配置项繁琐 |
数据大屏、复杂的地理可视化、炫酷特效。 |
🎯 选择策略
按需匹配：
- 没想好/通用场景 → 直接用 Recharts
- 需要漂亮的 Dashboard → 用 Tremor
- 国内 B 端后台 → 用 Ant Design Charts
- 需要地图/3D/大屏 → 用 ECharts
📦 安装命令
# Recharts (推荐默认安装)
pnpm add recharts
# Tremor
pnpm add @tremor/react
# Ant Design Charts
pnpm add @ant-design/plots
# ECharts
pnpm add echarts echarts-for-react