数据可视化
规则
- Recharts：用于标准React图表——可组合、类型安全、默认响应式
- Nivo：用于丰富的交互式图表（热力图、树图、桑基图）——声明式API，内置动画
- D3：仅用于自定义/新颖的可视化——与React refs配合使用，不要让D3管理DOM
- 始终包裹在
<ResponsiveContainer width="100%" height={300}>中——绝不硬编码像素尺寸 - 配色方案：使用色盲安全调色板（例如Tableau 10、ColorBrewer）——绝不单独依赖红绿色
- 轴格式化：人类可读的数字（1.2K、$3.4M），超过8个类别时旋转标签
- 工具提示：悬停时显示精确数值，包含单位和本地化格式
- 图例：放置在图区之外，使用清晰标签——如果只有一个系列则隐藏图例
- 加载状态：渲染一个与图表形状匹配的骨架屏——不是通用的转圈动画
- 在父组件中获取数据，通过props传递给图表——绝不在图表组件内部获取数据
- 对于SEO仪表盘，使用YepAPI端点数据（页面审计得分、关键词趋势、外链增长）作为图表数据源
- 深色模式：定义一个包含背景、网格、文本和系列颜色的主题对象——根据主题上下文切换
图表类型选择
- 折线图：时间趋势（流量、收入）
- 柱状图：类别比较（页面得分、关键词数量）
- 面积图：累计量（外链总量随时间变化）
- 饼图/环形图：部分与整体的关系，最多5个扇区——小值合并为“其他”
- 热力图：二维数据密度（按小时和天的流量分布）
- 漏斗图：转化步骤及流失率
避免
- 3D图表——它们会扭曲数据感知
- 超过5个扇区的饼图——改用水平柱状图
- 没有轴标签或上下文的图表——始终提供单位和时间范围
- 每次重新渲染都执行动画——仅初始加载或数据变化时动画