设置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”属性，适用于分级占比展示（如“工厂 - 车间 - 设备三级能耗占比”）。

是

图表容器宽度

设置饼图容器的宽度。

是

图表容器高度

设置饼图容器的高度。

是

显示加载状态

控制是否启用加载状态。

是

暂无数据

控制无数据时是否显示占位提示。

是

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配置项。

元素id值

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

是

样式类

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

是

ref引用类

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

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

是