趋势用折线、对比用柱状、占比用饼图、分布用散点——选错图表类型,再漂亮的配色也救不回信息的准确性。
图表组件的价值,是把“数据 → 视觉编码 → 洞察”的链路做对、做顺,让看图的人无需解释就能理解。
原则:图表是为了传达信息,不是为了炫技。信息不清,一切白搭。
按表达需求选择对应图表。
趋势变化、时间序列的最佳选择。
类别对比、排名展示直观有力。
占比构成,3-5 块为宜。
相关性、分布洞察。
地理分布与区域对比。
KPI 达成、实时监控。
从需求到上线的标准路径。
先问:这张图想让读者得出什么结论?据此选型。
确认数据口径、缺失值处理、单位统一,图表才可靠。
配色、图例、坐标轴、悬浮提示、联动下钻。
大数据降采样、容器自适应、移动端缩放适配。
主流方案一表看清,按团队与场景选择。
| 方案 | 特点 | 适用场景 | 备注 |
|---|---|---|---|
| ECharts | 功能全、中文文档好 | 绝大多数业务场景 | 默认推荐 |
| AntV G2 | 可视化语法、统计能力强 | 分析型报表 | 学习曲线略高 |
| D3.js | 极致灵活、可定制 | 复杂定制可视化 | 开发成本高 |
| Chart.js | 轻量简单 | 轻量图表需求 | 功能相对有限 |
减少不必要动画、关闭多余特效、对大数据做降采样,必要时用 Canvas 渲染替代 DOM。
建立品牌图表色板:主色 + 对比色 + 语义色(成功/警告/危险),避免彩虹配色。
图表容器用百分比自适应,坐标轴文字可旋转/省略,关键信息优先展示。
用增量更新或过渡动画平滑更新,避免整图闪烁,提升感知流畅度。