导语
产品经理在设计数据可视化功能时，最常遇到的问题就是"这个数据应该用什么图表展示？"本文从业务场景出发，梳理 14 种常用图表的使用场景和示例，帮助产品经理快速选型，避免"用错图表导致数据表达不清"的尴尬。同时介绍异步数据加载和富文本标签的应用，提升图表的实用性和美观度。
TL;DR 快速结论
- 柱状图：适合分类对比，基础柱状图看差异，堆叠柱状图看占比，动态排序看排名变化，瀑布图看过程拆解
- 折线图：适合趋势分析，基础折线看走势，堆叠折线看累积，面积图强调量级，平滑曲线弱化波动
- 饼图：适合占比展示，基础饼图看整体构成，圆环图中心可显示总计，玫瑰图突出类别差异
- 散点图：适合相关性分析，展示两个维度的关系，可扩展第三维度通过颜色/大小展示
- 异步加载：支持空轴占位、loading 动画、自动过渡，需注意接口失败兜底和性能优化
- 富文本标签：支持图文混排、样式定制，可组合出表格、分割线等效果，提升信息密度
是什么：常用图表类型定义
柱状图系列
基础柱状图：通过柱形高度展示数据大小，最直观的分类对比方式。
堆叠柱状图：多个系列堆叠显示，展示组成结构和占比关系。
动态排序柱状图：排名随时间变化，强调名次演进和趋势。
阶梯瀑布图：展示累计增减的拆解过程，突出每个环节的贡献。
折线图系列
基础折线图：连接数据点形成折线，展示连续数据的变化趋势。
堆叠折线图：多个系列堆叠，展示累积趋势和分项贡献。
区域面积图：折线下方填充颜色，强调数据量级和波动区间。
平滑曲线图：将折线转换为平滑曲线，弱化数据波动，展示柔和趋势。
阶梯线图：分段跳变、区间恒定，适合展示分段计费、台阶变化。
饼图系列
基础饼图：通过扇形大小展示占比，直观展示部分与整体的关系。
圆环图：中心留白可显示总计或其他信息，突出中心内容。
南丁格尔图（玫瑰图）：通过半径和角度同时展示数据，突出类别差异。
散点图
基础散点图：通过点的位置展示两个维度的数据关系，发现数据分布和相关性。
为什么：图表选型的决策依据
数据维度决定图表类型
一维分类数据 → 柱状图、饼图
- 柱状图：适合类别不多（<10 个），需要精确对比数值
- 饼图：适合类别较少（<7 个），需要展示占比关系
二维连续数据 → 折线图、散点图
- 折线图：x 轴为时间或有序类别，展示趋势
- 散点图：两个维度都是数值，展示相关性
多维数据 → 堆叠图、雷达图
- 堆叠图：一个维度拆解到另一个维度
- 雷达图：同时对比多个指标
业务目标决定图表形式
对比差异 → 柱状图
- 示例：各门店销售额对比、各品类占比对比
展示趋势 → 折线图
- 示例：日活用户数变化、温度随时间变化
展示占比 → 饼图
- 示例：渠道占比、平台流量构成
分析相关性 → 散点图
- 示例：广告曝光-点击关系、房价-面积关系
怎么做：图表选型决策树
第一步：明确数据特点
问题清单：
- 数据有几个维度？
- 维度是分类还是数值？
- 需要展示什么关系？（对比、趋势、占比、相关性）
第二步：选择图表类型
决策流程：
数据维度
├─ 一维分类
│ ├─ 需要精确对比 → 柱状图
│ └─ 需要展示占比 → 饼图
├─ 二维连续
│ ├─ x 轴为时间/有序 → 折线图
│ └─ 两个维度都是数值 → 散点图
└─ 多维数据
├─ 需要拆解结构 → 堆叠图
└─ 需要对比多指标 → 雷达图第三步：细化图表形式
柱状图细化：
- 单系列对比 → 基础柱状图
- 多系列占比 → 堆叠柱状图
- 排名变化 → 动态排序柱状图
- 过程拆解 → 阶梯瀑布图
折线图细化：
- 单一趋势 → 基础折线图
- 累积趋势 → 堆叠折线图
- 强调量级 → 区域面积图
- 弱化波动 → 平滑曲线图
- 分段跳变 → 阶梯线图
对比与取舍：相似图表的适用边界
柱状图 vs 折线图
| 维度 | 柱状图 | 折线图 |
|---|---|---|
| 适用数据 | 分类数据 | 连续数据 |
| 强调点 | 数值差异 | 趋势变化 |
| 类别数量 | 建议 <10 个 | 可支持更多 |
| 典型场景 | 门店对比、品类对比 | 时间序列、趋势分析 |
建议：分类数据用柱状图，时间序列用折线图
基础饼图 vs 圆环图 vs 玫瑰图
| 图表类型 | 优势 | 劣势 | 适用场景 |
|---|---|---|---|
| 基础饼图 | 最直观的占比展示 | 类别过多时难以阅读 | 少量类别占比概览 |
| 圆环图 | 中心可显示总计 | 占比感知略弱 | 占比+总计展示 |
| 玫瑰图 | 突出类别差异 | 占比感知较弱 | 强调类别差异 |
建议：类别 <7 个用基础饼图，需要显示总计用圆环图，需要突出差异用玫瑰图
基础折线图 vs 面积图 vs 平滑曲线
| 图表类型 | 强调点 | 适用场景 |
|---|---|---|
| 基础折线图 | 趋势和拐点 | 标准趋势分析 |
| 面积图 | 量级和波动区间 | 强调数据量级 |
| 平滑曲线 | 柔和趋势 | 噪声较大的数据 |
建议：标准趋势用折线图，强调量级用面积图，数据噪声大用平滑曲线
异步数据加载与富文本标签
异步数据加载
应用场景：
- 后端接口返回数据
- 实时数据监控
- 大数据量分页加载
实现要点：
- 空轴/占位先渲染，数据返回再填充
- 长耗时请求展示 loading 动画
- 数据变更自动触发过渡动画
注意事项：
- 接口失败需兜底提示
- 高频更新需节流/防抖
- 大数据量考虑增量加载或数据裁剪
富文本标签
应用场景：
- 需要在标签中显示图标
- 需要组合表格、分割线等效果
- 需要突出显示部分信息
能力说明：
- 支持图文混排，可在标签内嵌小图标
- 支持整体和局部样式控制
- 可组合出简单表格、分割线、标题块等效果
注意事项：
- 样式层次不宜过多，确保可读性
- 保持前景/背景对比与留白
- 复杂样式注意性能影响
常见错误与排错
错误 1：用错图表类型
症状：数据表达不清，用户难以理解
典型案例：
- 用饼图展示 10+ 个类别 → 应改用柱状图
- 用柱状图展示时间序列 → 应改用折线图
- 用折线图展示分类对比 → 应改用柱状图
解决方案：按照数据维度和业务目标选择图表类型
错误 2：类别过多导致图表混乱
症状：饼图扇形过小，柱状图柱子密集，难以阅读
解决方案：
- 饼图类别控制在 7 个以内，超出部分合并为"其他"
- 柱状图类别较多时考虑横向排列或滚动
- 使用堆叠图将类别分组展示
错误 3：异步加载无反馈
症状：数据加载时页面空白，用户不知道是否在加载
解决方案：
- 显示 loading 动画
- 空轴占位提示"数据加载中"
- 接口失败时显示错误提示
FAQ 常见问题
Q1：什么时候用堆叠图？
A：当需要同时展示总量和分项占比时使用堆叠图。例如：地区销售额总量 + 各渠道占比、总成本 + 各成本项占比。
Q2：动态排序柱状图适合什么场景？
A：适合排名随时间变化的场景，如城市 GDP 年度排名、歌曲热度小时榜、商品销量排名等。强调名次变化而非绝对数值。
Q3：散点图可以展示几个维度？
A：基础散点图展示 2 个维度（x、y 坐标），通过视觉映射可以展示第 3 个维度（颜色或大小），实现三维数据的二维展示。
Q4：异步加载时如何优化性能？
A：使用节流/防抖控制更新频率，大数据量时考虑增量加载（appendData）或裁剪历史数据，避免一次性加载过多数据。
Q5：富文本标签会影响性能吗？
A：简单样式影响很小，但复杂样式（大量图片、复杂布局）可能影响渲染性能。建议控制标签数量和复杂度。
Q6：如何选择折线图的变体？
A：标准趋势分析用基础折线图，需要强调量级用面积图，数据噪声大用平滑曲线，分段计费/台阶变化用阶梯线图。
延伸阅读与引用
总结
图表选型是数据可视化设计的关键环节。产品经理应根据数据维度、业务目标和用户需求选择合适的图表类型，避免"用错图表导致数据表达不清"。掌握 14 种常用图表的使用场景，结合异步数据加载和富文本标签的应用，能够设计出既美观又实用的数据可视化产品。