35 lines
1.5 KiB
Markdown
35 lines
1.5 KiB
Markdown
# 实现方案 —— 2026-04-19-00-33-44
|
||
|
||
## 方案目标
|
||
解决 30 天趋势图表过密问题，通过稀疏化标签 + Tooltip 提升可读性。
|
||
|
||
## 修改点
|
||
|
||
### 修改文件：`src/pages/Dashboard.tsx`
|
||
|
||
1. **条件渲染数据点和数值**：在 SVG 的 `points.map()` 中，对圆点和数值文本增加条件判断：
|
||
- 7 天模式：正常显示圆点和数值
|
||
- 30 天模式：不显示圆点和数值文本（仅保留折线和面积图）
|
||
|
||
2. **稀疏化 X 轴标签**：
|
||
- 7 天模式：每天显示标签
|
||
- 30 天模式：每隔 5 天显示一次标签（`i % 5 === 0`）
|
||
|
||
3. **SVG 鼠标事件与 Tooltip**：
|
||
- 在图表容器上绑定 `onMouseMove` 和 `onMouseLeave`
|
||
- 计算鼠标在 SVG 坐标系中的相对位置，映射到最近的数据点索引
|
||
- 用 React state 管理 `tooltipData: { index, x, y, visible }`
|
||
- 用绝对定位的 div 渲染 Tooltip，显示日期和数值
|
||
|
||
4. **透明捕获层**：在 SVG 中增加一个覆盖整个图表区域的透明 `<rect>`，确保鼠标在空白区域也能触发事件。
|
||
|
||
## 涉及文件及修改点
|
||
| 文件 | 修改点 |
|
||
|------|--------|
|
||
| `src/pages/Dashboard.tsx` | 条件渲染 circle/text、标签稀疏化、Tooltip state、SVG 鼠标事件、透明捕获层 |
|
||
|
||
## 风险与注意事项
|
||
1. Tooltip 坐标计算需考虑 SVG 的 viewBox 到屏幕像素的映射比例。
|
||
2. 鼠标移出 SVG 区域时必须隐藏 Tooltip。
|
||
3. 7 天模式的显示效果必须保持完全不变。
|