产品文档

层叠玫瑰图

组件说明

层叠玫瑰图是基础饼图的展现形式之一。通过扇形样式展示数据系列中各项的大小与各项总和的比例，通过多系列数据配置的方式，展现数据变化。

效果案例

An image

样式

在样式中可以设置组件的基本属性、全局、坐标轴和系列配置。

1. 基本属性

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

2. 全局

  • 饼图样式
    An image
  • 数值标签
    An image
  • 图例
    An image
  • 轮播动画
    An image

3. 坐标轴

启动后，支持角度轴、径向轴的设置。

  • 角度轴
配置项说明
轴标签角度轴的轴标签，可调整格式、文本样式、展示方式和偏移量
轴线角度轴的轴线颜色和粗细
刻度角度轴的刻度线的颜色、粗细、长度
网格线角度轴的网格线样式
  • 径向轴
配置项说明
轴标签径向轴的轴标签，可调整格式、文本样式、展示方式和偏移量
轴单位径向轴轴标签的单位，可调整单位内容、偏移量和文字样式
轴线径向轴的轴线颜色和粗细
刻度径向轴的刻度线的颜色、粗细、长度
网格线径向轴的网格线样式

4. 系列

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

数据

字段说明
seriesName系列
value单个数据项的数值
点击查看数据结构
[
  {
    "seriesName": "系列一",
    "name": "A",
    "value": 20
  },
  {
    "seriesName": "系列二",
    "name": "A",
    "value": 23
  },
  {
    "seriesName": "系列一",
    "name": "B",
    "value": 14
  },
  {
    "seriesName": "系列二",
    "name": "B",
    "value": 17
  },
  {
    "seriesName": "系列一",
    "name": "C",
    "value": 15
  },
  {
    "seriesName": "系列二",
    "name": "C",
    "value": 17
  },
  {
    "seriesName": "系列一",
    "name": "D",
    "value": 19
  },
  {
    "seriesName": "系列二",
    "name": "D",
    "value": 22
  }
]