饼图


饼图以一个被分割成不同比例切片的圆表示数据在总量中的占比,数值通常用百分比表示。饼图的所有部分加起来等于 100%。

Pie

饼图的类型


饼图的基础类型是一张环形饼图,在此基础上,DTV 预置了几种常见的饼图类型。在页面添加饼图时,可以根据业务场景从以下类型中选择:

饼图类型

样式

描述

推荐场景

基础饼图

../_images/pie_23.png

展示单个指标的多种构成比例。

展示某个指标的整体占比情况。

基础饼图(带数据标签)

../_images/pie_24.png

在基础饼图的基础上添加数据标签。

除了展示占比外,还需要直观地展示具体数值。

实心饼图

../_images/pie_25.png

在基础饼图的基础上将饼图填充为实心。

视觉效果更加突出。

多指标饼图

../_images/pie_26.png

展示多个指标的构成比例。

当你的数据为仅有多个指标,不存在一个维度将各数据进行汇总时,多指标饼图可以帮助你生成展示多个指标占比分布情况的饼图。

多指标饼图(带数据标签)

../_images/pie_27.png

在多指标饼图的基础上添加数据标签。

除了展示占比外,还需要直观地展示具体数值。

玫瑰图

../_images/pie_28.png

通过扇形的角度和长度来展示各个维度指标的占比情况,更清晰地展示各个指标之间的相对大小和占比关系。

适合用于需要对比分析和占比比较的场景。

饼图的数据


饼图中的数据以指标为核心,通过维度来限制和细分指标数据,通过扩展来丰富展示数据趋势。

有关数据源、数据项的更多信息,参见 组件通用配置

基础饼图


当你的数据同时存在维度与指标的数据时,例如下图数据中,Type 为维度,CarbonEmission 为指标。


Pie


此时可以按照以下方式配置基础饼图的数据:


Pie

指标


指标是饼图中展示的核心数据。在上面的例子中,基础饼图展示 CarbonEmission 指标在不同 Type 下的数据占比,饼图中的各块区域展示每一设备类型下的碳排放量值,这里的碳排放量即为 指标。基础饼图中仅支持添加 1 个指标。


Pie

维度


在数据源中,指标已经基于某一维度进行分类,例如指标数据可按设备类型 Type 分成若干行数据。此时可以在 维度 中配置 Type 数据项。配置后,饼图可展示 1 个指标数据在不同维度下的数据及其占比。


Pie


若你的数据中不存在维度,希望使用多个指标数据生成单个饼图,可使用多指标饼图。

扩展


若你需要在饼图中展示其它信息,例如指标的上月同期值,可在 扩展 中添加数据项,将上月同期数据展示在饼图中。


Pie


可将 扩展 数据展示在饼图中的下列位置:

  • 总和:总和位于饼图的中心,默认情况下 总和 中展示指标所有数值累加后的值。你可以在 展示扩展字段 中将总和中的数值替换成任一 扩展 字段,总和 将展示扩展字段的第一个值。例如选择 LastMonthCarbonEmission 后,总和 将展示 Type A 的上月同期排碳量。

    Pie
  • 图例:默认情况下图例中的数值是饼图中各扇形区域的数值。你可以在 展示扩展字段 中将图例中的数值替换成任一 扩展 字段,作为饼图指标数值的参照数据。

    Pie

多指标饼图


当你的数据并没有维度,例如下表中,仅有多个指标数据,基础饼图并不能支持该类数据。此时,推荐使用多指标饼图来生成图表。


Pie


可以按照以下方式配置多指标饼图的数据:


Pie

指标


指标是饼图中展示的核心数据。在上面的例子中,多指标饼图展示每个 Type 指标数据在总和中的占比。默认展示最新一条数据,即数据列表中的第 1 行数据。如有需要,可以通过 维度聚合,将指标下的数据按列聚合后展示,聚合方式有 求和平均 等。有关维度聚合,参见 聚合展示数值


Pie


Pie

扩展


在多指标饼图中,扩展字段无效。

饼图的样式


样式 标签页中,你可以配置饼图的样式。以下是部分饼图样式配置项的说明。

内外径比例


当你的 饼图形状环形 时,饼图的展示面积将由外圆和内圆共同决定。其中:

  • 内径 是饼图中心的内圆的直径。

  • 外径 是外圆与内圆直径的差。

你可以通过调整内径和外径的比例,来调整 环形 的厚度。


Pie

共享样式


在共享样式中,你可以统一配置饼图中每一个数值的样式,包括 总和图例数据标签。共享的样式包括:


Pie

布局比例


布局比例 是饼图区和图例区在饼图组件中所占位置的比例。当图例内容过长,或饼图上的文字展示不全时,可通过调整布局比例,为图例或饼图适当分配更多展示空间。

当饼图区占比变化时,饼图将等比例放大或缩小,饼图上的文字、标签等元素保持大小不变。当图例区占比变化时,图例将向右或向左偏移,图例中的文字、标签等元素将保持大小不变。


Pie


勾选 自动 后,图例将位于最右(默认靠右,可通过 图例位置 调整位置),饼图区和图例区将根据组件大小、展示内容等自动调整比例。

数据展示个数


数据展示个数 是饼图中具体展示的数据数量,其它未展示的数据将合并为 其它。例如,当 数据展示个数 为 2 时,饼图将按数值降序,仅展示数值较大的前 2 个数值,其余数值将合并为 其它,作为第 3 项数值。


Pie


备注

设置 数据展示个数 后,饼图固定展示数值较大的数据。此时在 数据 标签页中调整 维度指标 等数据项的排序将无效。

展示扩展字段


扩展 中添加数据项后,可在 展示扩展字段 中配置扩展字段的展示位置,用于展示饼图数据以外的其它数据。参见 扩展


Pie

布局


布局 是组件中饼图的排列布局。在基础饼图中,1 个指标对应 1 个饼图。若添加了多个 指标,组件中将展示多个饼图。此时可通过 布局 调整组件中饼图的排列。


Pie

总和数据


总和 是位于饼图中心的数值。默认情况下,总和 展示饼图上已有数值的和,单位与其它数值相同。如有需要,可在 展示扩展字段 中配置饼图中心展示其它字段。


Pie

图例


图例是饼图中一种常见的辅助元素,帮助用户更好地解读饼图中的数据。图例通常包含以下信息:

  • 颜色图标:每个扇形区域对应的颜色标注。

  • 名称:每个扇形区所代表的数据项名称。在基础饼图中,名称通常是 维度。在多指标饼图中,名称是 指标 的名称。

  • 数值或百分比:每个扇形区的具体数值或占比。

  • 单位:数值的单位。


Pie

图例名称展示字数


图例名称展示字数 决定了饼图图例的名称展示长度。例如,设置 图例名称展示字数 为 3 时,饼图的图例名称将仅展示前 3 个字符,其它字符省略。1 个汉字计为 1 个字符。

如不指定,默认将展示 10 个字符,其它字符省略。


Pie

图例位置


图例位置是图例相对于饼图的位置。图例位置默认靠右。

  • 当图例靠左或靠右时,可通过 布局比例 调整图例在组件中所占的比例。

  • 当图例靠上或靠下时,图例的占比固定不变,无法调整。


Pie

数据标签


数据标签是标注在每个扇形区上的文字或数值信息,合理设置数据标签的位置和样式可有效提高饼图的可读性。

  • 标签位置:配置数据标签展示在饼图外、饼图上或饼图中心。

  • 标签字体:配置数据标签的字体、大小和颜色。


Pie