文档首页/ 工业数字模型驱动引擎/ 数据建模引擎用户指南/ UI引擎使用指南/ 使用UI引擎的页面设计器开发前端项目/ 设置UI引擎前端页面组件属性/ 设置UI引擎前端页面条形图/柱状图组件属性
更新时间：2026-03-16 GMT+08:00
查看PDF
分享

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

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

前提条件

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

配置入口

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

基础属性

属性名称

说明

是否支持变量绑定

图表数据

配置图表需展示的核心数据，支持绑定实时数据源（如设备运行参数、生产统计数据），数据格式需符合组件解析要求，确保柱体正常渲染。

是

柱体方向

设置柱体展示方向，分为“水平方向”（条形图）和“垂直方向”（柱状图），默认值为“水平方向”。

通过变量绑定控制时，状态变量值仅支持“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”属性，用于注册模板引用以访问组件实例方法。

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

是

相关文档