---
order: 22
navTitle: 饼图
---
# 仪表板组件-饼图

饼图是以扇形区域大小表示每一个数值相对于总数值的占比。比如展示不同价格档次的销售数量占比：

![饼图](./images/2020-08-04-15-55-30.png)

示例地址：[饼图](https://demo.succbi.com/v5/bi/pie)

## 使用饼图组件{#start}

饼图的**指标**上至少取1个度量，如销售数量；取一个维度到[颜色](../../design/data/data-style/color.md)进行分组，如价格档次等。饼图中要绘制的数值大小不能含有负值。

**操作步骤**

![饼图](./images/2023-05-05-14-21-33.gif)

1. 双击或拖入度量【销售数量】到**指标**
2. 双击或拖入维度【价格档次】到**颜色**

通过上述2个步骤，即可展示不同价格档次的服装销量占比。

## 属性介绍{#properties}

### 布局{#layout}

在**样式**>**系列**>**布局**>处，可对饼图的内外半径、起始角度、增长方向进行设置。

![设置起始角度及增长方向](./images/2020-08-20-15-26-08.png)

- **内半径**：设置饼图当前系列的内半径，默认为0%，最大值为99%
- **外半径**：设置饼图当前系列的外半径，默认为0%，最大值为100%
- **起始角度**：设置饼图的起始角度，默认为90度
- **顺时针增长**：设置饼图中扇形数据是否顺时针增长，默认勾选
- **通过半径展示数据大小**：设置饼图是否通过半径展示数据大小。默认不勾选，勾选后出现属性**通过圆心角展示数据百分比**，该属性可设置饼图当前系列是否通过圆心角展示数据百分比。这两个属性可实现玫瑰图的效果

## 更多效果{#scenarios}

可以通过自定义饼图的取数和样式来实现不同效果的饼图。

|  [玫瑰图](#玫瑰图)  | [断开环形饼图](#断开环形饼图)| [多系列饼图](#多系列饼图)  | [圆角饼图](#多系列饼图)|
| -------- | -------- | -------- | -------- |
|![玫瑰图](./images/2020-08-06-09-26-50.png)|![断开环形饼图](./images/2020-08-06-10-08-20.png)|![多系列饼图](./images/2023-05-05-14-22-38.png)|![圆角饼图](./images/2023-05-05-13-42-29.png)|

### 玫瑰图{#rose}

玫瑰图通过半径大小和圆心角的占比来展示数据的大小和占比。

![玫瑰图](./images/2020-08-06-09-26-50.png)

**实现方式**

玫瑰图有2种形式：

1. 在**样式**>**系列**>**布局**，勾选**通过半径展示数据大小**
2. 在**样式**>**系列**>**布局**，勾选**通过圆角展示数据百分比**

:::tip

- 通过半径展示数据大小：各个区域的圆心角角度一致，半径长度不一致
- 通过圆角展示数据百分比：各个区域的圆心角不一致，只有先勾选**通过半径展示数据大小**才可实现**通过圆角展示数据百分比**
  :::

![玫瑰图实现](./images/2020-08-07-18-10-17.png)

### 断开环形饼图{#break}

断开环形饼图可以通过设置边框线的颜色与背景色一致，来实现断开环形饼图的效果。

![断开环形饼图](./images/2020-08-06-10-08-20.png)

**实现方式**

1. 在**样式**>**系列**>**布局**，设置内半径和外半径属性达到控制圆环的宽度，实现环形效果
2. 在**样式**>**系列**>**边框**，选择边框线，**颜色**设置为白色，对边框线的粗细进行调节，可调节断开区域的大小

通过以上2个步骤，即可实现按价格档次维度展示销售数量的占比。

![断开环形饼图实现方式](./images/2020-08-07-15-21-39.png)

### 多系列饼图{#series}

多系列饼图通过控制多个系列的外半径以及填充颜色的不同，来实现对应的效果。

![多系列饼图](./images/2023-05-05-14-22-38.png)

**实现方式**

1. 在**数据**>**指标**处引入两个度量，在**数据**>**标记区**，拖入维度设置多系列的**颜色**填充，并在**标签**处拖入所需要的标签字段
2. 在**样式**>**系列**>**布局**>**外半径**，设置内部系列的外半径小于外部系列的外半径，以便区别不同系列。当外部系列的内半径大于内部系列的外半径时为同心环效果

| 内层系列设置  | 内层系列设置| 内层系列设置（同心环）|
| -------- | -------- | -------- |
|![内层](./images/2023-05-05-15-20-21.png)|![外层](./images/2023-05-05-15-21-38.png)|![同心环](./images/2023-05-05-16-58-05.png)|

:::tip

添加多个指标时，**数据**>**指标**处下方指标的效果会叠加在上方指标效果上，因此建议将上方的字段当做外部系列，下方的字段当做内部系列，以防止遮挡。

:::

### 圆角饼图{#border-radius}

可以通过设置饼图的圆角属性，来实现圆角饼图的效果。

![圆角饼图](./images/2023-05-05-13-42-29.png)

**实现方式**

1. 在**样式**>**系列**>**边框**，选择边框线，**颜色**设置为白色，对边框线的粗细进行调节，可调节断开区域的大小
2. 在**样式**>**系列**>**圆角**，设置圆角数值，可调节圆角大小

通过以上2个步骤，即可实现圆角饼图的效果。

![实现方式](./images/2023-05-05-13-48-21.png)