4.5 项目实战：数据看板 Dashboard

难度：⭐⭐⭐ | 预计时间：2 小时 | 技术栈：React + ECharts/Recharts

学习目标

• 用截图/描述让 AI 还原设计稿
• 图表组件的生成和调整
• 响应式布局适配
• 模拟数据到真实 API 对接

---

项目需求

一个展示销售数据的可视化看板：

• 顶部关键指标卡片（总销售额、订单数、客户数、转化率）
• 折线图：月度销售趋势
• 柱状图：产品分类销售对比
• 饼图：地区销售占比
• 数据表格：最近订单列表

实施步骤

1. 描述设计稿

用 React + Recharts 创建一个销售数据看板。

布局要求：
- 顶部一排 4 个关键指标卡片
- 中间左侧折线图（月度趋势），右侧柱状图（分类对比）
- 下方左侧饼图（地区占比），右侧数据表格（最近订单）
- 深色主题，科技感风格
- 完全响应式，手机上改为单列布局

先用模拟数据，后续对接真实 API。

2. 逐步调整图表样式

生成后，对不满意的图表逐个调整：

把折线图改成渐变填充面积图，颜色用蓝色系

柱状图加上数值标签，显示在柱子顶部

3. 对接真实 API

把模拟数据替换为从 /api/dashboard 接口获取。
添加加载状态和错误处理。

学到了什么

• [x] 用自然语言描述 UI 设计
• [x] 图表库的 AI 辅助配置
• [x] 响应式布局开发
• [x] 模拟数据到真实 API 的切换