轮播饼图是饼图的一种,与其他类别的饼图相比,轮播饼图支持以轮播的方式展示各类别的占比或数值,支持自定义展示百分比值或实际数值,支持自定义类别配置,能够更加形象智地在大屏中展示数据的占比或变化情况。本文档为您介绍轮播饼图各配置项的含义,帮助您快速准确地使用轮播饼图组件。

样式

  • 基础属性
    • 图表尺寸:组件的宽度和高度,单位为px。
    • 图表位置:组件在大屏中的位置,通过横纵坐标来定义,单位为px。
    • 其他:组件的旋转角度和透明度。
  • 饼图属性:饼图的基本属性样式。
    • 内半径:饼图的内半径,输入为占组件高度的百分比,取值范围为0到1。
    • 外半径:饼图的外半径,输入为占组件高度的百分比,取值范围为0到1。

    • 动画时长:各类别的扇形从饼图中向外突出移动时所需的时间,单位为ms。
    • 轮播间隔:一个类别的饼图向外突出的动画完成,进行回缩并开始下一个类别的扇形向外突出动画的时间,单位为ms。
    • 默认颜色:饼图的默认颜色,可参考颜色选择器说明进行修改。

  • 中间百分比部分:饼图中间百分比部分的样式。
    • 文本样式
      • 字体:中间百分比部分文本的字体,默认为微软雅黑
      • 字体颜色:中间百分比部分文本的颜色。
      • 字体粗细:中间百分比部分文本的字体粗细。
      • 自动换行:勾选后,当中间百分比部分的文本超出其宽度后,内容会自动换行,否则文本会溢出。

      • 显示真实值:勾选后,显示数据的真实数值;去勾选,显示系统自动计算的数据所占的百分比值。

      • 百分号:百分比数值的单位符号。
      • 百分号字号:百分比数值的单位符号的文本大小。
      • 百分号位置:百分比数值的单位符号的位置,可选:前置、后置。
      • 百分号偏移值:百分号和百分数的距离。
        说明 以上四个百分号的相关配置仅在未勾选 显示真实值时有效。


      • 小数点位数:数值所显示的小数点位数,百分比和真实数据都适用,取值范围为0到10。

      • 外框占比:中间百分比部分的宽度,输入数值为所占饼图外半径的比例,取值范围为0到1。若设置的小,会导致数字和符号显示在两行,过小则会挤在一起。
      • 数字占比:中间百分比部分的高度,输入数值为所占饼图外半径的比例,取值范围为0到1。



      • 数字字号:数字文本的大小。
      • 描述字号:数字下的类别名文本的大小。

  • 图例:图表的图例样式,可单击眼睛图标控制图例的显隐。
    • 文本
      • 字号:图例文本的大小。
      • 颜色:图例文本的颜色。
      • 字体粗细:图例文本字体的粗细。

      • 左右间距:相邻图例之间左右两侧的距离,仅当有多个系列时该配置项才有效。
      • 上下间隔:图例与组件上下边界的距离。
      • 位置:图例相对于组件起始坐标的位置,可选。

  • 自定义类别:单击右侧的+号或垃圾桶图标,添加或删除一个自定义类别。
    标签
    • 背景颜色:饼图中,该类别下的扇形的颜色。

数据



上图中的示例JSON代码如下:
[
  {
    "type": "TYPE_1",
    "value": 32
  },
  {
    "type": "TYPE_2",
    "value": 54
  },
  {
    "type": "TYPE_3",
    "value": 45
  },
  {
    "type": "TYPE_4",
    "value": 12
  },
  {
    "type": "TYPE_5",
    "value": 40
  }
]
  • type:区分不同类别,与类别中的类别名对应。
  • value:类别值。

交互

此组件没有交互事件。