单值百分比饼图是饼图的一种,与基本饼图相比,单值百分比饼图适用于展示单个类别与总体的数据占比情况,不支持多数据系列的配置。本文档为您介绍单值百分比饼图各配置项的含义,帮助您快速准确地使用单值百分比饼图组件。

样式

  • 基础属性
    • 图表尺寸:组件的宽度和高度,单位为px。
    • 图表位置:组件在大屏中的位置,通过横纵坐标来定义,单位为px。
    • 其他:组件的旋转角度和透明度。
  • 饼图属性:饼图的基本属性样式。

    • 内半径:饼图的内半径,输入为占组件高度的百分比,取值范围为0到1。
    • 外半径:饼图的外半径,输入为占组件高度的百分比,取值范围为0到1。
    • 饼图填充底色:饼图的底色,显示为扇形未被覆盖的部分,可参考颜色选择器说明进行修改。
  • 扇形配置

    • 起点色值:饼图正上方扇形起始点的颜色。
    • 末端色值:扇形结束点的颜色,饼图中的扇形颜色为起点颜色到末端颜色的渐变色。
    • 动画持续时间:饼图从起点逐渐增长直至末端的持续时间。
  • 中间百分比部分:饼图中间百分比部分的样式。
    • 文本样式
      • 字体:中间百分比部分文本的字体,默认为微软雅黑
      • 字体颜色:中间百分比部分文本的颜色。
      • 字体粗细:中间百分比部分文本的字体粗细。
      • 外框占比:中间百分比部分的宽度,输入数值为所占饼图外半径的比例,取值范围为0到1。若设置的小,会导致数字和符号显示在两行,过小则会挤在一起。

      • 数字字号:数字文本的大小。
      • 百分比符号:百分比数值的单位符号。
      • 百分比字号:百分比数值的单位符号的文本大小。
      • 百分比位置:百分比数值的单位符号的位置,可选:前置、后置。
      • 百分比偏移值:百分号和百分数的距离。

数据



上图中的示例JSON代码如下:
[
  {
    "value": 0.832
  }
]

Value:扇形所占饼图的百分比,值为小数,1表示100%。

交互

此组件没有交互事件。