# 设置UI引擎前端页面条形图/柱状图组件属性 条形图和柱状图是常用的数据可视化工具，用于直观展示数据分布、对比分析等。该组件支持灵活配置柱体样式、坐标轴、图例及文本展示，可结合实时数据实现动态渲染，助力用户快速捕捉数据规律与异常信息。 #### 前提条件 已在当前页面添加"条形图"或"柱状图"组件，具体操作请参见[为UI引擎前端页面添加物料组件](https://support.huaweicloud.com/usermanual-idme/idme_ui_0016.html)。 #### 配置入口 1. 在页面设计器的中心画布区，单击选中"条形图"或"柱状图"组件。 2. 在右侧设置面板中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002535567139.png)，即可展开"属性"设置面板。 #### 基础属性 | 属性名称 | 说明 | 是否支持变量绑定 | |:---|:---|:---| | 图表数据 | 配置图表需展示的核心数据，支持绑定实时数据源（如设备运行参数、生产统计数据），数据格式需符合组件解析要求，确保柱体正常渲染。 | 是 | | 柱体方向 | 设置柱体展示方向，分为"水平方向"（条形图）和"垂直方向"（柱状图），默认值为"水平方向"。 通过变量绑定控制时，状态变量值仅支持"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\ | 控制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配置项]。 | 表1LineConfig | 属性名称 | 类型 | 说明 | |:---|:---|:---| | 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\ | 仅多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"属性，用于注册模板引用以访问组件实例方法。 如果为"数据源表单"组件，会自动填充默认值。 | 是 |