定位：图表的第一目标是准确，不是好看

一张误导的图表比没有图表更糟。 所有选型和样式决策都要先过这一关。

一、图表选型决策树

你的数据要回答什么问题？
│
├─ 随时间怎么变？              → 折线图 / 面积图
├─ 各项之间谁大谁小？          → 柱状图（横向或纵向）
├─ 各部分占整体的比例？        → 堆叠柱 / 环形图（饼图慎用）
├─ 数据分布长什么样？          → 直方图 / 箱线图 / 散点图
├─ 两个变量有关系吗？          → 散点图
├─ 多层级占比？                → 矩形树图 / 旭日图
├─ 流程与转化？                → 漏斗图
└─ 单一核心指标？              → 大数字 + 迷你趋势线（不要图表）

各类型的硬约束

为什么饼图要限制在 5 类以内

人眼对角度差异的分辨能力很差。6 个以上的扇区，用户只能靠颜色和标签去对，读不出比例差异。

超过 5 类时：

• 前 4 类 + 「其他」合并
• 或改用横向条形图（长度比角度好判断得多）

二、必须避免的误导

三、色板

3.1 三类色板，各管一件事

3.2 推荐色板（色盲友好）

分类色（8 色，基于 Okabe-Ito，色盲安全）：
#0072B2  蓝
#E69F00  橙
#009E73  绿
#CC79A7  紫红
#56B4E9  浅蓝
#D55E00  朱红
#F0E442  黄
#999999  灰

不要用红绿对比做主色区分（红绿色盲占男性 8%）。

3.3 语义色（固定含义，不要乱用）

语义色不能用于分类——红色永远表示"坏"，不能拿来当"系列 3"。

3.4 系列数量与颜色

四、坐标轴与网格

五、数字与单位

不要在同一张图里混用「1.2万」和「12000」。

六、三态：空、加载、错误

6.1 空数据

{data.length === 0 ? (
  <Empty
    description={hasFilter ? '没有符合条件的数据，试试调整筛选' : '暂无数据'}
    style={{ height: chartHeight, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
  />
) : <Chart ... />}

必须占住图表高度，否则加载完成时布局会跳（见 async-loading-stability）。

区分两种空：

• 从没有数据 → 「暂无数据」
• 筛选后无结果 → 「没有符合条件的数据」

6.2 加载中

• 用骨架画出坐标轴和网格，不要用 spinner 盖住空白
• 或者用图表容器的 loading 遮罩（保留上一次的数据更有连续性）

6.3 出错

<Result status="error" title="数据加载失败" subTitle={err.message}
        extra={<Button onClick={refetch}>重试</Button>} />

6.4 数据不完整

部分数据缺失时（比如某天接口失败）：

• 不要把缺失点当 0（会画出假的下跌）
• 折线图用 connectNulls: false，让线断开
• 或加视觉标记（虚线那段表示估算）

七、响应式与深色模式

7.1 响应式

// 用 ResizeObserver，不要用 window.resize
const ref = useRef<HTMLDivElement>(null)
const [width, setWidth] = useState(0)
useEffect(() => {
  const ro = new ResizeObserver(([e]) => setWidth(e.contentRect.width))
  ro.observe(ref.current!); return () => ro.disconnect()
}, [])

图表宽度必须跟随容器，不要写死 width={800}。

容器宽度 < 480 时：

• 图例移到下方
• X 轴标签间隔加大
• 考虑切换为更简单的图表类型

7.2 深色模式

// 色板要为深色单独准备，不要把浅色模式的颜色直接反色
const palette = isDark ? darkPalette : lightPalette

深色下：

• 背景色 #141414，网格线 #303030
• 亮色系列要降饱和，否则刺眼
• 文字用 #d9d9d9 而非纯白

八、可访问性

• 不要只靠颜色区分系列：加线型（实线/虚线）、标记形状（圆/方/三角）、直接标注
• 图表要有 aria-label 描述核心结论
• 提供数据表格作为替代（可折叠的 <Table>）
• 色盲模拟检查（Chrome DevTools 有）

九、动效克制

• 首次渲染：可以有 300–500ms 的绘制动画
• 数据更新：不要每次刷新都重播入场动画，只更新数值
• 切换指标时可以有过渡，但不要超过 400ms
• 详见 motion-animation-spec

十、验收清单

• 图表类型符合决策树，不是"凭感觉选的"
• 柱状图基线为 0
• 没有双 Y 轴
• 饼图分类 ≤ 5
• 没有 3D 图
• 系列区分不只靠颜色（有线型/标记）
• 语义色没有用于分类
• Y 轴有单位标注
• 大数字格式化且小数位统一
• 空态区分「无数据」与「筛选无结果」，且占满图表高度
• 加载用骨架而非空白 spinner
• 缺数据不当 0 处理
• 宽度用 ResizeObserver 跟随容器
• 深色模式有独立色板
• 有 aria-label 与数据表格替代

十一、反面清单

1. ❌ 柱状图基线不为 0
2. ❌ 双 Y 轴
3. ❌ 8 类数据的饼图
4. ❌ 3D 柱状图
5. ❌ 用红色表示"系列 3"
6. ❌ 只靠颜色区分系列
7. ❌ 同一张图混用「1.2万」和「12000」
8. ❌ 空数据时图表容器塌陷
9. ❌ 缺失数据当 0（画出假下跌）
10. ❌ 写死图表宽度
11. ❌ 每次数据刷新重播入场动画
12. ❌ Y 轴不写单位