跳到主要内容

饼图

主要显示各部分在整体中的占比情况，可以直观看到不同的数据比例。

何时使用​

用于需要分析占比的场景，通过分布比例显示数据差异，例如：

  • 显示男女比例
  • 显示汽车品类销售数据比例
  • 显示平台推广数量和实际订单的比例
  • 显示南北人口分布比例
  • 显示资产和年龄分布比例

一、属性​

1. 数据源​

数据源绑定方式详见 数据绑定。

2. 数据​

绑定数据名和绑定数据值分别决定饼图各区域的名称与占比。

image-20250605092202007

3. 标题​

可设置饼图的主标题与副标题样式，包括字号、颜色、位置等。

image-20250605093218157
image-20250605093242682

4. 外观​

设置饼图展示形式，包括是否启用南丁格尔图、环形图，及其半径、尺寸等。

image-20250605093707978

  • 南丁格尔图

    image-20250605093753593

  • 环形图

    image-20250605093825611

  • 同时开启南丁格尔图和环形图

    image-20250605093950592

5. 图例​

配置图例的展示样式，例如位置、图形形状、尺寸、文字大小等。

image-20250605094526683
image-20250605094550858

6. 标签​

可配置是否显示每个扇形区域的标签、标签位置和大小。

image-20250605100248830
image-20250605100306271

7. 提示框​

设置鼠标悬停时的提示框，控制其是否显示、文字颜色和字号。

image-20250605101943118
image-20250605101932297

8. 预设颜色列表​

饼图区域颜色将按预设颜色列表顺序自动分配。

image-20250605103005949
image-20250605103027158

9. 状态​

详见 通用属性。

二、规则​

1. 表单校验​

暂无特殊说明。

2. 显示控制​

详见 显示控制。

三、样式​

详见 通用样式。

四、常见使用场景​

1. 显示男女比例​

PieChart01

2. 显示汽车品类销售数据​

PieChart02

3. 显示平台推广和订单量数据​

PieChart03