Mdeical_Sur_Report/工程分析/实现方案-2026-04-19-00-33-44.md

实现方案 —— 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 天模式的显示效果必须保持完全不变。