# 设置UI引擎前端页面饼图/环图组件属性 饼图组件是占比类数据可视化组件，通过扇形区域面积占比直观展示各分类数据在总量中的占比关系，广泛适配设备能耗构成分析、生产物料占比统计、故障类型分布、产能利用率拆解、多产线产量占比等需求。该组件支持饼图、圆环图、多重圆环图等样式，可自定义颜色、文本、描边等属性，结合数据源动态渲染，助力用户快速掌握数据构成特征。 #### 前提条件 已在当前页面添加"饼图"或"环图"组件，具体操作请参见[为UI引擎前端页面添加物料组件](https://support.huaweicloud.com/usermanual-idme/idme_ui_0016.html)。 #### 配置入口 1. 在页面设计器的中心画布区，单击选中"饼图"组件。 2. 在右侧设置面板中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002503567310.png)，即可展开"属性"设置面板。 #### 基础属性 | 属性名称 | 说明 | 支持状态变量绑定 | |:---|:---|:---| | 图表数据 | 配置饼图需渲染的核心数据，数据格式需包含分类名称、数值等核心字段（如"\[{name: '设备A能耗', value: 200}, {name: '设备B能耗', value: 300}\]"）。 如果选择"多重圆环图"类型，数据需包含"children"属性及对应子数据。 | 是 | | 颜色 | 配置饼图每个扇形区域的颜色，值为颜色字符串组成的数组（如"\['#2E8B57', '#FF6347', '#4169E1'\]"）。 多扇形区域时会从数组中循环取值，可按数据分类（如故障类型、产线名称）配置差异化颜色，提升分类辨识度。 | 是 | | 描边配置 | 自定义饼图每个扇形区域的边框样式，值为对象类型。可配置项： - borderColor：边框的颜色。 - borderWidth：边框的宽度。 - borderRadius：边框的圆角幅度。 | 是 | | 外侧文本配置 | 自定义饼图外侧文本的展示样式，值为对象类型。可配置项： - show：是否显示外侧文本。 - type：圆盘外侧显示的文本格式。可选项有： - name：展示数据名称。 - value：展示数据的值。 - percent：展示百分比信息，保留两位小数。 - line：是否展示图表与外侧文本之间的连线。 - lineColor：图表与外侧文本之间连线的颜色。 | 是 | | 图表内边距值 | 设置图表组件内边距，值为数值数组，顺序对应"\[上，右，下，左\]"，单位为像素（如"\[10, 15, 10, 15\]"）。 | 是 | | 图例配置 | 用于标识饼图中不同扇形区域对应的分类（如不同产线、不同故障类型），配置规则与条形图图例配置完全一致，详情请参见[图例配置](https://support.huaweicloud.com/usermanual-idme/idme_ui_0064.html#ZH-CN_TOPIC_0000002526250737__section2012942452515)。 | 是 | | 图表位置及大小 | 控制饼图的中心位置与半径大小，值为对象类型。 - center：图表中心位置，数组类型，支持百分比（如"\['50%', '50%'\]"，容器居中）或像素值（如"\[200, 200\]"），百分比配置适配大屏自适应需求。 - radius：内外半径，数组类型"\[内径, 外径\]"，支持百分比或像素值（如"\['30%', '60%'\]"）。内径为0时显示饼图，大于0时显示圆环图。 | 是 | | 标题配置 | 自定义饼图中心的标题文本，值为对象类型，具体配置请参见[表1]。 | 是 | | 圆盘图类型 | 配置饼图样式类型。可选项包括： - 饼图：传统实心扇形样式，适用于简单占比展示。 - 圆环图：空心环形样式，视觉更轻量化，适配大屏多组件布局。 - 多重圆环图：多层环形嵌套，需数据包含"children"属性，适用于分级占比展示（如"工厂 - 车间 - 设备三级能耗占比"）。 | 是 | | 图表容器宽度 | 设置饼图容器的宽度。 | 是 | | 图表容器高度 | 设置饼图容器的高度。 | 是 | | 显示加载状态 | 控制是否启用加载状态。 | 是 | | 暂无数据 | 控制无数据时是否显示占位提示。 | 是 | 表1标题配置 | 属性名称 | 类型 | 说明 | |:---|:---|:---| | text | string | 主标题文本，为空字符串时不显示标题。 | | subtext | string | 副标题文本，为空字符串时不显示副标题。可补充数据单位、统计周期等信息（如"统计周期：2024-01-01 至 2024-01-31"）。 | | top | string \| number | 标题相对图表容器顶部的间距，默认为"center"。 | | left | string \| number | 标题相对图表容器左侧的间距，默认为"center"。 | | itemGap | number | 主标题与副标题之间的间距。 | | textStyle | TextStyle | 主标题样式，具体配置请参见[\*TextStyle配置项](https://support.huaweicloud.com/usermanual-idme/idme_ui_0064.html#ZH-CN_TOPIC_0000002526250737__section1426657153620)。 | | subTextStyle | TextStyle | 副标题样式，具体配置请参见[\*TextStyle配置项](https://support.huaweicloud.com/usermanual-idme/idme_ui_0064.html#ZH-CN_TOPIC_0000002526250737__section1426657153620)。 | #### 其他 如下属性适用于UI引擎所有组件，用于精细化控制。 | 属性名称 | 说明 | 是否支持变量绑定 | |:---|:---|:---| | 元素id值 | 对应HTML标签的"id"属性，同一页面内必须唯一。 | 是 | | 样式类 | 对应HTML标签的"class"属性，为空格分隔的类名列表，用于自定义组件样式。默认为"component-base-style"。 | 是 | | ref引用类 | 对应Vue的"ref"属性，用于注册模板引用以访问组件实例方法。 如果为"数据源表单"组件，会自动填充默认值。 | 是 |