设置UI引擎前端页面饼图/环图组件属性

饼图组件是占比类数据可视化组件，通过扇形区域面积占比直观展示各分类数据在总量中的占比关系，广泛适配设备能耗构成分析、生产物料占比统计、故障类型分布、产能利用率拆解、多产线产量占比等需求。该组件支持饼图、圆环图、多重圆环图等样式，可自定义颜色、文本、描边等属性，结合数据源动态渲染，助力用户快速掌握数据构成特征。

前提条件

已在当前页面添加“饼图”或“环图”组件，具体操作请参见为UI引擎前端页面添加物料组件。

配置入口

在页面设计器的中心画布区，单击选中“饼图”组件。
在右侧设置面板中，单击，即可展开“属性”设置面板。

基础属性

属性名称	说明	支持状态变量绑定
图表数据	配置饼图需渲染的核心数据，数据格式需包含分类名称、数值等核心字段（如“[{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]”）。	是
图例配置	用于标识饼图中不同扇形区域对应的分类（如不同产线、不同故障类型），配置规则与条形图图例配置完全一致，详情请参见图例配置。	是
图表位置及大小	控制饼图的中心位置与半径大小，值为对象类型。 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配置项。
subTextStyle	TextStyle	副标题样式，具体配置请参见*TextStyle配置项。

其他

如下属性适用于UI引擎所有组件，用于精细化控制。

属性名称	说明	是否支持变量绑定
元素id值	对应HTML标签的“id”属性，同一页面内必须唯一。	是
样式类	对应HTML标签的“class”属性，为空格分隔的类名列表，用于自定义组件样式。默认为“component-base-style”。	是
ref引用类	对应Vue的“ref”属性，用于注册模板引用以访问组件实例方法。如果为“数据源表单”组件，会自动填充默认值。	是

属性名称

说明

是否支持变量绑定

元素id值

对应HTML标签的“id”属性，同一页面内必须唯一。

是

样式类

对应HTML标签的“class”属性，为空格分隔的类名列表，用于自定义组件样式。默认为“component-base-style”。

是

ref引用类

对应Vue的“ref”属性，用于注册模板引用以访问组件实例方法。

如果为“数据源表单”组件，会自动填充默认值。