人力资源可视化 · 图表选型设计指南
本指南回答一个问题：拿到任何一个 HR 指标，如何决定"用什么图、为什么用它、别的图为什么不行"。全部实例图表均由内置 500 人真实花名册数据实时渲染——指南本身，就是这套设计体系的示范。
◈学习地图：两条入口，五步闭环
这份指南有两条入口：从原理进（有分析基础的人，先建立判断框架），或从图种进（零基础，先把工具认全）。两条路在第 ③ 步汇合，之后完全一致。
入口 A · 自上而下 有基础 / 想先要结论
- ① 原理：数据形态八问 + 六类任务先建判断框架
- ② 总纲：决策树 + 选型矩阵把框架变成流程
- ③ 逐图解密 35 图看真实系统怎么用
- ④ 对比场景 8 模式 ＋ ⑤ 速查字典应对高频场景
- ⑥ 反模式 12 条 ＋ ⑦ 练习反向校验
入口 B · 自下而上 零基础 / 想先认识工具
- ⓪ 图种入门：七大编码族先知道每类图能干什么、何时会崩
- ① 原理：为什么是它补上判断依据
- ② 总纲：把它变成流程形成可选型动作
- ③ 逐图解密 ＋ ✦ 图鉴真实应用 + 逐张字典
- ⑥ 反模式 ＋ ⑦ 练习反向校验
五步能力闭环
不管从哪条入口进，能力都按这五步长。每一步都对应本指南的具体章节——学完一步要能自己回答右边那句自检。
① 图种认知七大编码族的机制 / 场景 / 边界第〇章自检：拿到任意一张图，能说出它把数据映射成了什么视觉属性
② 指标属性识别8 类 HR 指标 × 5 个属性判读第一章自检：拿到一个指标，能当场判出它需要哪类图
③ 指标 → 图匹配决策树 + 速查字典 + 反向检验第二 / 五章自检：选完图能说出"别的图为什么不行"
④ 逐模块设计模块设计六要素 + 7 个真实模块第三章 + 图鉴自检：能独立设计一个分析模块并说明每个位置的选型
⑤ 反向校验主动找茬：这图会误导出什么结论第六 / 七章自检：看别人的仪表盘能一眼指出三处选型问题
第 ② 步的"5 个属性"是什么
HR 指标常见 8 类：规模、结构、流动、能力、绩效、薪酬、成本、风险。名字不必背——一眼看穿属性才是能力。任何指标过这 5 个问题，图种范围立刻收敛（第一章有完整的八问版本）：
| 属性 | 问什么 | 判读结果如何影响选型 |
|---|---|---|
| 聚合度 | 是汇总统计，还是个体名单？ | 名单 → 直接上表格，不选图 |
| 序性 | 类目有序（职级/年龄档）还是无序（部门）？ | 有序 → 保序，禁止按值排序 |
| 类目数 | 几个？≤6 / 8-12 / >12？ | ≤6 可上饼；>8 必须条形；>12 考虑 Top-N |
| 时间轴 | 有没有"随时间变化"？ | 有 → 时序族；还要再分绝对量还是结构 |
| 维度 | 一维，还是二维交叉？ | 二维且 >20 格 → 热力图 |
第 ④ 步的"模块设计六要素"
"逐个模块设计"不是把图堆到一页上，而是每个模块都回答这六个问题。以驾驶舱总览页为例：
| 要素 | 要回答的问题 | 总览页的答案 |
|---|---|---|
| ① 任务 | 这个模块替谁回答什么问题？ | "公司整体长什么样"——定位模块，不做结论 |
| ② 指标集 | 用哪几个指标？ | 人数、序列、学历、年龄、绩效、核心人才 |
| ③ 主图 | 每个指标的主图选什么？ | 条形 / 玫瑰 / 环 / 直方 / 100% 堆叠 / 条形 |
| ④ 辅证 | 谁配 KPI 卡、谁配名单？ | 8 张 KPI 卡答"多大规模"，6 张图答"什么结构" |
| ⑤ 联动 | 筛选/点击如何串联？ | 部门筛选联动全页，点击图表下钻 |
| ⑥ 行动出口 | 看完能做什么？去哪里？ | 总览页无行动出口——行动出口留给绩效页与薪酬页 |
时间预算两条路怎么分配时间
完整走一遍（含 27 张图动手调试）约 4-6 小时；只求"明天能用"：第〇章 + 第二章 + 第五章 ≈ 1.5 小时。图鉴（42 张名片）不必通读，当作随查随用的字典。
完整走一遍（含 27 张图动手调试）约 4-6 小时；只求"明天能用"：第〇章 + 第二章 + 第五章 ≈ 1.5 小时。图鉴（42 张名片）不必通读，当作随查随用的字典。
〇图种入门：七大编码族
图表的本质只有一句话：把数据映射成视觉属性。所以按"映射方式"分族，比按图名背清单有用得多——同一族的图共享同一套优势和同一批边界，学会一族等于学会一族里的所有图，换图不换原理。
两套分类互为索引：本章按编码机制分 7 族（用来学原理、判断能不能用）；✦ 图鉴按图种分 14 片（用来查字典、看具体某张图）。学的时候按族走，用的时候按图查。每族另配三块：何时进入这一族（入口判据）、变体工具箱（族里还有什么图）与设计参数（画的时候怎么定）；带 Ⓐ-Ⓔ 标记的是本章新增的 5 个活演示变体。
| 族 | 数据 → 视觉属性 | 一句话记住 | 代表图 | 判读精度 |
|---|---|---|---|---|
| ① 位置 / 长度 | 值 → 长度、位置 | 要精确比较，优先用长度 | 条形 / 柱状 / 直方 / 蝴蝶 | 最高 |
| ② 角度 / 面积 | 占比 → 角度、半径 | 只用于表达"占多少"，不用于比大小 | 饼 / 环 / 玫瑰 | 低 |
| ③ 时序 | 时间 → 横轴，变化 → 斜率 | 唯一以"斜率"为编码的族 | 折线 / 面积 | 对斜率敏感 |
| ④ 叠加构成 | 分组 → 同一根柱内的分段 | 一根柱同时答"总量"和"构成" | 堆叠柱 / 100% 堆叠 | 中（首尾段好读） |
| ⑤ 密度 | 二维计数 → 色深；层级体量 → 面积 | 用面积换密度，牺牲精确读数 | 热力图 / 树图 | 看图案，不读数 |
| ⑥ 关系与流向 | 两变量 → 坐标；迁移 → 流宽 | 回答"有关系吗"和"从哪到哪" | 散点 / 双轴 / 瀑布 / 斜率 / 桑基 | 关系强，数值弱 |
| ⑦ 非图表 | 不映射，直接呈现 | 答案是"人"就上名单，别画图 | KPI / 表格 / 档案卡 / 预警卡 | 精确 |
族① 位置 / 长度编码：条形 · 柱状 · 直方
编码机制：把数值映射成 长度。这是人类视觉系统判读精度最高的编码——Cleveland & McGill（1984）的精度排序是 位置 > 长度 > 角度 > 面积 > 颜色。推论：只要任务是"比较大小"，先来这一族。
何时进入这一族：任务是比较（谁多谁少 / 差多少）· 数据一维 · 需要精确读数 → 长度编码精度最高，是比较任务的默认起点；下面的变体工具箱覆盖它的特殊子型（并列比较、两期对照、对标判定、带波动）。
应用场景（全部为 HR 真实实例）
- 横向条形｜类目多（≥8）且名字长：部门人数（生产制造部 230 vs 研发技术部 65）、专业类别 TOP12、部门人均薪酬、薪酬离散系数
- 纵向柱状｜类目少或需要方向感：绩效升降（升 188 / 平 174 / 降 138）、技能等级（无 294 vs 高级技师 2）
- 直方｜连续量分箱看形态：年龄分布（30-34 岁 133 人单峰）、月薪区间（5k~10k 档 252 人占半壁）
- 蝴蝶 / 金字塔｜两组成员共用同一条有序轴：年龄-性别金字塔（30-34 岁 86 男 vs 47 女）；同比场景下的两期部门对照也是它
崩溃边界
- 要回答"部分占整体多少"→ 长度答不了，换第②族
- 类目 >12 且全都要看 → 必须 Top-N 截断，否则重点被稀释
- 有序类目禁止按值排序（职级、年龄档）——职级金字塔正是因为保序才有"宽底尖顶"的形态
- 纵向柱的标签太长必须旋转 45°，可读性掉一档 → 换横条
- 直方不是柱状图：x 轴是连续量的区间，柱与柱之间不留缝；按类目留缝画就降级成了柱状图
| 变体 | 干什么用 | 适用条件 | 演示 |
|---|---|---|---|
| 分组柱 | 几组数值并列比较 | 类目 ≤6 × 组数 ≤3 | 实例⑧（绩效升降） |
| 哑铃图 | 两期数值 + 变化量一眼可见 | 类目 ≥8 时优于双柱 | 变体 Ⓐ |
| 子弹图 / 参考线 | 实际值 vs 目标 / 阈值的判定 | 有明确目标或警戒线 | 变体 Ⓑ |
| 误差线 | 均值 ± 波动范围 | 报告均值时必须给离散度 | —（盒须图同理） |
设计参数（画的时候怎么定）
- 排序：无序类目按值降序；有序类目保序（本族唯一的强制例外规则）
- 标签：放条端外侧直读数值；差距小于 10% 时必须加标签兜底——视觉分不出的靠数字
- 柱宽：barMaxWidth 12-20px，柱间距 ≥ 柱宽的三分之一；超宽柱是最常见的"新手丑"
- 基线：条形 / 柱状 y 轴必须从 0 起——截断基线让长度比失真（折线不受此限，见族③）
与相邻族对照：条形 vs 饼 = 长度 vs 角度，判读精度差一个数量级（所以类目多、差异小时饼图必输）；条形 vs 热力图 = 一维精确 vs 二维图案。同族内部怎么选：类目多且名字长 → 横条；类目少 → 竖柱；连续量分箱 → 直方；两组对置 → 蝴蝶。
变体 Ⓐ哑铃图：把"变化量"放上 C 位数据：2025 → 2026 各部门人数
哑铃图 两端 + 连线（按变化量降序）
看点：每部门一条线——左端浅色 2025、右端深色 2026，绿升红降灰平。生产制造部 174→230（+56）是全场最长的一根，研发技术部 51→65（+14）次之，行政安环部 10→10 一根灰点线。与双柱比：双柱要靠眼睛做减法，哑铃把差值直接画成线长；与蝴蝶比（实例⑫）：蝴蝶省宽度，但读的是两端绝对量——类目多、故事是"变化量"时，哑铃是第一选择。
变体 Ⓑ子弹图 + 参考线：从"多长"到"达标没有"数据：部门薪酬离散系数 CV
子弹图 实际 vs 目标（30% 合理上限 / 40% 警戒）
看点：与实例⑪同一份 CV 数据——那版用颜色分档（颜色管扫读），这版条形统一深蓝、只加两条参考线（参考线管判定）：越过警戒线的三个部门（供应链 45.8%、行政安环 45.7%、生产制造 42.9%）一眼锁定，财务部 28.2% 以下安全。参考线是子弹图的灵魂：没有目标，比较就没有结论。HR 里的典型用法：达成率 vs 目标线、流失率 vs 警戒线、薪酬带宽 vs 分位线。
族② 角度 / 面积编码：饼 · 环 · 玫瑰
编码机制：占比 → 角度（饼、环），数值 → 半径 / 面积（玫瑰）。角度判读精度低于长度，面积更低——所以这一族的定位是"表达比例关系，而不是精确比较"。饼图唯一擅长的任务是：突出单个部分占整体（"大专学历占一半"）。
何时进入这一族：任务是构成（部分占整体）· 类目 ≤6 · 差异明显 · 单组数据 → 一旦变成"多组构成的横向对比"就出局，换族④。
应用场景
- 饼图｜5 类以内 + 差异明显：学历结构（本科 206 人 41.2%、大专 158 人 31.6%、博士仅 4 人）、院校类型、人才标签（高潜/专家/骨干/普通）、当期绩效档位分布
- 环形饼｜与饼图同任务，多出的环心可放总数或关键指标（"500 人"）——信息密度略高，仪表盘类图表也是环形的变体
- 玫瑰图｜多类构成 + 要版面冲击：六大序列（生产 184 人 36.8%、技术 154 人 30.8%…）。半径按数值平方根放大，让"面积≈体量"
- 两者的共同前提：类目就是全部类目（构成图的各类目相加 = 100%）
崩溃边界
- 类目 >6 → 扇形变窄、标签打架，逼近角度分辨极限
- 类目差异 <3-5 个百分点 → 相邻扇形肉眼不可辨（真实案例：供应链部 50 人 10% vs 质量管理部 45 人 9%，这两块扇形根本分不出来）
- 多组对比（每个部门各自的学历构成）→ 饼图彻底失效，换堆叠柱
- 需要精确读数 → 饼图永远不该承担这个任务
- 玫瑰图在数值极悬殊时，小扇形几乎消失（"高级技师 2 人"在玫瑰上等于不存在）
| 变体 | 干什么用 | 适用条件 | 演示 |
|---|---|---|---|
| 半环仪表盘 | 单指标进度 / 达成率 | 只有一个数 + 有刻度或目标 | 变体 Ⓒ |
| 旭日图 | 层级构成（饼的层级扩展） | 层级 ≤2 层 | 变体 Ⓓ |
| 玫瑰图 | 多类构成 + 版面冲击 | 已在代表图里，见族内详述 | 实例② |
设计参数（画的时候怎么定）
- 起始角：12 点钟方向，顺时针按值降序（有序类目按序）
- 配色：无序类目多色相；有序类目单色深浅（规则 R1）
- 环心：放总数或主指标（"500 人"），别空着
- 主角：最重要的一块高亮、其余降饱和——饼图要有主角，不能十块同亮
- 标签：扇区 ≥5% 直接标名；小于的进图例或 tooltip
与相邻族对照：同一份学历数据，饼图能看出"本科占四成"，条形图能读出"本科 206、大专 158"——任务决定谁上；饼 vs 堆叠柱 = 单个构成 vs 多个构成的横向对比；饼 vs 玫瑰 = 精确（相对）vs 冲击，玫瑰用精度换版面节奏。
活演示：实例① 饼图（同数据三图） · 实例② 玫瑰 vs 条形
变体 Ⓒ仪表盘：单指标进度的半环表达数据：本科及以上学历 270 / 500 人
半环仪表盘 角度 → 进度（54.0%）
看点：仪表盘是环形饼的"单指标进度"变体：半环 = 进度轨道，深色弧 = 当前值，中央放大数字直读。适用条件苛刻——只有一个数要讲、且有明确刻度或目标时才用（达成率、覆盖率、警戒线距离）。三个近亲按"要不要刻度"选：要刻度选仪表盘，只要占比选环形饼，连占比都不用比就选 KPI 大数字卡。它没进驾驶舱，正是因为 8 张 KPI 卡已经把"单值"讲完了——加刻度反而增加读图成本。
变体 Ⓓ旭日图：饼图的层级扩展数据：部门 → 班组 两级结构（共 500 人）
旭日图 角度 × 层级（内环部门 / 外环班组）
看点：同一份树图数据（实例④）的角度版：内环 = 部门、外环 = 班组，扇形角度 = 人数占比。树图面积编码看"块头"，旭日角度编码看"层级占比"。边界同样明确：两层尚可，三层外环扇形窄到放不下名字就崩——这正是驾驶舱四级架构不选它、改用可折叠名录的原因。层级 ≥3 或只关心结构不关心体量时，回去用架构树。
族③ 时序编码：折线 · 面积
编码机制：时间 → 横轴位置，变化率 → 斜率。折线是唯一以斜率为主要视觉变量的图种，而人眼对斜率异常敏感——趋势、拐点、加速度都靠它读。所以时序数据的第一问永远是：我要看绝对量，还是看结构？
何时进入这一族：数据有时间轴（八问 Q5）· 任务是趋势 / 拐点 / 节奏 → 先分绝对量还是结构：绝对量留这里，结构转族④。
应用场景
- 折线（绝对量）｜入职趋势：2000-2026 年入职人数，2025 年 77 人洪峰后 2026 年回落到 56 人
- 多折线（分化）｜绩效等级人数趋势：A 档 65→63→89 上行、B 档 223→221→184 收缩——四条线看"谁在涨、谁在跌"
- 面积折线｜想看"累积规模"时用：入职趋势的填充版，强调累计体量而非单年
- 双轴中的折线｜职级平均薪酬随职级变化（O1 的 7.9 万爬到 M4 的 41.8 万）——形态阅读（详见第⑥族）
崩溃边界
- 非时序的类目数据强行连线 → 连线暗示了不存在的连续性（部门之间没有"过渡态"）
- 时间点 <4 个时折线优势不明显（3 个点表格也够）——此时折线的价值只在"叙事"
- 线条 >5 条互相缠绕 → 拆图，或只保留重点两条
- 多条面积图叠加 → 互相遮挡，面积图只适合单序列
- 要看"结构占比随时间变化"→ 折线不打 100% 基准，换第④族
| 变体 | 干什么用 | 适用条件 | 演示 |
|---|---|---|---|
| 阶梯线 | 累计存量 / 阶段式变化 | 累计口径、离散事件 | 变体 Ⓔ |
| 迷你折线 | 单实体 3-5 点走势 | 嵌在 KPI 卡或员工画像里 | 3.8 KPI 完全体 |
| 多折线 | 多序列分化对比 | 线 ≤5 条 | 实例③ |
设计参数（画的时候怎么定）
- 基线：折线 y 轴可以不从 0 起（趋势看斜率不看高低），但刻度必须均匀、绝不变形
- 拐点即信号：关键拐点加标注（"2025 洪峰 77 人"）
- 线宽 2-2.5px；点数 >30 去掉圆点只留线
- 焦点纪律：突出一条主线（加粗 / 高亮），其余降灰
- 面积图只画单序列——多序列面积互相遮挡
与相邻族对照：折线 vs 100% 堆叠 = 绝对量 vs 结构，是一对互补视角，不能互相替代（B 档从 223 掉到 184 人，占比图看不出这 39 人去了哪；折线图看不出占比是不是被总量稀释）。折线 vs 柱状 = 连续性 vs 离散对比——"趋势"用折线，"各期各多少"用柱状。
变体 Ⓔ阶梯线：增量与存量画在同一张图上数据：2000-2026 入职（累计正好 500 人）
阶梯线 阶梯 = 存量（柱 = 年度增量）
看点：青色柱是年度入职（增量），深蓝阶梯线是累计人数（存量）：2024 年累计 367 人，2025 年一年 +77 跳到 444，2026 年正好 500。阶梯的每一级横线 = 存量不变的一年，竖跳 = 新人进厂——年度数据本质是离散事件，阶梯比平滑折线更诚实。凡"累计口径"的时序（人数存量、资金余额、合同存量）都该考虑阶梯；实例⑥的平滑折线适合"当年流量"（每年招多少）。同一份入职数据，问存量还是问增量，答案差一个阶梯。
族④ 叠加构成：堆叠柱 · 100% 堆叠
编码机制：同一根柱内的分段长度 → 构成，多根柱排列 → 时间或类目对比。这一族的特点是"一根柱同时回答两个问题"：总高 = 总量，分段 = 构成。代价是中间段难比较。
何时进入这一族：任务是构成 ×（比较或时间）· 分段 ≤5 · 关注点在总量或首尾段 → 要精确读中间段时出局，换分组柱。
应用场景
- 堆叠柱｜跨类目比构成：部门男女结构（每柱一个部门，总高=人数，蓝段男/绿段女；生产制造部 152 男 + 78 女）
- 堆叠柱｜跨部门比学历重心：每柱一个部门按学历分段，一眼看出哪个部门"学历结构更重"
- 100% 堆叠｜结构随时间变化：绩效档位三年演变（B 档 44.6%→36.8%、A 档 13%→17.8%），消除总量干扰后看结构漂移
崩溃边界
- 中间段最难比较：只有最底段和最顶段有稳定基线，中间段随上下文浮动 → 要看中间段，换分组柱
- 分段 >5 类 → 每段太薄，标签放不下，退化成色块
- 需要精确读中间段的值 → 表格或分组柱
- 用 100% 堆叠时必须明确标注"占比"，否则读者会把 44.6% 误读成 44.6 人
- 类目维度的排序会改变观感——按总量排序可读性最好
| 变体 | 干什么用 | 适用条件 | 演示 |
|---|---|---|---|
| 100% 堆叠 | 消除总量看结构漂移 | 总量无意义或干扰判断时 | 实例③ |
| 分组柱 | 精确比每一段的大小 | 堆叠的替补方案 | 实例⑧ |
| 堆叠面积 | 构成随时间的连续版 | 分段 ≤3、时序长 | —（易遮挡，慎用） |
设计参数（画的时候怎么定）
- 主角段放最底：稳定基线优先给最重要的段
- 段内标签 ≥8% 才显示，其余靠 tooltip（规则 R4）
- 单位纪律：100% 版必须标 "%"，绝对版必须标单位——混用是事故级错误
- 图例顺序 = 段的自底向上顺序
- 类目排序：按总量降序可读性最好
与相邻族对照：堆叠柱 vs 分组柱 = 构成 vs 并列比较（要精确比各类目大小用分组柱）；堆叠柱 vs 饼 = 多个构成 vs 单个构成（10 个部门各自的学历构成，饼图画不出来）；100% 堆叠 vs 多折线 = 结构 vs 绝对量。
活演示：实例④ 男女堆叠柱 · 实例③ 100% 堆叠（绩效结构）
族⑤ 密度编码：热力图 · 树图
编码机制：热力图 = 两个类目维度的交叉计数 → 颜色深浅；树图 = 层级 + 体量 → 嵌套面积。共同点：用面积和色块容纳高密度信息——牺牲精确读数，换"一眼看出图案"。这一族回答的问题不是"多少"，而是"热点在哪、结构长什么样"。
何时进入这一族：二维交叉（Q8）且格子 >20 · 或"层级 + 体量"要一起看 → 需要精确读值时出局，用 tooltip / 表格兜底。
应用场景
- 热力图（60 格）｜部门 × 岗位序列：生产制造部 × 生产序列 171 人深成一枝独秀——交叉热点一眼定位
- 热力图（120 格）｜部门 × 职级：职级断档沿行扫描即现
- 热力图（7×5）｜年龄 × 司龄梯队：最深格是"≤25 岁 × 7-10 年"58 人——年轻且司龄长，指向 18 岁前进厂的中职/技校用工管道
- 树图｜部门规模形态：矩形嵌套表示"集团套部门、部门套班组"，面积 = 人数；生产制造部那块占近半张图
崩溃边界
- 只有单色深浅是正确的色阶（浅→深）；用彩虹色会切断"深浅 = 多少"的映射关系
- 超过约 200 格 → 格子小到放不下标签，热力失去可读性
- 需要精确读值 → 热力图只提供"热点"，具体数值靠 tooltip 或表格
- 树图的面积比较精度低于条形（面积编码本身就是低精度编码）——要精确比大小就回第①族
- 层级 >3 层、或只关心结构不关心体量 → 换可折叠名录（架构树），它在图鉴里被单列
| 变体 | 干什么用 | 适用条件 | 演示 |
|---|---|---|---|
| 旭日图 | 层级构成的角度版 | 层级 ≤2 层 | 变体 Ⓓ（族②） |
| 日历热力 | 时间维度的密度 | 连续日期 × 单值 | — |
| 气泡矩阵 | 三维交叉的密度 | 两类目 + 一个数值 | — |
设计参数（画的时候怎么定）
- 色阶必须单色深浅（浅 → 深），并配一条数值刻度条
- min / max 取真实数据域，禁用"自动美化"
- 空值显示 "—"，绝不显示 0——缺失和零是两回事
- 格内标签 ≥12 才显示；格子越小越依赖 tooltip
- 树图同层同色系按 index 渐变，白描边分隔
与相邻族对照：热力图 vs 交叉条形 = >20 格选热力，<12 格条形更准；树图 vs 条形 = 层级+体量 vs 纯体量；树图 vs 架构树 = 体量感知 vs 结构浏览（前者回答"哪里人多"，后者回答"有哪些层级和岗位"）。
族⑥ 关系与流向：散点 · 双轴 · 瀑布 · 斜率 · 桑基
编码机制：这一族是"回答关系与流向问题"的专用工具，共同特征是 同时编码两个以上变量或路径。它们的判读特点是：关系结构很强，具体数值很弱——用来看"有没有关系、往哪个方向动"，不用来读数。
何时进入这一族：两变量的关系· 两期的迁移· 总量变化的加法分解 → 且默认不需要精确读数（关系结构强、具体数值弱是本族天性）。
| 图种 | 它回答的问题 | 编码方式 | HR 实例 | 崩溃边界 |
|---|---|---|---|---|
| 散点 | 两个变量有关系吗？离群在哪？ | 两个坐标轴 | 绩效分 × 年薪（分色标档位、抖动去重叠）→ 找"高绩效低薪"人群 | 点 >500 会重叠，需透明度或聚合；不适合精确读数 |
| 双轴 | 两个量纲不同的指标，形态是否同向？ | 共用类目轴 + 两个值轴 | 职级平均薪酬（左轴）+ 职级人数（右轴）：薪酬 O1 7.9 万 → M4 41.8 万，但 P2/P3 回落 | 两轴必须同序（都按职级）；轴义必须标注；绝不用于暗示伪相关；三轴以上是灾难 |
| 瀑布 | 总量变化被哪些增减项分解？ | 累积位置 + 悬空段 | 397 期初 + 133 新进 − 30 离职 = 500 期末 | 分解项必须满足加法守恒（乘除关系不能用）；项 >6 失去节奏；"接不上"本身就是数据质量警报 |
| 斜率图 | 两期之间排名/数值怎么变？ | 斜率 = 方向 + 幅度 | 2025→2026 各部门人数升降（研发技术部 51→65 陡升） | 只适合两期（三期以上变乱麻）；类目 5-15 个最佳 |
| 桑基 | 人从哪一类流到哪一类？ | 流宽 = 体量，路径 = 迁移 | 职级流转（2025·P1 → 2026·P2 共 14 人）；55 人晋升 / 9 人降级 / 4 人调岗 / 133 新进 / 30 离开 | 链接 >30 条糊成一团；只能看流向结构，不能读数 |
| 变体 | 干什么用 | 适用条件 | 演示 |
|---|---|---|---|
| 气泡图 | 散点 + 大小 = 第三变量 | 三个变量且都连续 | — |
| 平行坐标 | >3 个变量同时比较 | 变量 ≤6，否则不可读 | —（慎用） |
| 弦图 | 多组之间的双向流动 | 节点 ≤8 | — |
设计参数（画的时候怎么定）
- 散点透明度 0.5-0.7：重叠区靠透明度显密度
- 类目轴上的散点必须抖动，幅度 ≤ 类目间距的 10%
- 双轴两轴同序、轴义标注——违背即误导（第六章反模式）
- 桑基链接 >30 条拆图或过滤
- 瀑布：首尾柱深色、增绿减红；"接不上"就是数据质量警报
与相邻族对照：散点 vs 分组均值柱 = 个体分布 vs 均值（离群个体恰恰是风险名单，均值柱会抹掉它）；双轴 vs 两张独立图 = 形态关联 vs 各自独立；瀑布 vs 蝴蝶 = 显式连接期初期末 vs 只列各项；桑基 vs 斜率 = 多条路径的流量 vs 两期名次变化。
族⑦ 非图表：KPI 大数字 · 表格名单 · 档案卡 · 预警卡
核心观点："不画图"是选型的一部分。有些数据画成图就是错的——因为它的答案不是"模式"，而是"一个数"或"一群人"。判据（Q2 名单原则）：问题的答案是"人"还是"模式"？答"人"→ 名单；答"模式"→ 图。
何时进入这一族：答案是一个数（Q1 单值）或一群人（Q2 名单）→ 画图反而是错——直接呈现就是最好的呈现。
四种形态与场景
- KPI 大数字卡｜单个汇总数字：员工总数 500、人均年薪 14.1 万、月入职 77 人。完全体 = 数值极大 + 单位极小 + 副标签灰 + 变化率角标 + 迷你趋势
- 表格 / 名单｜个体清单：绩效下滑 138 人、高绩效低薪名单、关键岗位资格缺失清单、年龄风险预警。图用来发现模式，表格用来驱动行动
- 档案卡（KV）｜单实体多属性：员工画像（身份条 + 基本信息/绩效轨迹/薪酬水平三段 KV + 三年绩效迷你折线）
- 预警卡片组｜按语义分组的行动项：红=绩效下滑 / 橙=高潜流失 / 蓝=薪酬倒挂 / 紫=结构风险
崩溃边界
- KPI 卡 >8 张 → 变成"数字墙"，焦点消失（驾驶舱只在对的位置放，不铺满）
- 表格 >20 行 → 必须排序 + 限高滚动 + 分页，否则扫不动
- 表格也需要视觉层 → "有编码的表格"：红字标风险、pill 标状态、进度条标程度
- 单实体多维度禁止用雷达图强行等量纲化——这是画像类需求的常见灾难
- 预警分组 >5 组 → 优先级感消失，读者无法决定先处理哪类
| 变体 | 干什么用 | 适用条件 | 演示 |
|---|---|---|---|
| 进度条 | 单指标达成度 | 嵌在 KPI 卡或表格行内 | 3.8 KPI 完全体 |
| 状态徽章 pill | 分类状态标记 | 名单行内 | 图鉴 #34 风险池 |
| 迷你走势 | KPI 卡内嵌趋势 | 3-5 个点 | 3.8 KPI 完全体 |
设计参数（画的时候怎么定）
- KPI 数值字号 ≈ 单位字号的 10 倍（"500" vs "人"）
- 卡片 ≤8 张，超过就分组或转图
- 表格行高 ≤40px、关键列固定；默认按风险 / 优先级降序
- 红字只标风险，红色不当装饰用
- 名单要有出口：点击行 → 员工画像，形成行动闭环
与相邻族对照：KPI 卡 vs 单值饼图/单柱图 = 精确读数 vs 多余装饰（一个数不需要图）；名单 vs 热力图 = "谁" vs "哪里"（风险清单要能逐条勾销，热力图只能告诉你区域）；档案卡 vs 雷达图 = 分维度可读 vs 伪等量纲比较。
这一章怎么用学完七族，你应该能做到三件事
① 拿到任意一张图，说出它把数据映射成了什么视觉属性（以及这决定了它的精度上限）；② 拿到任意指标，先问"它属于哪一族的问题"，而不是先想"用什么图好看"；③ 说出每个族的崩溃边界——这才是选型能力和"我记得饼图不行"的分水岭。接下来去第一章补上判断依据，然后到第二章把判断变成流程。
① 拿到任意一张图，说出它把数据映射成了什么视觉属性（以及这决定了它的精度上限）；② 拿到任意指标，先问"它属于哪一族的问题"，而不是先想"用什么图好看"；③ 说出每个族的崩溃边界——这才是选型能力和"我记得饼图不行"的分水岭。接下来去第一章补上判断依据，然后到第二章把判断变成流程。
一原理：选型只看三件事
所有图表选型决策，归根结底是三个问题的函数：图表 = f（数据长什么样，读者要干什么，人类感官有多准）
1.1 第一问：数据长什么样 —— 数据形态八问
拿到指标先过一遍这 8 个问题，答案基本圈定了候选图表：
| # | 问题 | 判断结果举例 |
|---|---|---|
| Q1 | 是单个汇总数字，还是一批数？ | 员工总数 500 → 单数字；各部门人数 → 一批数 |
| Q2 | 是聚合统计还是个体名单？ | 平均年龄 33.2 → 统计；下滑 138 人名单 → 名单 |
| Q3 | 类目有序还是无序？ | 职级 M4→O1 有序；部门无序（可按值排序） |
| Q4 | 类目有几个？ | ≤6 个可上饼；>8 个必须条形；>12 个考虑 Top-N |
| Q5 | 有没有时间轴？ | 入职年份、三期绩效 → 时序数据 |
| Q6 | 是总量还是构成？ | 薪酬总额是总量；学历占比是构成 |
| Q7 | 数值有没有正负 / 方向？ | 绩效升降、人数增减 → 有方向 |
| Q8 | 是一维还是二维交叉？ | 部门人数一维；部门×序列人数二维 |
八问里有个关键分岔：Q2 名单类数据永远用表格——图用来发现"模式"，表格用来驱动"行动"。驾驶舱的三个名单（绩效风险池、高绩效低薪、年龄风险）全部用表格，就是这条原则的体现。
1.2 第二问：读者要干什么 —— 六类分析任务
同样的数据，任务不同，最优图不同。所有分析任务归为六类：
| 任务 | 读者心里的问题 | 典型 HR 指标 |
|---|---|---|
| ① 比较 | 谁多谁少？差多少？ | 各部门人数、各职级平均薪酬 |
| ② 构成 | 部分占整体多少？ | 学历结构、绩效档位、序列结构 |
| ③ 分布 | 数据怎么散开？集中在哪？ | 年龄分布、月薪分布、司龄分布 |
| ④ 趋势 | 随时间怎么变？拐点在哪？ | 入职趋势、三期绩效、薪酬变化 |
| ⑤ 关系 | 两个变量有没有关联？ | 绩效×薪酬、年龄×司龄密度 |
| ⑥ 流向 / 层级 | 从哪流到哪？谁包含谁？ | 晋升流向、职级变动、组织架构 |
一个指标可能同时命中多个任务——这时要问"哪个任务是本次分析的主要目的"。部门人数既可比较（条形）也可看构成（饼）还可看层级（树图）：驾驶舱在三个页面分别用了这三种图，因为三页任务不同。
1.3 第三问：人类感官有多准 —— 感知精度层级
这是整套设计的科学根基。Cleveland & McGill（1984）实验测出，人眼对各种视觉编码的判读精度从高到低：
① 位置（同尺度对齐）最准
② 长度
③ 角度 / 斜率
④ 面积
⑤ 颜色深浅
⑥ 色相（红/蓝/绿）最不准
实例 ①同一份数据 × 三种编码：亲身感受精度差异数据：真实花名册 · 10 个部门人数
横向条形 长度
饼图 角度
树图 面积
看点：不看数字标签，试着回答"生产制造部约是研发技术部的几倍？"
- 条形图里你能估出 ≈3.5 倍（实际 230/65=3.54），误差很小；
- 饼图里 46% 和 13% 的扇形你只能感觉"大不少"，倍数说不出口；
- 树图里你能看出"占了近一半地盘"，但 65 和 50 的格子几乎分不清。
1.4 由此得出：选型三步法
第一步（数据形态八问）→ 圈定候选图种 → 第二步（六类任务）→ 确定主任务 → 第三步（感知精度权衡）→ 按任务需要的读数精度选定，并确定排序 / 配色 / 交互
二总纲：选型决策树与速查矩阵
这一章是可以"背下来"的：一棵树回答"用哪张图"，一张矩阵回答"为什么是它"，五条规则决定细节成败。
2.1 选型决策树
单值单个汇总数字？KPI 大数字卡（可加同比角标 / 迷你趋势）
名单个体名单（一行一员工）？表格 + 风险着色，不要画图
时序·量有时间轴，单一系列的量？折线图（可加面积增强趋势感）
时序·构成构成随时间变化？100% 堆叠柱（对比多张饼）
时序·排名排名随两期变化？斜率图
时序·增减总量被增减项分解？瀑布图（加法守恒结构）
构成·少类类目 ≤6 且占比差异明显？环形饼（中心放总数）
构成·多类类目 >6？横向条形 + 占比标签
构成·跨维构成还要跨另一维度比较？堆叠柱
比较·长名类目多 / 名称长（≥4 字）？横向条形（降序排列）
比较·短名类目少 / 名称短？纵向柱状
比较·有向有正负（增减 / 升降）？发散条形（0 基线）或蝴蝶图
分布单变量分布？分箱直方柱（箱界取整、等宽、左闭右开）
关系两变量关系？散点图（第三维用颜色分系列）
交叉二维类目交叉计数？热力图（单色渐变，不用彩虹）
层级层级 + 数量？树图（矩形面积 = 数量，可嵌套）
2.2 六任务 × 图表速查矩阵
| 任务 | 首选 | 次选 | 明确不用 | 一句话理由 |
|---|---|---|---|---|
| 比较（≤8 类目） | 纵向柱 | 横向条形 | 饼 | 长度 > 角度 |
| 比较（>8 类或长名） | 横向条形 | Top-N + 其他 | 饼、挤柱 | 横排标签不旋转，长度对齐 |
| 构成（≤6 类） | 环形饼 | 100% 堆叠 | — | 部分-整体关系一眼可见 |
| 构成（>6 类） | 条形+占比 | 树图 | 饼 | 角度分辨不了 7+ 扇形 |
| 构成 × 时间 | 100% 堆叠柱 | 面积图 | 多饼并列 | 归一化后看结构漂移 |
| 分布 | 直方分箱柱 | 箱线图（多组时更优） | 折线 | 分布形态 = 柱高沿轴展开 |
| 趋势 | 折线 | 面积、阶梯 | 无序类目折线 | 位置编码 + 连线暗示连续 |
| 关系 | 散点 | 气泡 | 柱、饼 | 两维连续量只能用平面位置 |
| 二维交叉计数 | 热力图 | 堆叠柱（一维主导时） | 分组柱爆炸 | 矩阵最紧凑，颜色找热点 |
| 层级 + 数量 | 树图 | 旭日图 | 饼（无层级） | 面积嵌套天然表达包含 |
| 流向 / 迁移 | 桑基图 | 弦图 | 折线 | 流量 = 宽度 |
| 正负增减 | 瀑布 / 发散条形 | 蝴蝶 | 普通柱 | 0 基线上下分化 |
| 排名变化（两期） | 斜率图 | 哑铃图 | 双饼 | 斜率 = 方向 + 幅度 |
| 单值 + 目标 | 子弹图 / 进度条 | 仪表盘 | 饼 | 目标差一目了然 |
2.3 五条附加规则（决定细节成败）
R1有序用有序
有序类目（职级 / 学历 / 年龄段）必须用有序编码——X 轴按序排列、热力色单色深浅渐变；无序类目绝不用色相渐变（部门用 10 色调色板，因为部门间没有大小关系）。
有序类目（职级 / 学历 / 年龄段）必须用有序编码——X 轴按序排列、热力色单色深浅渐变；无序类目绝不用色相渐变（部门用 10 色调色板，因为部门间没有大小关系）。
R2排序即分析
条形类默认按值降序（视线从最重要开始）；只有类目本身有序时才不排序（职级金字塔按 M4→O1）。驾驶舱所有横条都降序、唯独职级图按等级序——这不是不一致，是规则正确执行。
条形类默认按值降序（视线从最重要开始）；只有类目本身有序时才不排序（职级金字塔按 M4→O1）。驾驶舱所有横条都降序、唯独职级图按等级序——这不是不一致，是规则正确执行。
R3正负必发散
有方向的数据（男 / 女、增 / 减、升 / 降）以 0（或中轴）为基线向两侧展开——年龄金字塔男负女正、瀑布涨绿跌红、升降三分类。
有方向的数据（男 / 女、增 / 减、升 / 降）以 0（或中轴）为基线向两侧展开——年龄金字塔男负女正、瀑布涨绿跌红、升降三分类。
R4精确用长度，格局用颜色
每个低精度图都必须配 tooltip 补偿（树图 / 热力 / 玫瑰 hover 出精确数）——"用交互弥补感知精度"的标准手法。本页所有实例都可以悬停试试。
每个低精度图都必须配 tooltip 补偿（树图 / 热力 / 玫瑰 hover 出精确数）——"用交互弥补感知精度"的标准手法。本页所有实例都可以悬停试试。
R5类目超载要截断
>12 类目 → Top-10/12 + "其他"合并。截断原则：截掉尾巴，不能截掉决策相关项。
>12 类目 → Top-10/12 + "其他"合并。截断原则：截掉尾巴，不能截掉决策相关项。
三逐图解密：驾驶舱 35 张图表的"为什么"
每页先给速览表（图表｜数据形态｜任务｜选型核心理由｜放弃的备选），再对最有学习价值的图做深度讲解。本页所有实例均由真实 500 人花名册渲染，悬停可读精确值（规则 R4 的现场示范）。
3.1 页面一「人力资源总览」—— 仪表盘首页的选型哲学
首页的任务是"5 秒建立全局感"：8 张 KPI 卡回答"多大规模"，6 张图回答"结构长什么样"。每种结构只出现一次、且用不同图种——用图种的多样性暗示"这是多个不同视角"，这是总览页的常见设计手法。
屏驾驶舱原页 · 页面一「人力资源总览」8 张 KPI 卡 + 6 张结构图 · 1440px 整页实录
先看整页全貌，再对照下方速览表逐图解密——注意本页 6 张图用了 6 种不同图种："多样性"本身就是总览页的设计语言。
| 图表 → 选型 | 数据形态 | 任务 | 选型核心理由 | 放弃的备选及原因 |
|---|---|---|---|---|
| 部门人数 → 横向条形 | 10 类目、长中文名 | 比较 | 长名横排可读；长度对齐精读倍数；降序 = 优先级 | 纵柱：10 个长标签必旋转 45°；饼：46% vs 13% 角度不可辨 |
| 岗位序列 → 玫瑰图 | 6 类目构成 | 构成 | 6 类在饼承受范围；玫瑰半径变化给总览页视觉节奏 | 条形更精确——但此处只需"生产最大"级别的感知（见实例②） |
| 学历结构 → 环形饼 | 5 类构成 | 构成 | 5 类 + 差异明显，饼的最佳工况；环心留白显总数 | 条形：也行，但三图并排时全条形版面单调 |
| 年龄结构 → 纵向直方柱 | 有序 7 档分箱 | 分布 | 有序分箱必须柱状沿轴展开；形态 = 年龄形态 | 饼：分布上饼毫无意义（丢掉相邻档的顺序信息） |
| 绩效结构趋势 → 100% 堆叠柱 | 3 时点 × 4 档 | 构成×时间 | 消除人数差异只看结构漂移："A 档 13%→17.8% 上升"一屏读出 | 三张饼并列：跨饼比较角度几乎不可能 |
| 核心人才部门 → 横条 TOP10 | 类目多 Top-N | 比较 | 同部门人数图；Top10 截断符合 R5 | — |
实例 ②玫瑰图的"明知故犯"：精度换节奏的权衡数据：六大岗位序列人数
玫瑰图 面积（驾驶舱的选择）
横向条形 长度（更精确的备选）
看点：玫瑰半径∝数值，面积编码放大了差异的平方——184 vs 154（生产 vs 技术）在玫瑰里显得差距远大于实际。驾驶舱敢用它的三个前提同时成立：(a) 6 类目远低于饼上限；(b) 值差异大不需要精读；(c) 读者任务只是"感受序列格局"。学习要点：低精度图不是不能用，而是要确认任务容得下这个精度损失——若是向管理层汇报"序列定编精确对比"，必须换成右边的条形。
实例 ③同一数据、两个任务、两张图（任务论最佳教材）数据：近三年绩效档位（真实）
四条折线 绝对量（页五：各档人数怎么变）
100% 堆叠柱 结构（页一：档位占比怎么变）
看点：左边回答"B 档人数从 223 降到 184"（绝对量），右边回答"A 档占比 13%→17.8% 上升 4.8 个百分点"（结构）。数据几乎相同、图完全不同——因为两页的任务不同。若在左边读结构、右边读绝对量，都会得出扭曲结论（比如结构上升可能只是总量缩水的假象）。先确认任务，再选图。
3.2 页面二「组织结构分析」—— 层级与交叉的选型
屏驾驶舱原页 · 页面二「组织结构分析」树图 · 堆叠 · 架构树 · 热力×2 · 有序条形
本页全部围绕"层级与交叉"两个词：树图与架构树表达包含关系，两张热力图表达交叉计数，职级金字塔是全应用唯一"不排序"的条形图。
| 图表 → 选型 | 数据形态 | 任务 | 选型核心理由 | 放弃的备选及原因 |
|---|---|---|---|---|
| 部门规模 → 树图 | 两级层级 + 数量 | 层级+体量 | 矩形嵌套 = 组织包含关系；面积 = 体量 | 饼无层级；条形要两张才表达得了两级 |
| 部门男女 → 堆叠柱 | 每部门两类构成 | 构成×比较 | 柱总高 = 部门总量、分段 = 性别构成，一图双任务 | 并排双柱看不出总量；100% 堆叠丢掉总量 |
| 组织架构树 → HTML 折叠树 | 四级层级名录 | 浏览/查找 | 层级名录本质是名单（Q2），可折叠目录才是正确形态 | ECharts tree 图：华丽但难折叠、难扫描 |
| 职级金字塔 → 有序横条 | 12 级有序类目 | 比较+形态 | 有序数据不排序、按等级序——金字塔轮廓本身是信息 | 降序条形：打乱职级语义，只看到大小看不到"级配形态" |
| 部门×序列 → 热力图 | 10×6 交叉计数 | 找热点 | 60 格用柱状要 60 根柱；颜色一眼定位极值 | 分组柱 60 柱视觉爆炸；堆叠柱不擅长交叉找点 |
| 部门×职级 → 热力图 | 10×12 交叉计数 | 找热点 | 同上（120 格） | 同上 |
实例 ④树图：层级 + 体量的一图两得数据：部门 → 班组 两级真实结构
树图 面积×嵌套（部门→班组）
堆叠柱 总量+构成（部门男女）
看点：左图矩形大小 = 部门体量、嵌套 = 班组归属，"生产制造部占近半、其中二车间B班最大"一图读出（悬停班组格出精确数）。右图是堆叠柱的"双任务红利"：柱总高比部门总量、分段看性别构成——但堆叠有代价：第一段以外的分段基线不齐，段间比较精度下降，所以堆叠适用于"分段 ≤3 且关注点在第一段或总量"，男女两段正好满足。
实例 ⑤热力图：二维交叉的紧凑解数据：10 部门 × 6 序列 交叉人数
热力图 颜色深浅（单色渐变，非彩虹）
看点：60 个交叉值用分组柱要 60 根柱，热力矩阵一格一值，颜色最深处 = 人员最密集组合（生产制造部×生产序列 184 人）。注意色阶是单色深浅渐变（规则 R1：数量用有序编码）；若用红绿黄彩虹，深浅与数量的对应关系就断了。热力图读不了精确值——所以每格 hover 都有 tooltip（规则 R4）。
3.3 页面三「年龄与司龄分析」—— 人口学图表的主场
屏驾驶舱原页 · 页面三「年龄与司龄分析」直方×2 · 蝴蝶 · 面积折线 · 梯队热力 · 风险清单
人口学图表的主场：分箱直方、性别金字塔、入职趋势同页出现——注意"分布看形态、趋势看斜率"的分工，以及页面底部把"发现"交给清单的收尾方式。
| 图表 → 选型 | 数据形态 | 任务 | 选型核心理由 | 放弃的备选及原因 |
|---|---|---|---|---|
| 年龄分布 → 纵向直方柱 | 有序 8 档 | 分布 | 直方图是分布任务的标准答案 | — |
| 年龄金字塔 → 蝴蝶图 | 年龄序 × 性别对立 | 分布×构成 | 人口学百年经典：两侧镜像一眼看出哪个性别在哪段过剩；R3 发散的教科书应用 | 两张直方并排：失去对称轴的对照感 |
| 部门平均年龄 → 横条 | 10 类目连续值 | 比较 | 长名 + 降序，页内系列感 | — |
| 司龄分布 → 直方柱 | 有序 8 档（尾箱加宽） | 分布 | 同年龄直方 | — |
| 入职趋势 → 面积折线 | 23 年时序计数 | 趋势 | 位置编码 + 连线表达连续；面积增强"量的体感" | 柱状：23 根柱可行但"斜率感"弱于折线 |
| 年龄×司龄 → 热力图 | 7×5 有序交叉 | 梯队形态 | "梯队" = 年龄司龄联合分布，矩阵直接呈现主力格与断层 | 散点：500 点重叠严重（年龄取整），聚合后更清晰 |
| 年龄风险 → 文字清单 | 个体名单 | 行动 | Q2 名单原则：逐人处置不需要图 | 任何图 |
实例 ⑥蝴蝶图：对立结构的唯一正解数据：真实年龄 × 性别（8 档）
年龄金字塔 男负女正
入职趋势 面积折线
看点：左图中轴是共同参照系，男左女右反向展开——"30-34 段男女均衡、20-24 段男多"一秒读出，这靠的是共享基线的发散（规则 R3），两张独立直方给不出这种对照感。右图折线的核心价值是连线暗示连续性：2023-2026 的爬坡"斜率感"是柱状图给不了的；面积填充进一步增强"量的体感"。
实例 ⑦散点 vs 热力：同是双变量，粒度决定形态数据：真实年龄 × 司龄（500 人）
年龄×司龄梯队矩阵 聚合热力
看点：年龄×司龄理论上也能画散点（页六绩效×薪酬就是散点），但这里 (a) 年龄是整数、司龄一位小数，500 个点大量重叠堆在整格上——散点"看个体分布"的优势被浪费；(b) 读者任务是"梯队形态"（哪格人多哪格空），聚合计数矩阵正是答案。选型不只看变量类型，还要看数据的实际粒度和聚合需求。对照 3.6 的散点实例：那边 y 是连续年薪几乎无重叠、任务是找"高绩效低薪"个体——散点才成立。
分箱设计的三个细节（分布图的生命线）
- 箱界取整：月薪 5500~38100 分成"5000-10000、10000-15000…"而不是"5237-10237…"——人脑读千/万级边界毫不费力；
- 左闭右开：[x, x+step) 且最后一箱兜底（"21年+"）——任何值有且只有一个家，不重不漏；
- 等宽优先：驾驶舱司龄 [0,2) [2,4) [6,9) [9,13) 故意不等宽，因为司龄右尾长——这是经验性妥协，代价是宽箱柱高不能直接比。初学建议先等宽，右尾爆炸再加宽尾箱并注明。
3.4 页面四「学历与能力分析」—— 饼图的成批使用与边界
屏驾驶舱原页 · 页面四「学历与能力分析」饼×3 · 条形 · 有序柱 · 堆叠 · 名单×2
三张饼的"同构复用"是本页的设计语言——读者学会读第一张就会读后两张；页面下半部两张名单（高学历低职级 / 资格缺失）负责"从发现到行动"。
| 图表 → 选型 | 数据形态 | 任务 | 选型核心理由 | 放弃的备选及原因 |
|---|---|---|---|---|
| 学历 / 院校 / 资格 → 环形饼 ×3 | 4-5 类构成 | 构成 | ≤6 类 + 差异明显 = 饼的最佳工况；有序类目按序顺时针 | — |
| 专业 TOP12 → 横向条形 | 12+ 类截断 | 比较 | 长名 + Top-N（R5） | 饼：12 类崩溃 |
| 技能等级 → 纵向柱 | 6 档有序构成 | 比较 | "无:294 vs 高级技师:2"的 100:1 对比，柱高冲击远强于扇形 | 饼：6 类可用但悬殊对比不狠 |
| 部门学历 → 堆叠柱 | 10 部门 × 5 学历 | 构成×比较 | x 比部门、段看构成；部门规模差异本身重要不归一 | 100% 堆叠：会丢掉部门体量信息 |
| 高学历低职级 / 资格缺失 → 表格 | 个体名单 | 行动 | Q2 名单原则 | 任何图 |
要点"同构数据用同构图"的一致性红利
学历页连用三张饼（学历 / 院校 / 资格）看似单调，实则是一致性设计——三张饼顺时针都按"从好到差"，读者学会读第一张就自动会读后两张。一致性本身就是可读性。反例见第六章第 11 条（同页两套司龄分箱的教训）。
学历页连用三张饼（学历 / 院校 / 资格）看似单调，实则是一致性设计——三张饼顺时针都按"从好到差"，读者学会读第一张就自动会读后两张。一致性本身就是可读性。反例见第六章第 11 条（同页两套司龄分箱的教训）。
3.5 页面五「人才盘点与绩效分析」—— 时序与离散变化的表达
屏驾驶舱原页 · 页面五「人才盘点与绩效分析」KPI×6 · 折线 · 饼 · 分组柱 · 风险池表格
绝对量折线（本页）与结构堆叠（总览页）的分野来自实例③的对照；页面底部的风险池表格演示了"表格也可以有视觉编码"——红字提示、档位 pill、按危险分排序。
| 图表 → 选型 | 数据形态 | 任务 | 选型核心理由 | 放弃的备选及原因 |
|---|---|---|---|---|
| 三年档位 → 四条折线 | 3 时点 × 4 系列 | 绝对量趋势 | 各档人数升降是核心（B 档 223→184），折线最直接 | 100% 堆叠：那是"结构视角"（见实例③右） |
| 当期分布 → 饼 | 4 类构成 | 构成 | 4 类最佳工况 | — |
| 绩效升降 → 分组柱 | 2 转换期 × 升/平/降 | 方向比较 | 升平降是有序三态，绿/蓝/红语义色分组，两期并排看升降结构是否恶化 | 堆叠：也成立，但"升 vs 降"对照感分组更强 |
| 标签 / 核心人才部门 → 饼 + 横条 | 4 类 / 类目计数 | 构成 比较 | 各自的标准工况 | — |
| 风险预警池 → 表格 | 138 个体 × 多属性 | 行动 | Q2；风险列红字、档位 pill 着色、按危险分排序——表格也可以有视觉编码 | 任何图 |
实例 ⑧方向性离散计数：分组柱 + 语义色数据：两期绩效升降流（真实）
绩效升降变化 升绿·降红
看点：升 / 平 / 降是带方向的离散计数（2025→2026：升 188 / 平 174 / 降 138），绿蓝红直接映射语义（规则 R3 的颜色版）。分组柱的优势是"两个转换期并行对比"——右组降 138 明显小于左组降 162，"绩效面在好转"的结论从分组对照中自然浮现。若只有一期转换且强调净变化，发散条形更好；若变化可分解（入 / 离），用瀑布。
3.6 页面六「薪酬分析」—— 连续金额的图表全家桶
屏驾驶舱原页 · 页面六「薪酬分析」KPI×6 · 双轴 · 直方 · 散点 · CV 条形 · 低薪表
连续金额的图表全家桶：阶梯（双轴）、分布（直方）、关系（散点）、公平性（CV）四种任务四种图，最后由高绩效低薪表格落地到人——完整闭环。
| 图表 → 选型 | 数据形态 | 任务 | 选型核心理由 | 放弃的备选及原因 |
|---|---|---|---|---|
| 部门人均 → 横向条形 | 10 类目金额 | 比较 | 金额横条 + 万元格式化，降序 = 薪酬高地排序 | — |
| 职级薪酬 → 折线+柱双轴 | 12 级有序 × 均值+人数 | 形态+诚实性 | 折线看"薪酬阶梯是否单调"；人数柱是诚实性配套：6 人职级的均值不可信 | 单折线：没有样本量信息会误导 |
| 月薪区间 → 动态分箱直方柱 | 连续分布 | 分布 | 分箱直方标准答案；箱界千位取整 | — |
| 部门离散系数 → 横条 | 10 类目派生指标 | 比较 | CV 是汇总统计量，条形精读；排序即风险排序 | 箱线图更完整但占地大、读者不熟（见实例⑩） |
| 绩效×薪酬 → 散点 | 计分 × 连续金额 | 关系 | "高绩效是否=高薪"只能散点答；档位色分系列看薪酬带 | 柱 / 饼完全无法表达二维关系 |
| 高绩效低薪 → 表格 | 39 个体名单 | 行动 | Q2；差距列红字 + 可点击查画像 | 任何图 |
实例 ⑨双轴图：最危险也最实用数据：12 职级 × 平均年薪 + 人数（真实）
职级薪酬曲线 左轴均值·右轴人数（O1→M4 序）
看点：折线回答"薪酬阶梯是否单调"（带宽合理性）；右轴人数柱回答"这条线可信吗"——M4/P5 只有 6 人，其均值波动大，读者必须同时看到 n。双轴的风险是刻度操纵（右轴一压缩，人数波动"消失"），驾驶舱的用法是教科书式的：右轴不是为了和左轴比较，而是独立的诚实性信息。判断双轴是否正当：读者是否被诱导在两轴之间做数值比较。是→拆两张图；否→双轴成立。
实例 ⑩分布 + 关系：薪酬分析的两张核心图数据：500 人真实月薪与年薪
月薪区间分布 分箱直方（动态 7 箱）
绩效×薪酬散点 分色+抖动
看点：左图分箱的三个细节都在——箱界千位整（5k~10k）、等宽、左闭右开；一眼看出单峰右偏（主力 5k-10k，高薪长尾）。右图散点的两个必备处理：分色即第三维（A 绿→C 红四色薪酬带，"C 档也拿 30 万"的异常一眼锁定）；抖动解决列重叠（绩效分只有 4 个离散值，不抖动 500 点堆成 4 根竖线，±0.09 水平抖动摊开）。抖动有轻微失真——所以按"带"理解，不按单点横坐标读数。
实例 ⑪CV 条形：汇总统计的"风险排序"数据：10 部门年薪离散系数（真实）
部门薪酬离散系数 CV% 降序
看点：CV（总体标准差÷均值）把一个部门的薪酬分布压缩成一个数字，降序排列 = 内部不公平风险排序（供应链部 45.8% 最失衡）。但注意这是信息压缩：两个 CV 相同的部门分布形态可能完全不同（单峰 vs 双峰）。更完整的答案是箱线图（P25/中位/P75/异常点），驾驶舱选 CV 条形因为任务只是"排序找不公平"而非"解剖分布"。学习要点：汇总图先定位问题，原始图再诊断问题——但你要知道你用的是哪一种。
3.7-3.8 页面七「查询与预警」& 贯穿设计
整页只有一张迷你折线 + 两块"非图表"设计：
屏驾驶舱原页 · 页面七「员工查询与智能预警」员工画像 · 智能预警中心
全应用"最不像图表"的一页：画像用 kv 卡 + 迷你折线，预警中心用分组卡片——"不画图"是这页最重要的设计决策（名单与行动导向数据的正解）。
- 员工画像：单实体多属性没有"比较"任务，图无从发力——kv 标签 + 风险 pill 是正确形态。唯一例外是三年绩效轨迹：3 个点之间有趋势任务，迷你折线（sparkline）是单实体时序的标准答案；
- 智能预警中心：分组卡片列表，红=下滑 / 橙=人才流失 / 蓝=调薪 / 紫=结构——行动导向；
- 学习要点：成熟的分析系统里，"不画图"和"画什么图"同样重要。驾驶舱 42 个可视化位中 7 个是表格/名单/档案卡，全部出现在"从发现到行动"的最后一公里——这是完整的分析闭环设计。
KPI 大数字卡的完全体
单值指标的唯一合理形态。三要素：数值极大（视觉锚点）、单位极小（不抢戏）、副标签灰（次信息）。同比场景加变化率角标——单值 + 变化率 + 迷你趋势 = KPI 卡完全体：
员工总数
500人
基础形态
人均年度薪酬
14.1万
▲ 12.4% 同比角标
月入职人数
77人
▲ 67.4% + 迷你趋势
颜色系统：选型的隐形一半
驾驶舱的配色不是审美而是编码——两条铁律：(a) 语义色一旦确立全应用不挪用（红永远是坏消息）；(b) 有序数据用单色深浅，无序数据才用多色相。
藏青 #12439B中性主色 · 主体数据 · 本期
浅蓝 #9DB8E0上期/参照——同色相明度差编码时间
绿 #12B76A正向 · 提升 · A 档 · 达标
红 #F04438风险 · 下滑 · C 档 · 低薪差距
橙 #F79009注意 · 核心人才 · 老龄化
紫 #7A5AF8辅助中性 · 职级 · 专业
技巧"本期深蓝 vs 上期浅蓝"的深浅时间编码
同比 Demo 用同色相的明度差表达时间新旧（深=本期、浅=上期），比用两个色相更能传达"这是同一实体的两个状态"——见第四章实例。热力图同理：数量用单色深浅渐变（浅→深），如果用彩虹色，"深浅=多少"的对应关系就断了。
同比 Demo 用同色相的明度差表达时间新旧（深=本期、浅=上期），比用两个色相更能传达"这是同一实体的两个状态"——见第四章实例。热力图同理：数量用单色深浅渐变（浅→深），如果用彩虹色，"深浅=多少"的对应关系就断了。
✦图鉴：42 个可视化位，每图一张名片
第三章按页面讲"为什么"，这一节逐张发名片：35 张图表卡 + 7 个表格/名单/档案位 = 42 个可视化位（34 张 ECharts + 1 张 HTML 架构树）。每张名片三段：它是什么、为什么是它、别的图为什么不行。点图种徽章可只看同类。
页面一 · 人力资源总览 6 张
01部门人数分布 TOP横向条形
总览页 · 比较 · 长度编码
生产制造部 230 人（46%）一骑绝尘，是第二名研发技术部（65 人）的 3.5 倍多——全公司规模格局的默认入口。
为什么是它：10 个长名类目横排免转标签、长度可精读。备选败因：纵柱标签必旋转；饼图 10 类远超角度分辨极限。
↗ 活演示：实例① 同数据三图02岗位序列结构玫瑰
总览页 · 构成 · 面积编码
六大序列在南丁格尔玫瑰上展开，生产序列 184 人（36.8%）半径最大，技术 154 人（30.8%）紧随——"块头感"来自面积编码。
为什么是它：6 类构成要的是冲击与节奏。备选败因：饼图精确但平淡，条形精确但丢掉体量包围感。
↗ 活演示：实例② 玫瑰 vs 条形03学历结构饼/环
总览页 · 构成 · 角度编码
5 档学历：本科 206 人（41.2%）与大专 158 人（31.6%）合计超七成，博士仅 4 人的薄扇一眼可见。
为什么是它：类目少、差异大，是饼图最佳工况；突出"单块占整体"正是饼图唯一擅长的事。备选败因：条形读数更精，但丢掉"过半/不足一成"的直觉。
↗ 活演示：实例① 同数据三图04年龄结构分布柱状/直方
总览页 · 分布 · 看形态
8 个年龄档沿轴有序展开，30-34 岁 133 人（26.6%）的单峰形态即全部信息——分布图看的是形状，不是单柱。
为什么是它：有序分箱必须保轴序，单峰/双峰/偏态只有直方看得见。备选败因：饼图打散顺序，形态消失。
05近三年绩效结构趋势堆叠柱
总览页 · 构成×时间 · 归一化
三根满高柱按 A/B+/B/C 分段归一化：B 档 44.6%→36.8% 收缩、A 档 13%→17.8% 扩张，结构漂移一眼可读。
为什么是它：看"结构随时间变化"必须归一化到 100%。备选败因：绝对量堆叠会把结构变化淹没在总量变化里。
↗ 活演示：实例③ 折线 vs 100% 堆叠06核心人才部门分布横向条形
总览页 · 比较 · Top-N 截断
只画核心人才最多的前 10 个部门——"核心人才扎堆在哪"一句话有答案。
为什么是它：Top-N 截断让比较对象眨眼可扫。备选败因：全量类目条形稀释重点。
页面二 · 组织结构分析 7 张
07部门人员规模形态树图
组织页 · 层级+体量 · 面积编码
矩形嵌套矩形：集团套部门、部门套班组（一车间A班 42 人是最大班组），面积=人数——生产制造部那块占近半张图。
为什么是它："层级包含 + 体量对比"是树图独门任务。备选败因：条形丢层级；架构树丢体量。
↗ 活演示：实例④ 嵌套树图08部门男女结构堆叠柱
组织页 · 构成×比较 · 一图两问
每柱一个部门（总高=部门人数），蓝段男、绿段女：生产制造部 152 男 + 78 女——总量与构成一图两得。
为什么是它：柱总高与分段各答一问。备选败因：分组柱难比总量；每部门一张小饼彻底失去跨部门比较。
↗ 活演示：实例④ 堆叠柱（男女）09组织架构树（四级）架构树
组织页 · 浏览查找 · HTML 名录
公司→部门→班组→岗位四级可折叠名录——它不是图，是一份"能翻的组织架构"。
为什么是它：28 个班组的四级结构画成连线树必糊成一团，可折叠名录保全景又能下钻。备选败因：树状连线图在此规模不可读；树图丢岗位层细节。
10岗位序列结构（复用）饼/环
组织页 · 构成 · 一致性复用
与总览页同款的序列构成饼在组织页复现——同问同答，读者零学习成本。
为什么是它：同一问题在不同页面用同一图种，是"一致性红利"。备选败因：换图种徒增解读成本。
11职级金字塔分布横向条形
组织页 · 保序比较 · 级配形态
按职级序（O1→M4）横排、不按人数排序：O1-O3 操作序列 165 人构成宽底，M3/M4 各 6 人收尖——金字塔轮廓本身就是信息。
为什么是它：有序类目是"禁止排序"铁律的例外——级配形态（金字塔/纺锤/倒三角）必须保序才可见。备选败因：按人数排序摧毁形态。
12部门×序列热力图热力图
组织页 · 二维交叉 · 找热点
10 部门 × 6 序列 = 60 格，颜色深浅=人数：生产制造部×生产序列 171 人深成一枝独秀，交叉热点秒现。
为什么是它：二维交叉超过 20 格，热力是唯一不散架的形态。备选败因：60 根条形无从下手；透视表读不出热点。
↗ 活演示：实例⑤ 同款热力图13部门×职级人数矩阵热力图
组织页 · 高密度交叉 · 断档扫描
10 × 12 = 120 格进阶款：职级断档沿行扫一眼即现，密度更高、读法不变。
为什么是它：热力可读上限约 200 格，120 格仍在安全区。备选败因：任何一维展开成条形都丢交叉信息。
页面三 · 年龄与司龄分析 7 张
14年龄分布柱状/直方
年龄页 · 分布 · 专页展开版
总览页年龄直方（#04）的专页版，档位展开更细，任务不变：看形态，不看单柱。
为什么是它：同构复用 + 更细档位，深挖不换读法。备选败因：换图种打断同一指标的连续认知。
15年龄-性别金字塔蝴蝶/金字塔
年龄页 · 分布×构成 · 对称发散
中轴左男右女、8 档年龄上下排开：30-34 岁 86 男 vs 47 女的不对称一眼可见——人口学百年经典形态。
为什么是它：两组构成沿同一有序轴对置，蝴蝶图是教科书解。备选败因：两张并排直方比较对称性要来回扫视。
↗ 活演示：实例⑥ 蝴蝶金字塔16部门平均年龄横向条形
年龄页 · 汇总值比较 · 降序
10 个部门平均年龄降序横排，谁老谁新一目了然（全员均值 33.2 岁做背景常识）。
为什么是它：比较 10 个汇总值是条形本职。备选败因：箱线图信息更全，但超出管理层读图习惯。
17司龄分布柱状/直方
年龄页 · 分布 · 业务分箱
司龄按业务节奏分箱（新人群 / 稳定期 / 老沉淀），新鲜血液与老兵结构并存一图。
为什么是它：分箱边界该由业务节奏定，不是机械等宽。备选败因：机械等宽把"新人群"糊成一段。
18入职趋势折线/面积
年龄页 · 时序 · 斜率即节奏
2000-2026 入职人数连线：2023-2025 连续爬升、2025 年 77 人洪峰后 2026 回落到 56 人——招聘周期一眼可辨。
为什么是它：时序核心是斜率与拐点，折线是唯一以斜率为编码的图种。备选败因：柱列弱化拐点的"折"感。
↗ 活演示：实例⑥ 面积折线19年龄 × 司龄梯队矩阵热力图
年龄页 · 梯队 · 聚合防重叠
500 人聚合进 7×5 网格：最深格是"≤25 岁 × 7-10 年"58 人——年轻且司龄长，指向 18 岁前进厂的中职/技校用工管道。
为什么是它：500 点散点必重叠成墨渍，聚合成热力才见密度结构。备选败因：原始散点图密集区不可读。
↗ 活演示：实例⑦ 同款热力图20年龄风险预警表格/名单
年龄页 · 行动 · 不上图
临近退休年龄的员工逐人列出——处置对象是人，不是统计量。
为什么是它：从发现到行动的最后一公里交给名单（Q2 名单原则）。备选败因：任何图表化都是把人变成点。
页面四 · 学历与能力分析 8 张
21学历结构（复用）饼/环
学历页 · 构成 · 深挖起点
总览页学历构成（本科 41.2% 领跑）在"人才资本"语境复现，作为深挖起点。
为什么是它：跨页复用同款图 = 一致性红利（同 #10）。备选败因：同问换图，读者重新学读法。
22毕业院校类型饼/环
学历页 · 构成 · 三饼同构
院校类型构成饼，与学历饼、资格饼构成"三饼同构"排布——三张构成图可以横向扫读。
为什么是它：同问同答的图组用同构排布。备选败因：混用图种迫使读者在图间切换解读模式。
23专业类别 TOP12横向条形
学历页 · 长尾截断
30+ 个专业类别只画 TOP12——长尾截断后"主力专业是谁"才有答案。
为什么是它：长尾分布必须截断，否则头部被稀释。备选败因：全量横条 30+ 根没有重点。
24专业技术资格饼/环
学历页 · 构成 · 缺失入图
"无资格"作为真实类目显式入饼——缺失不藏进脚注，构成才诚实（总和=100%）。
为什么是它："无/未取得"是构成的一部分，藏起来会误导占比。备选败因：漏掉"无"块的饼让读者算术失衡。
25职业技能等级柱状/直方
学历页 · 悬殊比较 · 柱高冲击
"无技能 294 人 vs 高级技师 2 人"——100:1 的悬殊用柱高差直接砸出来。
为什么是它：极悬殊比较柱状最诚实。备选败因：饼图里 2 人的扇形小到看不见还占图例；对数轴会"美化"悬殊。
26部门学历结构（堆叠）堆叠柱
学历页 · 构成×比较
每柱一个部门按学历分段——各部门学历重心的差异沿柱可读。
为什么是它：跨部门构成比较是堆叠柱主场。备选败因：10 张小饼无法横向比较占比。
27高学历低职级观察表格/名单
学历页 · 反常识交叉 · 落到人
硕士/博士 × 初阶职级名单逐行列出——反常识的交叉观察，处置要落到人。
为什么是它：观察名单的价值在具体的人和岗。备选败因：统计量（"有 N 人"）无法启动面谈。
28关键岗位资格缺失分析表格/名单
学历页 · 合规风险 · 逐条勾销
关键岗位 × 应持资格 × 实际缺失，标红缺失项——合规风险要能逐条勾销。
为什么是它：风险管理输出物是待办清单。备选败因：图表化掩盖"谁欠什么"。
页面五 · 人才盘点与绩效分析 6 张
29近三年绩效等级人数趋势折线/面积
绩效页 · 绝对量时序 · 互补视角
四条线各画各的绝对人数：A 档 65→63→89 上行、B 档 223→221→184 收缩——总量故事。
为什么是它：要绝对量就各归各、不归一化；与结构趋势（#05）是一对互补视角，不能互相替代。备选败因：100% 堆叠会把 B 档 184 人的绝对流失藏进占比里。
↗ 活演示：实例③ 折线 vs 堆叠302026H1 档位分布饼/环
绩效页 · 当期构成 · 定格
当期 4 类档位一张定格照：B 档 184 人（36.8%）仍是最大块——4 类是饼图舒适区。
为什么是它：当期构成 + 类目少 = 饼的最佳工况（同 #03）。备选败因：类目一多饼就崩，所以它与 #05 分工。
31绩效升降变化柱状/直方
绩效页 · 方向比较 · 语义色
2025→2026H1：升 188 / 平 174 / 降 138，绿升红降——"方向"先于数字抵达。
为什么是它：方向性比较 + 语义色 = 快读。备选败因：只列"净变化"会掩盖三向结构。
↗ 活演示：实例⑧ 升降分组柱32人才标签结构饼/环
绩效页 · 构成 · 字典维度
高潜/专家/骨干/普通四分构成——标签是人才盘点的字典维度，饼图回答"池子长什么样"。
为什么是它：4 类构成同 #30。备选败因：标签要用于筛选联动，但不影响构成图的选型。
33核心人才部门分布（复用）横向条形
绩效页 · 比较 · 语境复用
总览页同款图在盘点语境复现——核心人才的部门归属是保留策略的输入。
为什么是它：一致性复用（同 #10）。备选败因：为"换个页面"而换图种是选型大忌。
34人才风险预警池表格/名单
绩效页 · 有编码的表格 · 直达画像
绩效下滑 / 连续 C / 高潜流失三类风险逐人列表，红字 + pill + 点击直达画像——"有编码的表格"：表格也能有视觉层。
为什么是它：行动名单 + 视觉警示的混合形态。备选败因：纯图表丢人名，黑白表格丢紧迫感。
页面六 · 薪酬分析 6 张
35部门人均薪酬对比横向条形
薪酬页 · 汇总比较 · 万元格式化
10 个部门人均年薪降序横排、按万元格式化——薪酬高地与洼地一屏定位。
为什么是它：货币比较必须统一单位格式，裸数字轴失真感知。备选败因：箱线图更诚实（能看到离散），但读图门槛高。
36职级平均薪酬曲线双轴
薪酬页 · 形态阅读 · 双轴诚实性
职级序上叠人均年薪（左轴）与人数（右轴）：薪酬从 O1 的 7.9 万爬到 M4 的 41.8 万，但 P2/P3 出现回落——曲线形态本身就是公平性话题。
为什么是它：双轴必须同序（都按职级）且轴义明确。备选败因：单轴丢掉"职级人数悬殊"这个关键背景。
↗ 活演示：实例⑨ 双轴折线37薪酬区间分布柱状/直方
薪酬页 · 分布 · 分箱取整
月薪 7 档（5k~40k）直方：5k~10k 档 252 人（50.4%）占半壁——档宽 5k 取整，让人记得住档位。
为什么是它：分箱边界千位取整才可口算。备选败因：机械分箱产生"4837-7124"这类无法口算的档。
↗ 活演示：实例⑩ 直方38薪酬公平性：部门离散系数横向条形
薪酬页 · 派生指标 · 排序呈现
每部门薪酬 CV（标准差/均值）降序横排：供应链部 45.8% 居首、信息化部 17.5% 最均衡——"哪里的薪酬最不均"由一个派生指标直接排序回答。
为什么是它：派生指标先算后比，条形只负责排序呈现；CV 阈值着色（≥40 红、≥30 橙）再叠一层警示。备选败因：直接铺 500 人散点答不了"哪个部门最不均"。
↗ 活演示：实例⑪ CV 条形39绩效×薪酬匹配散点散点
薪酬页 · 两变量关系 · 分色抖动
x 绩效分、y 年薪的 500 点散场，A/B+/B/C 分色 + 类目轴抖动——高绩效低薪区就是保留风险区。
为什么是它：两变量关系只有散点能答，抖动解决类目轴重叠。备选败因：分组均值柱抹掉个体离群——而离群恰恰是风险名单。
↗ 活演示：实例⑩ 散点40高绩效低薪识别表格/名单
薪酬页 · 行动 · 差距红字
A 档绩效但年薪低于部门中位的员工逐行列出、差距金额标红——薪酬校准的原始清单。
为什么是它：识别结论要落到"给谁调多少"。备选败因：散点图指出"区"，表格才指出"人"。
页面七 · 员工查询与智能预警 2 张
41员工画像卡片/档案
查询页 · 单实体 · KV 档案 + sparkline
一个人的全维度档案：顶部身份条、三段 KV 卡（基本信息 / 绩效轨迹 / 薪酬水平）、底部三年绩效迷你折线 + 智能诊断。
为什么是它：单实体多维度没有"比较"任务，KV 档案是正解；3 个点的趋势任务顺手交给迷你折线。备选败因：雷达图强行等量纲化是画像的常见灾难。
42智能预警中心卡片/档案
查询页 · 行动 · 语义分组
红=绩效下滑 / 橙=高潜流失 / 蓝=薪酬倒挂 / 紫=结构风险四组卡片，每张卡一个人、点击直达画像——预警的终点是可点击的行动。
为什么是它：分组 + 语义色给"先处理哪类"以优先级视觉。备选败因：合并成一张大表淹没分类紧迫感。
四对比场景选型：同比 Demo 的 8 种模式
"两期对比"是 HR 分析的最高频场景。《HR同比分析Demo》为此设计了一整套方案——同一个"部门人数变化"，8 种图各有各的问法。这是选型任务论的进阶教材。
| 模式 | 图表 | 回答的问题 | 适用条件 | 为什么不用别的 |
|---|---|---|---|---|
| A KPI 同比角标 | 大数字+变化率 | 总量变了多少？ | 任何单值指标 | 纯数字比较不需要图 |
| B 双柱对照 | 分组柱 | 每类目两期各多少？ | 类目 ≤6、看绝对量 | 蝴蝶图类目多时才必要；饼丢时间维 |
| C 蝴蝶对称 | 中轴对称条形 | 两期结构镜像对比 | 类目多（10+） | 双柱 10 类×2=20 根柱拥挤；中轴对称省一半宽度 |
| D 流动桑基 | 桑基图 | 人从哪类流到哪类？ | 类目间有迁移 | 桑基的流量宽度是唯一能同时表达"路径+体量"的图 |
| E 增减瀑布 | 瀑布图 | 总量变化被什么分解？ | 期初+增减项=期末 | 蝴蝶只列各项；瀑布显式连接期初期末，净变化一眼可见 |
| F 升降三分类 | 分组/堆叠柱 | 类目内升/平/降各几人？ | 类目内个体可配对 | 双柱只给均值，掩盖"内部有人升有人降" |
| G 斜率排名 | 斜率图 | 排名怎么变？ | 两期、5~15 类目 | 表格给不出升降感；双柱要逐对人工比较 |
| H 结构对比 | 双环/100%堆叠 | 构成变了多少？ | 构成型指标两期对比 | 双柱是总量对比；构成对比必须归一化后并排 |
实例 ⑫模式 C 蝴蝶图 vs 模式 B 双柱的临界点数据：2025/2026 两期部门人数（真实）
部门人数两期对比 浅=2025深=2026（中轴对称）
看点：10 个部门两期对照若用双柱是 20 根柱——拥挤且"此消彼长"要逐对找。蝴蝶图中轴线是共同参照系，左浅右深反向展开，"生产制造部 174→230 扩张最快、行政安环部几乎没变"一图全给。临界点经验：≤6 类目用双柱（读绝对值更直接），≥8 类目换蝴蝶。深浅蓝编码时间新旧（见 3.8 技巧框），比双色相更能表达"同一实体的两个状态"。
实例 ⑬模式 E 瀑布图：加法守恒的显式表达数据：397 + 133 新进 − 30 离职 = 500（真实）
人数增减瀑布 增绿·减红
模式 G 斜率图 排名两期连线
看点：左图瀑布成立的数学前提是加法守恒（期初 397 + 新进 133 − 离职 30 = 期末 500），每段悬空块的两端显式衔接前一状态——"接不上"本身就是数据质量警报（口径不一致时瀑布会帮你发现）。右图斜率图是两期排名的专用图：左列 2025 名次、右列 2026 名次，连线绿色向上=排名上升，斜率越陡变化越大——斜率同时编码了方向和幅度，这是表格和双柱都做不到的。
实例 ⑭模式 D 桑基图：流向任务的唯一解数据：两期间职级变动流（真实：55 晋升 + 9 降级）
职级变动流 流量=连线宽度（左 2025 · 右 2026）
看点：64 名职级变动者的去向——左边出发职级、右边到达职级，连线宽度 = 人数，最粗的线就是"晋升大动脉"。这些数字放表格里是 12 行孤立记录，放桑基里是一张组织流动地图。判断你是否需要桑基：想回答的是"从哪来到哪去"（桑基）还是"各有多少"（条形）。完整版（含新进/离职节点）见《HR同比分析Demo》。
五HR 指标 → 图表 速查字典
覆盖 HR 六大模块。★ = 驾驶舱 / Demo 已有实例；☆ = 驾驶舱没做但 HR 分析必备、值得补学的图种。可直接当工具用。
编制与人数
| 指标 | 推荐图 | 一句话理由 |
|---|---|---|
| 员工总数 / 部门数 | ★ KPI 卡 | 单值只有一种画法 |
| 各部门人数 | ★ 横向条形（降序） | 长名 + 精确比较 |
| 组织层级规模 | ★ 树图 | 层级 + 体量 |
| 编制达成率 | ☆ 子弹图 | 实际 vs 目标 + 达标线，一图三读 |
| 人数两期对比 | ★ 蝴蝶 / 双柱 | 类目数决定（第四章） |
人口结构
| 指标 | 推荐图 | 一句话理由 |
|---|---|---|
| 性别构成 | ★ 饼 / 堆叠 | 两类构成 |
| 年龄 / 司龄分布 | ★ 直方柱 | 有序分箱 |
| 年龄×性别 | ★ 蝴蝶金字塔 | 人口学唯一正解 |
| 学历 / 序列结构 | ★ 环形饼 | ≤6 类构成 |
| 职级分布 | ★ 有序横条（不排序） | 级配形态即信息 |
| 年龄×司龄梯队 | ★ 热力图 | 有序交叉聚合 |
人员流动
| 指标 | 推荐图 | 一句话理由 |
|---|---|---|
| 入职趋势 | ★ 面积折线 | 时序计数 |
| 离职率趋势 | ☆ 折线 + 参考线 | 参考线让"高低"有裁判（年度目标/警戒线） |
| 入离职对比 | ☆ 双向柱（入正离负） | 净流入/流出一眼可见 |
| 人员去向 / 来源 | ★ 桑基图 | 路径 + 体量 |
| 人数增减分解 | ★ 瀑布图 | 加法守恒结构 |
| 招聘漏斗 | ☆ 漏斗图 | 阶段转化率的天然形态 |
绩效与人才
| 指标 | 推荐图 | 一句话理由 |
|---|---|---|
| 档位分布 / 趋势 | ★ 饼 / 折线 / 100% 堆叠 | 绝对量用折线、结构用堆叠（实例③） |
| 升降统计 | ★ 分组柱（语义色） | 方向性离散计数 |
| 人才盘点九宫格 | ☆ 散点分域 | 行业标配——绩效×潜力 + 3×3 象限底色 + 各格计数；驾驶舱的绩效×薪酬散点是它的近亲 |
| 高潜 / 风险名单 | ★ 表格 | 行动导向 |
| 个人绩效轨迹 | ★ 迷你折线 | 单实体时序 |
薪酬
| 指标 | 推荐图 | 一句话理由 |
|---|---|---|
| 总额 / 人均 | ★ KPI 卡 | 单值 |
| 月薪分布 | ★ 直方柱（动态分箱） | 连续分布 |
| 各职级薪酬 | ★ 折线 + 人数柱双轴 | 阶梯形态 + 样本量诚实性 |
| 部门分布对比 | ☆ 箱线图 | 多组分布对比比 CV 汇总更完整（实例⑪） |
| 内部公平性 | ★ CV 条形 / ☆ 洛伦兹曲线 | CV 排序找不公平；洛伦兹+基尼看整体集中度 |
| 绩效×薪酬匹配 | ★ 散点（分色+抖动） | 关系任务唯一解 |
组织效能
| 指标 | 推荐图 | 一句话理由 |
|---|---|---|
| 人均营收 / 人效趋势 | ☆ 折线 + 参考线 | 时序 + 目标 |
| 人工成本占比 | ☆ 面积 / 堆叠时序 | 成本结构漂移 |
| 管理幅度 | ☆ 直方（各主管下属数） | 分布任务 |
| 多分支机构对比 | ☆ 地图 / 热力条形 | 有地理维度用地图，否则条形 |
六反模式清单：这些坑别踩
每条：现象 → 为什么错 → 正确做法。前 5 条是通用大坑，后 6 条是从驾驶舱设计里提炼的进阶教训。
1十类饼图。角度分辨极限约 6 类；46% 和 37% 的扇形肉眼不可分。
✓ 超过 6 类一律横向条形。
2无序类目上折线。连线暗示"相邻点有连续关系"，部门/职级连线是伪造语义。
✓ 驾驶舱 4 张折线全部是真时间轴（入职年/绩效年），零违例。
3双轴刻度操纵。右轴范围一拉大，柱的波动"消失"，均值显得稳定。
✓ 双轴只放"不需互相比较"的辅助信息（实例⑨）。
43D 饼 / 柱。透视让近大远小，所有长度/角度编码失真。
✓ 永远 2D。
5彩虹热力图。彩虹色相无数量顺序，读者无法判断深浅。
✓ 单色渐变编码数量 + 色阶条（实例⑤）。
6玫瑰图做精确比较。面积编码放大平方误差，184 vs 154 看起来差距远大于实际。
✓ 玫瑰仅用于格局感知场景（实例②）。
7直方分箱不等宽不注明。[0,2) 与 [9,13) 宽度不同，柱高直接比会得出"9-12 年人最多"的错误结论（宽箱天然装得多）。
✓ 等宽优先；不等宽必须注明。
8散点不带系列色。500 个同色点只能看密度，看不出"C 档高薪"这类分层异常。
✓ 分类变量上色（实例⑩）。
9堆叠段超过 4 段。第 3 段以后基线全不对齐，段间比较变成猜谜。
✓ 堆叠保留 Top3 + 其他。
10给名单画图。138 人的风险池画成柱状图后你不知道该找谁谈话。
✓ 名单 = 表格 + 着色 + 可点击（Q2 原则）。
11同一指标同页两套口径。驾驶舱年龄页"司龄分布"用 [0,2)[2,4) 分箱、"梯队矩阵"用 ≤3/4-6 分箱——细心读者会困惑。
✓ 同页同变量统一分箱，跨页变动也要有理由。
12配色语义漂移。红色这页是"下滑"、那页是"女性"，读者的颜色直觉被反复清零。
✓ 语义色全局固定（3.8 颜色表）。
七练习与答案
先自己用三步法（数据形态 → 任务 → 精度权衡）作答，再展开看解析。
12 个部门的离职率（1.2%~28%），月度例会上要快速指出最高三个部门，并给出 15% 警戒线
答：横向条形，降序 + 15% 警戒虚线。12 类目长名（比较任务→横排）；降序让前三是视线前三行；警戒线给"高低"一个裁判——没有参考线的"高低"没有意义。饼图连类目名都放不下。
对比 8 个职级的薪资分布（想看中位数、两端和异常值），不是只看均值
答：箱线图（8 箱并排）。多组分布对比是箱线的独占领地——P25/中位/P75/须/异常点一个箱全给；均值条形会把"双峰分布均成同一个数"。驾驶舱的 CV 条形是它的汇总版（实例⑪），要看形态必须回到箱线。
连续 6 个季度的绩效档位构成（A/B+/B/C）变化
答：100% 堆叠柱（6 柱 × 4 段）。构成×时间，归一化后看结构漂移。6 张饼图并列无法跨图比较角度（实例③右就是它的 3 期版）。
2025→2026 两期快照，各部门人数有增有减，想同时看到"两期数量"和"谁增谁减"
答：蝴蝶对称图（模式 C）。10+ 类目两期对照，中轴共享基线左右反向展开，增减方向不需要图例解释。若只要"净变化量"→发散条形；若要"变化被什么分解"（入/离/调）→瀑布（模式 E）。三个图对应三个问法，先确认问哪个。
高潜人才在"部门×职级"上的分布密度，找人才扎堆和真空地带
答：热力图（部门×职级，值=高潜人数）。二维类目交叉计数，矩阵+颜色深浅找热点（实例⑤同款逻辑）；若要看"浓度"可把值换成占比并注明分母。
给 CEO 的月报首页，只允许放一个关于人均效能的图
答：KPI 大数字卡（当月人均营收）+ 同比角标（↑8.2%）+ 12 个月迷你趋势线。单值指标主形态是大数字；角标回答"比上月好吗"；sparkline 回答"趋势朝哪"。一卡三问，这是 KPI 卡的完全体（3.8 现场演示）。
◎结语：这套设计的心智模型
一 页 总 结
图表选型 = f（ 数据形态 ， 分析任务 ， 感知精度 ）
数据形态八问：单值? 名单? 有序? 几类? 时序? 构成? 正负? 几维?六类任务：比较 / 构成 / 分布 / 趋势 / 关系 / 流向层级
感知层级：位置 > 长度 > 角度 > 面积 > 颜色——精确读数用前两个，格局感知才用后三个（配 tooltip 补偿）
五条规则：R1 有序用有序编码 · R2 条形默认降序（有序类目除外） · R3 正负以 0 发散 · R4 低精度图必须可交互补偿 · R5 超 12 类截断 Top-N
颜色即语义：蓝中性 · 绿正向 · 红风险 · 橙注意 · 深浅 = 时间 / 数量
名单不上图：图发现模式，表格驱动行动
这套设计的精髓不在"选对了图"，而在每次选择都能说出被放弃的备选为什么不合适——第三章每张速览表的最后一列，就是这套思维的完整示范。