轮播环形饼图

组件说明

旋转轮播饼图以运动圆环的形式切割区域展示不同系列的数据形式,可设置不同系列数据展示颜色来区分数据之间的占比差别。

效果案例

An image

样式

在样式中可以设置组件的基本属性、全局、饼图属性、系列和轮播动画配置。

1. 基本属性

  • 位置尺寸
    位置包括组件的横坐标和纵坐标,单位为px;横坐标为组件左上角距离页面左边界的像素距离,纵坐标为组件左上角距离页面上边界的像素距离。尺寸包括组件的宽度和高度,单位为px;可单击比例锁锁定组件宽高比,等比例调整组件的宽高,比例锁默认不锁定。

2. 全局

  • 边距
    基本图表距离整个组件四边(上、下、左、右)的边距
  • 图例
    An image

3. 饼图属性

  • 图形
    用来设置饼图样式。
    半径: 饼图半径。
    类玫瑰图: 开启后,饼图整体将会以玫瑰图形式展现。
    最小半径: 环图内圈半径。
    间距基数: 组成圆环区块之间的间距。
  • 角度
    在此项可设置饼图起始和结束角度。如开启反向则会反向展示。
  • 描边
    饼图间系列和整体范围描边样式。
    宽度:描边线条的宽度。
    颜色:描边线条颜色。

4. 系列

首先说明顺序:顺序即为按在数据中设定的顺序展示系列值,可选择按照数据返回顺序、从大到小和从小到大。

配置项说明
映射字段名和显示名之间的映射。
颜色对应系列显示颜色。

4. 轮播动画

开启轮播动画,即环形图开始旋转轮播 An image

数据

字段说明
seriesName系列
value单个数据项的数值
点击查看数据结构
[
  {
    "seriesName": "系列一",
    "value": 2024
  },
  {
    "seriesName": "系列二",
    "value": 2378
  },
  {
    "seriesName": "系列三",
    "value": 1423
  }
]