![写给UI设计师看的数据可视化设计](https://wfqqreader-1252317822.image.myqcloud.com/cover/705/38209705/b_38209705.jpg)
2.1.4 占比图形
占比图形主要用于展示分类数据占整体的比例情况,常用的图形有饼图、环形图、堆积面积图、矩形树图、旭日图等。
1. 饼图
提到数据的占比,相信你第一个就会想到饼图,如图2-16所示。饼图是展示占比数据最直观的图形,通过弧度大小来表示分类的占比多少。但饼图有一定的局限性,当占比数值接近或占比分类过多时,在视觉上就不容易辨别各个类别占比的大小。
在数据可视化产品中,因为饼图是大面积的色块,视觉上会非常突显,很容易抢走重要数据的风头,所以使用时要酌情考虑。
![](https://epubservercos.yuewen.com/7DF7E2/20118171808700306/epubprivate/OEBPS/Images/049-1.jpg?sign=1738858943-9CUNTuaBfrlgYYETl2YqMTyQ9u8bwI0C-0-e3ef4bf6a03f84fd83b681cdf8bc915a)
图2-16
2. 环形图
环形图与饼图最明显的区别就是中间区域是空的。因为环形图的视觉表现不像饼图那样突出,在环形图的空心区域还可以放图标、标题、数据等,相对饼图其利用率更高,所以在数据可视化产品中更受欢迎,如图2-17所示。
![](https://epubservercos.yuewen.com/7DF7E2/20118171808700306/epubprivate/OEBPS/Images/050-1.jpg?sign=1738858943-wXPxqPvPNaSnZ2bbbGcq52JvsTQgFrTF-0-95d9e170c091eaab7ffced4adcbf3b5d)
图2-17
3. 堆积面积图
堆积面积图是叠加数据,没有重叠的部分,它的整体色块面积就是数据总量,其中不同的分类数据可展示不同的占比情况。图2-18所示不仅可以展示店铺三种商品的总销量,还可以展示每种商品在对应月份上的占比情况。
![](https://epubservercos.yuewen.com/7DF7E2/20118171808700306/epubprivate/OEBPS/Images/050-2.jpg?sign=1738858943-TGykEQDaGvScOmodZaVKwRGxFPUEF1rQ-0-2c253080bf64bfe8443b8189de1c8ec1)
图2-18
另一种形式的堆积面积图是100%堆积面积图,即所有分类的总占比为100%,其同样是展示总量下分类的占比情况,只是数据结构有差异。
如果堆积面积图是随时间变化的,则能体现数据的时间趋势;如果它不是随时间变化的,则主要强调占比和对比情况。除了用堆积面积图,你还可以考虑使用堆积柱状图。
4. 矩形树图
矩形树图是非常直观的占比图形,可展示多层级结构的占比情况。如果用不同颜色表示各个分类,则可以在大分类中不断下钻二级分类。图2-19所示为某些手机品牌及下钻到二级的型号分类。需要注意的是,在不断下钻的同时要保证图形的易读性。
![](https://epubservercos.yuewen.com/7DF7E2/20118171808700306/epubprivate/OEBPS/Images/051-1.jpg?sign=1738858943-F5mnrk1AfLikXaz5LZ3tY9PBeESWnGPt-0-965a736f85bf919a77d1e8501a3fae2e)
图2-19
5. 旭日图
旭日图相当于多个饼图,能够展示多层级的数据,同时还能够表示各分类的关系及占比情况。如图2-20所示,不同的颜色代表不同的分类,一个圆环代表一个层级,每个层级中可以有多个表示此层级下占比的类别。旭日图最内层的圆环层级最高,越往外层级越低。
![](https://epubservercos.yuewen.com/7DF7E2/20118171808700306/epubprivate/OEBPS/Images/052-1.jpg?sign=1738858943-JOqf5OnqxgDbU0iC2vHqt1c0dmSYCzKa-0-3b0d842eb25622984fe0970361158dde)
图2-20