进度条¶

进度条以条形的长度直观展示数值在目标范围内的完成比例，支持多条并排对比、图标标注、颜色规则等功能，常见于 KPI 完成率、设备利用率等场景。

本文介绍进度条的特殊配置。有关各图表通用的配置项，如基本标签页、过滤器 标签页的内容，参见图表通用配置。

进度条的类型¶

DTV 预置了几种常见的进度条类型。在页面添加进度条时，可以根据业务场景从以下类型中选择：

进度条类型	描述	推荐场景
基础进度条	单条进度条展示一个指标的完成比例，支持颜色规则和趋势分析。	KPI 完成率、单一指标进度。
进度条（带指标卡）	在进度条旁同时展示最多 3 个指标卡（KPI 数值），将进度完成比例与关联数值集中在同一视图。进度图形可在环形仪表盘、指针仪表盘、进度条、水球图之间切换。不支持对比字段。	需要在同一视图同时关注进度和多个关联 KPI（如当前值、目标值、同比）的场景。
进度条（带图标）	在进度条旁边显示由扩展字段值驱动的图标，通过图标颜色直观传达状态。	需要用图标区分设备状态或告警等级的场景。
进度条（带对比）	配置对比字段，将数据按对比值拆分为多条并排展示，支持轮播翻页。	多场站/多设备横向对比，如各站年计划完成率。
排行榜	带对比的进度条，按数值排列，在条形前显示排名序号，支持点击切换升降序，适合大屏。	场站发电量排名、KPI 完成率排行。详见排行榜。
堆叠进度条（带图例）	多个指标叠加在同一条形中，名称和数值以图例形式显示在条形下方，右侧可展示所有指标的汇总值。	需要图例说明各类别的场景，如各能源类型发电占比汇总。详见堆叠进度条。
堆叠进度条（数值在上，无图标）	多个指标叠加在同一条形中，各系列的名称和数值直接标注在条形上方，布局紧凑，无单独图例区域。	空间有限但需要在条形内直接标注各系列数值的场景。详见堆叠进度条。
堆叠进度条（带图标）	多个指标叠加在同一条形中，各系列名称和数值旁可配置内置或自定义图标，图标位置支持顶部或左侧。	需要用图标强化各类别视觉辨识度的场景，如品牌化大屏展示。详见堆叠进度条。

进度条的数据¶

进度条使用三类数据字段控制不同方面的展示：指标决定条形长度；对比将数据拆分为多条并排展示；扩展为每条进度条提供附加信息，例如图标判断依据或自定义标签名称。

有关数据源、数据项的通用配置信息，参见图表通用配置 > 配置数据。

指标¶

进度条至少需要 1 个 指标字段，可添加多个，每个指标字段对应一条进度条。在 指标样式 中可为每个指标单独配置单位、百分比显示、小数位数等样式。

对比¶

对比字段将数据按不同取值拆分为多条独立的进度条，每个对比值生成一条，并在左侧显示对比值作为标签。仅支持添加 1 个 对比字段。添加对比字段后，后续可配置 对比样式。

备注

进度条（带指标卡）类型不支持对比字段。

扩展¶

进度条支持多个扩展字段。扩展字段不直接显示为进度条内容，可用于以下用途：

图标条件：将扩展字段的值与图标条件规则匹配，为每条进度条显示对应图标。后续在匹配字段中指定要匹配的扩展字段。
进度条名称：将扩展字段的值替代对比字段值，作为左侧标签的展示名称。后续在进度条名称中指定名称对应的扩展字段。该用途要求已添加对比字段，否则左侧标签仍使用对比字段值。

备注

上述两个配置项是扩展字段在进度条中唯一的用途。若只添加扩展字段而未在其中引用，图表展示不会有任何变化。

进度条的样式¶

进度条使用五类样式配置控制不同方面的展示：对比样式 管理多条进度条的排列和标签；指标样式 配置指标的展示方式；文本与数值 设置名称、单位和数值的外观；进度条 定义条形的样式和布局；图标则为每条进度条补充状态标识。

有关标题、组件的通用配置信息，参见图表通用配置 > 配置样式。

对比样式¶

备注

进度条（带指标卡） 类型不支持对比样式。

在数据中添加对比字段后显示，控制多条进度条的整体排列和标签样式。

交互设置¶

配置点击对比标签时的跳转动作，参见图表通用配置 - 交互设置。

布局¶

通过行和列指定每页显示的最大行数和列数。例如设置 2 列，进度条两两并排展示。

显示”展开”¶

启用后组件底部出现展开按钮，终端用户可点击查看全部进度条。

统一单位¶

启用后所有进度条的数值自动转换为同一单位，便于横向对比。

数值字体¶

图表中每个进度条左侧的对比标签的字体样式。

轮播效果¶

对比数量超过单页显示范围时有效。可选：无（不轮播）、滚动（向上滚动）、翻页（整页切换）。

轮播间隔¶

自动轮播翻页的时间间隔（单位：秒）。设为 0 则不自动轮播。

进度条名称¶

从扩展字段中选择一个，将其值作为进度条左侧标签的显示名称，替代对比字段值。选择无则显示对比字段值。

指标样式¶

添加指标字段后显示，对该指标提供独立的样式配置。

交互设置¶

配置点击指标数值时的跳转动作，参见图表通用配置 - 交互设置。

备注

点击指标数值区域同时也是进度条组件联动其他组件的触发点。配置组件联动时，可选择该指标字段作为触发行为。参见组件联动其它组件。

开启趋势分析¶

启用后，终端用户悬浮在指标数值上时可打开 趋势分析 弹窗。仅支持通用数据服务数据源。参见开启趋势分析。

启用后，你需要配置以下内容：

资产聚合：对多个资产的同一指标数据进行聚合展示。
资产参数：指定趋势分析中展示的资产 ID，多个 ID 用英文逗号分隔，支持、@{parameter_key}、#{field_ID} 占位符。

单位名称¶

该指标的单位文字。启用 以百分比显示 时不展示单位。

自适应单位¶

启用后数值自动选用合适单位（如将 10000 转换为 1 万）。参见自适应单位。

以百分比显示¶

启用后，指标数值根据 轴线范围 的最大值换算为百分比展示，单位名称自动隐藏。

小数位数¶

该指标展示数值的小数位数（0 - 3 位）。

文本与数值¶

控制名称、单位、数值的显示样式以及颜色规则。

显示名称¶

控制是否显示名称标签。未配置对比时，名称取指标字段名；配置了对比时，名称取对比字段值（此时标签字体由 对比样式 > 数值字体 控制，下列名称字体设置不生效）。

名称字体 / 单位字体 / 数值字体¶

分别设置名称标签、单位文字、数值的字体样式。名称字体仅在未配置对比时生效。

轴线范围¶

手动指定进度条的最小值（Min）和最大值（Max），决定满格基准。不填则自动以数据最大值为满格。启用 以百分比显示 时，Max 即为 100% 对应的基准值，默认为空（自动取数据最大值），也可手动填写指定基准。

颜色规则¶

根据数值大小为进度条条形和数值文字配置不同颜色。不填任何数值的规则，即为默认颜色。参见颜色规则。

进度条¶

控制条形本身的外观和布局细节。

进度条高度¶

每条进度条条形的粗细（单位 px）。

名称边距 / 数值边距¶

名称标签区域和数值标签区域分别占整行宽度的百分比（%）。两者之和决定进度条条形区域的宽度。仅在布局为左右时生效。

名称对齐方式 / 数值对齐方式¶

名称和数值标签内文字的对齐方式（左对齐、居中、右对齐）。

布局¶

进度条、名称和数值三者的排列方式：

左右：进度条居中：名称在左，进度条居中，数值在右。
左右：进度条在右：名称和数值在左，进度条在最右侧。
上下：进度条在名称下方：名称和数值在上方，进度条紧接其下。适合组件高度较小时使用。

单位位置¶

单位文字相对于数值的位置：跟随数值（显示在数值右侧）或左上角（以角标形式显示在数值右上方）。

展示排序序号¶

启用后，进度条在每条前显示排名序号（1、2、3…）。序号旁出现排序图标，终端用户点击可在降序和升序之间切换。同时可以配置以下内容：

排行标签颜色：排名序号的背景颜色。
排行标签字体：排名序号的字体样式。

动态效果¶

启用后，进度条循环播放从 0 增长至当前数值的动画。

图标¶

通过条件规则将扩展字段的值映射为不同图标，在每条进度条旁显示。

匹配字段¶

从扩展字段中选择一个作为图标条件的判断依据。

图标配置¶

点击 + 新增，为不同字段值配置对应图标样式：

配置项	说明
匹配值	触发该规则的字段值。留空表示匹配所有未被其他规则命中的值（兜底规则）。
选择图标	从内置图标库中选择图标。
图标颜色	图标的颜色，支持纯色和渐变色。
图标大小	图标的尺寸（单位 px）。
图标区域宽度占比	图标区域占整行宽度的百分比（0 - 100）。
跳转地址	点击图标时跳转的 URL，支持动态参数。

运行时交互¶

以下是进度条在运行时的交互行为：

点击条形联动：条形区域始终可点击，鼠标指针为手型。在 过滤器 标签页配置联动后，点击条形即触发联动。配置方法参见图表联动其它组件。
数值跳转与趋势分析：配置指标样式 > 交互设置后，点击指标数值执行跳转，仅在发布后的页面中生效。开启开启趋势分析后，悬浮数值出现 加入趋势分析。两者同时配置时，悬浮显示一个包含跳转和 加入趋势分析 的两项菜单；两者都未配置时数值没有任何悬浮和点击效果。
对比标签跳转：配置对比样式 > 交互设置后，点击左侧的对比标签执行跳转。
图标跳转：为图标规则填写了跳转地址时，点击图标在新窗口打开该地址。
切换升降序：启用展示排序序号后，序号旁出现排序图标，点击可在降序和升序之间切换。轮播效果为翻页时不提供排序图标。
轮播与展开：轮播效果为滚动时，鼠标悬浮会暂停滚动，移出后继续；为翻页时不会因悬浮暂停。开启轮播后不再提供显示“展开” 按钮。
完整文本：名称和数值超出所在区域时截断显示，鼠标悬浮可看到完整文本。