# 占比饼图

占比饼图是饼图的一种，与基本饼图相比，占比饼图能够同时展示数据中一个或多个类目的预期目标和当前进度的真实值，以及当前进度占预期目标的百分比值。

# 属性

# 基础

基本属性： 同组件管理 -> 属性 -> 基本属性
系列颜色： 类目扇区的颜色，可添加选择颜色显示，默认情况下类目扇区的颜色为主题的颜色。

# 系列

宽度： 类目扇区的宽度。
间隔： 类目扇区间的间隔。
最大半径： 饼图的最大半径。
阴影比例： 自定义阴影占整个圆的比例。
阴影颜色： 自定义阴影的颜色。
选择模式： 包括不可选，单选，多选三个选项，在对组件进行保存后展示时可对组件中的饼图的各个区域进行选择。
排布方式： 分为顺时针排布和逆时针排布两种。
圆心坐标： 饼图的中心(圆心)坐标。可为数值和%。
饼图半径：
- 起始角度： 开始角度。
- 最小角度： 最小的扇区角度，用于防止某个值过小导致扇区太小影响交互。
普通状态样式：
- 文本标签： 指占比饼图图形上的文本标签，可用于说明图形的一些数据信息，例如值、名称等。
  - 显示文本： 是否显示文本。
  - 内容格式器： 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。
    
    字符串模板变量
    - {a} : 系列名。
    - {b} : 数据名。
    - {c} : 数据值。
    - {d}: 百分比。
      
      示例：
      {b}: {d}
  - 位置： 标签的位置。
  - 文字距离： 本文间的距离。
  - 文字旋转： 文字旋转角度。
  - 文字偏移： 文字相对于原本位置的偏移。
  - 字体颜色： 文本标签字体颜色。
  - 字体大小： 文本标签字体大小。
  - 字体粗细： 文本标签字体粗细。
  - 字体： 文本标签字体样式。
- 图形样式
  - 渐变色： 是否开启渐变色。
  - 渐变色方向： 渐变色方向。
  - 渐变色范围： 渐变色从起始颜色到结尾颜色的变化区间。
  - 颜色： 图形整体颜色。
  - 描边颜色： 图形描边颜色。
  - 描边线宽： 图形描边宽度。
  - 描边类型： 图形描边类型。
  - 圆角半径： 饼图扇形区块的内外圆角半径，支持设置固定数值或者相对于扇形区块的半径百分比值。
  - 阴影属性： 自定义饼图在垂直方向和水平方向上的阴影，同时可以设置饼图的模糊效果。
高亮状态样式： 鼠标放到扇区上时高亮的扇区和样式。
- 扇区放大： 鼠标放置在类目扇区时使扇区放大。
- 放大尺寸： 鼠标放置在类目扇区时扇区放大的尺寸。
- 聚焦高亮： 鼠标放置在类目扇区时时扇区高亮显示（聚焦当前所在系列）。
- 文本标签： 指占比饼图图形上的文本标签，可用于说明图形的一些数据信息，例如值、名称等。
  - 显示文本： 是否显示文本。
  - 内容格式器： 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。
    
    字符串模板变量
  - {a} : 系列名。
  - {b} : 数据名。
  - {c} : 数据值。
  - {d}: 百分比。
  示例：
```
{b}: {d}
```
  - 文字距离： 文字间的距离。
  - 文字旋转： 文字旋转角度。
  - 文字偏移： 文字相对于原本位置的偏移。
  - 位置： 标签的位置。
  - 字体颜色： 文本标签字体颜色。
  - 字体大小： 文本标签字体大小。
  - 字体粗细： 文本标签字体粗细。
  - 字体： 文本标签字体样式。
- 图形样式
  - 渐变色： 是否开启渐变色。
  - 渐变色方向： 渐变色方向。
  - 渐变色范围： 渐变色从起始颜色到结尾颜色的变化区间。
  - 颜色： 图形整体颜色。
  - 描边颜色： 图形描边颜色。
  - 描边线宽： 图形描边宽度。
  - 描边类型： 图形描边类型。
  - 圆角半径： 饼图扇形区块的内外圆角半径，支持设置固定数值或者相对于扇形区块的半径百分比值。
  - 阴影属性： 自定义饼图在垂直方向和水平方向上的阴影，同时可以设置饼图的模糊效果。
选中扇区样式： 选中状态下扇区的样式，选择模式为单选或多选时生效。
- 文本标签： 指占比饼图图形上的文本标签，可用于说明图形的一些数据信息，例如值、名称等。
  - 显示文本： 是否显示文本。
  - 内容格式器： 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。
  字符串模板变量
  - {a} : 系列名。
  - {b} : 数据名。
  - {c} : 数据值。
  - {d}: 百分比。
  示例： {b}: {d}
  - 文字距离： 本文间的距离。
  - 文字旋转： 文字旋转角度。
  - 文字偏移： 文字相对于原本位置的偏移。
  - 位置： 标签的位置。
  - 字体颜色： 文本标签字体颜色。
  - 字体大小： 文本标签字体大小。
  - 字体粗细： 文本标签字体粗细。
  - 字体： 文本标签字体样式。
- 图形样式
  - 渐变色： 是否开启渐变色。
  - 渐变色方向： 渐变色方向。
  - 渐变色范围： 渐变色从起始颜色到结尾颜色的变化区间。
  - 颜色： 图形整体颜色。
  - 描边颜色： 图形描边颜色。
  - 描边线宽： 图形描边宽度。
  - 描边类型： 图形描边类型。
  - 圆角半径： 饼图扇形区块的内外圆角半径，支持设置固定数值或者相对于扇形区块的半径百分比值。
  - 阴影属性： 自定义饼图在垂直方向和水平方向上的阴影，同时可以设置饼图的模糊效果。
初始动画：
- 开启动画： 开启动画。
- 动画时长： 初始动画的时长，支持回调函数，可以通过每个数据返回的不同的时长实现更戏剧化的初始动画效果。
- 缓动效果： 初始动画的缓动效果。

# 数据

静态数据： 在页面上直接对数据进行编辑。
数据资源：

上图中的示例JSON代码如下：

    {
        "name": "一月",
        "value": 74
    },
    {
        "name": "二月",
        "value": 40
    },
    {
        "name": "三月",
        "value": 25
    }
]

name： 维度，各类目扇形的名称。
value： 度量，各类目扇形的值，决定各类目扇形占总数据的百分比。

# 交互

勾选启用，开启组件交互功能。当单击占比饼图的柱条时，绑定字段中数据会推送到变量中。关联此变量的组件将携带此变量值，触发数据请求，查询相关数据，更新组件。具体配置请参考组件交互。

# 扇区选中事件

勾选启动，扇区被选中时触发交互事件。

# 扇区悬停事件 3.0+

勾选启动，鼠标在扇区悬停时触发交互事件。

# 扇区移出事件 3.0+

勾选启动，鼠标移出扇区后触发交互事件。

# 数据响应

占比饼图支持数据响应配置。

# 数据上卷、下钻

占比饼图支持数据上卷、下钻功能。

# 节点编程

# 事件

图表配置转换完成后： 图表 Option 配置转换完成后事件。
- 抛出的参数： 配置完成后的 Option 。
扇区选中事件： 扇区单击触发事件。
- 抛出的参数： 扇区所携带的数据。
扇区悬停事件： 扇区鼠标悬停触发事件。
- 抛出的参数： 扇区所携带的数据。
扇区移除事件： 扇区鼠标触发事件。
- 抛出的参数： 扇区所携带的数据。
图例切换事件： 图表图例切换时触发。
- 抛出的参数： 切换的图例名称及选中状态。

# 动作

导入图表配置： 可导入 Echarts 图表 Option 配置。
- 接收的参数： 修改后的 Option 。

设置图例： 设置图例的选中状态。

  {
    "类型一": true,
    "类型二": false,
    "类型三": false
  }

← 轮播饼图柱状图 →