设置UI引擎前端页面条形图/柱状图组件属性

条形图和柱状图是常用的数据可视化工具，用于直观展示数据分布、对比分析等。该组件支持灵活配置柱体样式、坐标轴、图例及文本展示，可结合实时数据实现动态渲染，助力用户快速捕捉数据规律与异常信息。

前提条件

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

配置入口

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

基础属性

属性名称	说明	是否支持变量绑定
图表数据	配置图表需展示的核心数据，支持绑定实时数据源（如设备运行参数、生产统计数据），数据格式需符合组件解析要求，确保柱体正常渲染。	是
柱体方向	设置柱体展示方向，分为“水平方向”（条形图）和“垂直方向”（柱状图），默认值为“水平方向”。通过变量绑定控制时，状态变量值仅支持“vertical”（垂直）和“horizontal”（水平）两种，可根据数据维度多少选择（维度多建议水平方向，避免标签重叠）。	是
颜色	配置柱体颜色，值为色值数组。当同一X轴坐标存在多个柱体（如多设备同一指标对比）时，将循环取用数组颜色，单个柱体仅取用第一个色值。可按数据类型（如正常/异常数据）配置差异化颜色，提升辨识度。	是
图表内边距值	设置图表组件内边距，值为数值数组，顺序对应“[上, 右, 下, 左]”，单位为像素（px）。可根据页面布局调整，避免图表内容与容器边缘、其他组件重叠。	是
柱体样式	自定义柱体细节样式，其值为对象类型。支持以下配置项： barWidth：柱体宽度，数值类型（如10，单位px），避免过宽或过窄影响数据对比。 barGap：同一X轴坐标多柱体间距离，字符串百分比类型（如“50%”），防止柱体挤压重叠。 color：按数据数组下标配置专属颜色，值为函数（“(params)=> string”），可实现数据分级着色（如能耗超标数据标红）。 barMinHeight：柱体最小高度，支持数值（px）或百分比（按数据最大值占比计算），建议使用百分比，确保小数值柱体仍可正常显示，避免数据遗漏。	是
柱体文本	配置柱体上的文本展示，值为对象（作用于所有柱体）或对象数组（按柱体名称依次配置），支持以下配置项： show：布尔值，控制文本是否显示，建议关键数据（如产量、能耗值）显示。 position：文本位置，支持12种选项（如inside、top、insideRight等），需结合柱体方向选择，避免遮挡。 offset：文本偏移量，数组类型“[横向偏移,纵向偏移]”，正数分别对应右移、下移，负数对应左移、上移，用于微调文本位置，避免与柱体重叠。	是
图例配置	设置图表图例的样式与交互功能，值为对象类型，具体配置规则请参见图例配置。可通过图例快速筛选数据系列（如隐藏无需关注的设备数据）。	是
配置x轴	自定义X轴参数，值为对象类型，包括数据关联、标签样式、轴线设置等，具体配置规则请参见X轴配置。	是
配置y轴	自定义Y轴参数，值为对象（统一配置）或对象数组（分别配置多是轴），包括数值范围、单位、刻度间隔等，具体规则请参见Y轴配置。	是
图表容器宽度	设置图表容器宽度，支持像素单位（如500px）或视口宽度单位（如50vw）。终端屏幕尺寸多样，建议使用“vw”单位，确保自适应展示。	是
图表容器高度	设置图表容器高度，支持像素单位（如500px）或视口高度单位（如50vh），需结合数据量调整，避免柱体拉伸变形或显示不全。	是
显示加载状态	控制是否启用加载状态。	是
暂无数据	控制无数据时是否显示占位提示。	是

图例配置

图例用于标识图表中不同数据系列（如不同设备、不同工艺指标），支持样式自定义与交互控制，适配数据筛选与快速识别需求，配置值为对象类型。具体参数如下：

属性名称	类型	说明
show	boolean	控制图例是否显示。数据系列单一（如单设备多时段数据）时可隐藏，节省页面空间。
itemGap	number	设置图例项之间的间隔，单位为像素，避免图例密集重叠，建议根据图例数量调整。
width	number	图例整体宽度，单位为像素，用于固定图例区域大小，适配页面布局。
height	number	图例整体高度，单位为像素，与width配合控制图例区域尺寸。
position	object<{ top: number \| string, left: number \| string, right: number \| string, bottom: number \| string }>	配置图例位置，值支持像素（如20）、百分比（如“20%”）或方位词（top/middle/bottom、left/center/right）。
orient	'horizontal' \| 'vertical'	设置图例的方向。 horizontal：水平方向，默认为“horizontal”。 vertical：垂直方向。
reverseEvent	boolean	控制图例是否支持双击反选（500ms内连续单击视为反选）。单击仅切换自身状态，不影响其他图例。双击反选所有图例状态。
selectedMode	boolean	控制是否可通过单击图例改变对应数据系列的显示状态。
icon	enum	设置图例图标样式（定义“data”属性后此属性失效）。可选值： circle：圆形，默认为“circle”。 line：线段。 rect：长方形。 roundRect：圆角长方形。 triangle：三角形。 diamond：菱形。
data	Array<{ icon: string, iconChange: string, name: string }>	按数据系列自定义图例图标，优先级高于“icon”属性。数组每项对应一个图例： icon：未选中时图标背景（支持base64编码）。 iconChange：选中时图标背景（支持base64编码）。 name：图例名称（与数据系列名称对应）。
itemHeight	number	图例图标的高度，单位为像素（px），与“itemWidth”配合调整图标大小。
itemWidth	number	图例图标的宽度，单位为像素（px），避免图标过大或过小影响视觉效果。
formatter	Function	自定义图例文本显示格式，仅支持通过状态变量绑定实现，不支持直接在配置面板中写函数。
textStyle	TextStyle	图例文本样式，具体配置请参见*TextStyle配置项。
tooltip	object<{ show: boolean }>	控制图例是否显示悬浮提示框。

X轴配置

X轴用于展示数据的分类维度（如时间、设备编号、工艺环节），配置值为对象类型。具体参数如下：

属性名称	类型	说明
data	string	指定图表数据中作为X轴的“key”值，需与数据源字段严格对应，确保数据正常渲染（如数据中“deviceId”、“time”字段）。
name	string	设置X轴文本名称，显示在X轴右侧，用于说明维度类型（如“设备编号”）。
line	object<LineConfig>	控制X轴轴线的显示与样式，具体配置请参见表1。
interval	number	设置X轴标签间隔，默认自适应显示。值大于0时，按间隔显示标签（如“interval=1”表示隔一个标签显示），X轴标签过多（如多时段数据）时可设置，避免标签重叠。
fullGrid	boolean	控制图表是否顶格到X轴左右两边，默认为“false”。
show	boolean	控制是否显示X轴。设置为“false”时，除“data”属性外其他X轴配置均失效。
labelRotate	string \| false	设置X轴标签旋转角度，取值范围-90°~90°，值为false或0时不旋转。标签文字较长（如设备全称）时，可设置为-45°或45°，避免重叠。
ellipsis	object<{ overflow: 'none' \| 'truncate' \| 'break' \| 'breakAll'; width: number; }>	控制X轴标签过长时的展示方式，需配置width（宽度，单位px）才生效。 none：不处理。 truncate：截断并显示省略号（默认为“...”）。 break：换行。 breakAll：强制换行（含单词内换行）。
nameLocation	'end' \| 'center' ('middle') \| 'start'	设置X轴名称（name）的位置，默认为“end”（右侧）。可根据布局调整为“center”（中间）或“start”（左侧）。
nameTextStyle	TextStyle	X轴名称文本样式，具体配置请参见*TextStyle配置项。

表1 LineConfig
属性名称	类型	说明
show	boolean	是否显示X轴轴线。 true：显示。 false：隐藏。
lineStyle.color	string	轴线颜色，格式为十六进制色值（如“#000000”）。建议选用与背景对比明显的颜色，提升辨识度。
lineStyle.width	number	轴线宽度，数值类型（如5，单位px），避免过细导致显示不清晰。
lineStyle.type	string	轴线样式，可选值：“solid”（实线，默认）、“dotted”（点线）、“dashed”（虚线）。
lineStyle.dashOffset	number	虚线偏移量。仅在“type”为“dashed”时生效，用于微调虚线段的起始位置。
lineStyle.cap	string	线帽样式，用于定义轴线末端的绘制方式。可选值： butt：平头，线段末端以方形结束。 round：圆头，线段末端以圆形结束。 square：方头，在线段末端增加一个宽度与线段相同、高度为线宽一半的矩形区域。
lineStyle.shadowBlur	number	阴影模糊半径。数值越大，阴影越模糊、柔和。需与“shadowColor”、“shadowOffsetX”、“shadowOffsetY”属性配合使用。
lineStyle.shadowColor	string	图形阴影的颜色。
lineStyle.shadowOffsetX	number	阴影水平方向上的偏移距离。
lineStyle.shadowOffsetY	number	阴影垂直方向上的偏移距离。
lineStyle.opacity	number	轴线的透明度，取值范围为0-1的小数。 1：完全不透明。 0：完全透明（不绘制）。

X轴配置完整示例代码：

{
    data: 'Month', // 绑定数据中“Month”字段作为X轴维度
    name: 'Utils', // X轴名称
    line: {
        show: true, // 显示轴线
        lineStyle: {
            color: 'red', // 轴线颜色
            type: 'dashed', // 轴线样式为虚线
            width: 2 // 轴线宽度
        }
    },
    interval: 2, // 每间隔2个标签显示
    fullGrid: true, // 图表顶格X轴两侧
    labelRotate: 45, // 标签旋转45°
    ellipsis: {
        overflow: 'truncate', // 过长截断显示省略号
        labelWidth: 20 // 标签宽度限制为20px
    },
    nameLocation: 'end', // 名称显示在X轴右侧
    nameTextStyle: {
        fontSize: 12, // 字体大小12px
        color: '#4e4e4e' // 字体颜色
    }
}

Y轴配置

Y轴用于展示数据的量化指标（如产量、能耗、压力），配置值为对象（统一配置）或对象数组（多Y轴分别配置）。具体参数如下：

属性名称	类型	说明
max	number	自定义Y轴最大值，可按指标上限设置（如能耗上限1000），使数据对比更直观。
min	number	自定义Y轴最小值，指标无负数值时可设为0，避免数据展示失真。
interval	number	自定义Y轴数值刻度间隔，设置后“splitNumber”属性失效，可按指标精度设置（如能耗精度10，间隔设为100）。
position	string	Y轴位置，可选值：“left”（左侧，默认）、“right”（右侧）。多Y轴配置时可分别放置两侧，避免重叠。
name	string	Y轴名称，用于说明量化指标类型（如“能耗(kWh)”）。
unit	string	自定义Y轴刻度单位（如“kWh”、“MPa”）。
minInterval	number	Y轴最小刻度间隔，确保刻度精度符合业务数据需求（如压力数据精度0.1，最小间隔设为0.1）。
maxInterval	number	Y轴最大刻度间隔，避免刻度过少导致数据对比不清晰。
dataName	Array<string>	仅多Y轴（配置值为数组）时生效，指定哪些数据系列使用当前Y轴配置，未包含的数据系列按第一个Y轴配置渲染，用于区分不同指标数据（如能耗、产量分别对应不同Y轴）。
nameTextStyle	TextStyle	Y轴名称文本样式，具体配置请参见*TextStyle配置项。
offset	number	Y轴相对于默认位置的偏移量，单位为像素（px）。多Y轴时用于微调位置，避免重叠。
splitNumber	number	Y轴分割线数量，设置“interval”属性后此属性失效，默认自适应，可根据数据范围调整，确保刻度清晰。
labelTextStyle	object	Y轴刻度文本样式。具体配置请参见*TextStyle配置项。
splitLine	object	Y轴刻度线样式，可配置显示状态、颜色、宽度等。

Y轴配置示例：

[
  {
    "name": "value",
    "unit": "",
    "nameTextStyle": {
      "color": "blue",
      "fontSize": 24,
      "padding": [
        0,
        40,
        -20,
        0
      ]
    },
    "interval": 2,
    "labelTextStyle": {
      "color": "blue"
    }
  }
]

*TextStyle配置项

图表中所有文本样式（如labelTextStyle、nameTextStyle）均采用此配置项，支持精细化自定义，确保界面文本风格统一，具体参数如下：

属性名称	类型	说明
color	color	文本颜色，支持十六进制、颜色单词、RGB字符串。
fontStyle	string	字体风格，可选正常、斜体等。
fontWeight	string	字体粗细，可选正常、加粗等，标题文本可设为加粗，突出层级。
fontFamily	string	字体体系（如“Microsoft YaHei”）。
fontSize	number	字体大小，单位为像素，根据图表尺寸调整，避免过小导致看不清。
align	string	文本水平对齐方式，可选：left（左）、center（中）、right（右），默认自适应。
verticalAlign	string	文本垂直对齐方式，可选：top（上）、middle（中）、bottom（下），默认自适应。
lineHeight	number	文本行高，用于多行文本换行时调整间距，避免拥挤。
backgroundColor	color	文本块背景颜色，工业场景一般不开启，避免干扰图表数据展示。
borderColor	color	文本块边框颜色，需配合“borderWidth”使用。
borderWidth	number	文本块边框宽度，单位为像素，默认0（无边框）。
borderType	string	文本块边框样式，可选solid（实线）、dashed（虚线）、dotted（点线）。
borderDashOffset	number	虚线边框偏移量，仅“borderType”为“dashed”时有效。
borderRadius	number \| number[]	文本块圆角，单数值为统一圆角，数组按“[上, 右, 下, 左]”设置。
padding	number \| number[]	文本块内边距，单数值为统一边距，数组按“[上, 右, 下, 左]”设置，避免文本与边框重叠。
shadowColor	color	文本块阴影颜色，配合“shadowBlur”、“shadowOffsetX/Y”使用。
shadowBlur	number	文本块阴影模糊程度，配合其他阴影属性使用。
shadowOffsetX	number	文本块阴影水平偏移距离。
shadowOffsetY	number	文本块阴影垂直偏移距离。
width	number	文本显示宽度，单位为像素，配合“overflow”属性使用。
height	number	文本显示高度，单位为像素，用于固定文本块尺寸。
textBorderColor	color	文字本身描边颜色，需配合textBorderWidth使用，提升文本在复杂背景下的辨识度。
textBorderWidth	number	文字本身描边宽度，单位为像素，避免过宽导致文字变形。
textBorderType	string	文字描边样式，可选：solid、dashed、dotted。
textBorderDashOffset	number	文字虚线描边偏移量，仅“textBorderType”为“dashed”时有效。
textShadowColor	color	文字本身阴影颜色，配合其他文字阴影属性使用。
textShadowBlur	number	文字阴影模糊程度。
textShadowOffsetX	number	文字阴影水平偏移距离。
textShadowOffsetY	number	文字阴影垂直偏移距离。
overflow	string	文字超出宽度时的处理方式，需配置“width”生效：truncate（截断）、break（换行）、breakAll（强制换行）。
ellipsis	string	“overflow”为“truncate”时，配置末尾显示的文本，默认为“...”。

其他

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

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

属性名称

说明

是否支持变量绑定

元素id值

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

是

样式类

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

是

ref引用类

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

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