【报表设计】父子饼图设计

收藏

本帖最后由 Eden.Sun 于 2024-8-21 14:46 编辑

分享一个最近遇到的父子饼图使用场景，今天分享给大家，大家可以根据自己的场景使用。

1. 需求场景
饼图的主图显示所有数据的分类占比，但是只显示主数据的标签和信息，其余的数据在子图上显示。如下：
1724147492240.png880268249.png

2. 需求分析
2.1 从上面的图可以很直观的看到，这就是两个饼图，中间使用线条进行连接。而数据上，主图只有面积最大的一部分显示数据标签：名称+占比，剩余的数据在子图上显示。
2.2 子图没有什么特殊的，就是正常的饼图显示数据，添加一个过滤条件把最主数据过滤掉
2.3 主图的设计，可以看到最大的区域是公司本部的数据，其余的是分公司数据。从设计角度来说，主图的样式可以保持不变，对于样式并不要求，只要数据显示正确即可，这可以给主图绑定一个固定数据的数据集，保证每一部分的数据一直不发生变化；
2.4 两个饼图之间的连接线，可以使用线条组件模拟。由于主图的样式不变，所以调整位置实现视觉效果即可。

3. 设计实现
3.1 首先是创建两个饼图，分别绑定数据集。添加两个线条组件，大致构建出主体：
image.png205806578.png