作者 新茗 蚂蚁金服·数据体验技术团队

TL;DR G2Plot 是一个注重于细节体验的通用统计图表库。

背景

饼图，或称饼状图，是一个划分为几个扇形的圆形统计图表。在饼图中，每个扇形的弧长（以及圆心角和面积）大小，表示该种类占总体的比例，且这些扇形合在一起刚好是一个完全的圆形。

作为最常见的图表之一，饼图大量的用于各行各业的报告中。例如，研报中经常会出现市场份额的分析。据中金公司研报，2017年我国的餐饮业营收额中，火锅占到22%，其次是自助餐（12%）、川菜（8%）、小吃快餐（8%）、西餐（6%）。这5种类型的餐饮，营收额占到了整个市场的56%，尤其以火锅占据绝对优势。

体验细琢

在实际的业务场景下，由于业务数据的千差万别，我们遇到了很多可视化展示的问题，其中在饼图中， label 问题较为凸显，有时甚至影响数据洞察。

inner 数据标签布局

🔥功能增强： label offset 可设置百分比，表示内置标签与圆弧距离 N%
🔥体验细琢：label 标签遮挡躲避，当label标签发生遮挡时，

echarts		❌直接遮挡显示 ❌无法开启自动躲避、隐藏 ❌标签只能显示在 -50% 处，无法设置
highcharts		❌默认不进行躲避、隐藏，✅可开启自动躲避、隐藏
G2Plot		✅自动躲避、隐藏 ✅可开启全部显示

outer 数据标签的碰撞躲避

echarts		❌标签非常多的情况下，发生遮挡和重叠
highcharts		✅自动隐藏放置不下的标签，避免遮挡重叠 ❌标签轨道是圆形轨道，随着半径的减小，可放置的标签数量会更少，导致准确性缺失
G2Plot		✅自动隐藏放置不下的标签，避免遮挡重叠 ✅动态变换标签轨道为椭圆形轨道，放置更多的数据标签

outer 数据标签的溢出隐藏 & 省略

echarts		❌直接溢出、裁剪
highcharts		❌标签部分省略、但也有部分直接裁剪
G2Plot		**[省略规则] ** 🔥显示优先级：视觉标记≥数值≥百分比≥分类名称 ✅当标签溢出时，优先显示百分比，其次对分类名称进行省略显示

布局算法

根据 AntV 设计原则，饼图的label布局算法主要有以下几个创新点：

1）BBox计算，像素级别碰撞检测，保证精确性；
2）碰撞偏移时，取偏离距离最小的方向作为目标方向，提高标签信息的有效性
3）碰撞偏移处理后，仍残存的遮挡或溢出标签，默认会进行隐藏，保证美观性；

下面拿 inner 布局为例，简单介绍下算法的处理过程

inner label 算法

算法方案

• 为了保证美观的目的，标准的 label 中心位置连接起来，其实是一个圆状轨道，每个 label 都在圆心和圆弧的中心连接轨道上
• 当 label 发生遮挡的时候，会对 label 做一个偏移处理，保证 label 始终在圆心和圆弧的中心连接轨道上，与对应的饼图切片关联起来

执行过程
可以看到 label 在碰撞遮挡时的处理过程

体验增强

增强一：合并极小项

合并项的明细数据，可以在 tooltip 显示，便于看全数据（此方案适用于数据总量不多不少，尾部数据占比较小且明细数据也有洞察价值的情况）。

该功能在 DeepInsight 中可以开启使用了，后续会沉淀到 G2Plot 中

增强二：多 label 类型组合

同时，对于 标签信息的位置，提供多种label类型组合，让信息传达更加明确

敬请期待

最后

饼图优化前后的一个对比情况如下：

上述对于饼图的优化点，都沉淀在** G2Plot **中，并且完全开源。G2Plot 是基于 G2 图形语法基础上，形成的一套注重图表细节体验、易用性的上统计图表库，从中提炼的 **AntV 设计原则 **是基于  Ant Design  设计体系衍生的，具有数据可视化特性的指导原则。它遵循 Ant Design 设计价值观的同时，对数据可视化领域的进一步解读，如色彩、字体的指引。

我们经过大量的项目实践和经验总结，总结了以下四条核心原则，并以重要等级进行排序，四条原则相辅相成且呈递进关系，希望你在设计时也可以采纳：

• 准确：从数据转化到可视表达时不歪曲，不误导，不遗漏，忠实反映数据里包含的信息。
• 有效：信息传达有重点，克制不冗余，避免信息过载，用最适量的数据-油墨比（Data-ink Ratio）表达对用户最有用的信息
• 清晰：表现方式清楚易读，具条理性，可以帮助用户快速达成目标，在最少的时间内获取更多的信息。
• 美：对数据的完美表达，合理利用视觉元素进行艺术创作，不过度修饰，给用户优雅的体验。

最后，非常欢迎参入 issue 讨论或者代码 PR：github.com/antvis/G2Pl…。