环形仪表盘¶
环形仪表盘以环形进度弧展示数值在指定范围内的位置,直观呈现目标完成进度。添加对比字段后,可将多个仪表盘并排排列,同时比较多组数据。
本文介绍环形仪表盘的特殊配置。有关各图表通用的配置项,如 基本 标签页、过滤器 标签页的内容,参见 图表通用配置。
环形仪表盘的类型¶
添加组件时,环形仪表盘 分组下提供以下选项:
预设 |
样式 |
描述 |
推荐场景 |
|---|---|---|---|
基础环形仪表盘 |
|
单个环形进度弧展示一个指标的完成进度。 |
展示单台设备的负载率、单条产线的目标达成率。 |
环状指针仪表盘 |
|
环形外观但弧线外侧带刻度线,是指针仪表盘的 环形样式 布局,没有指针,配置方法参见 指针仪表盘。 |
需要环形外观同时保留刻度线。 |
环形仪表盘(带指标卡) |
|
一个环形仪表盘与最多两张指标卡组合展示,配置方法参见 环形仪表盘(带指标卡)。 |
在展示进度的同时并列几个关键数值。 |
环形仪表盘(带对比) |
|
按对比字段拆分为多个环形仪表盘并排展示。 |
横向比较各产线、各区域的完成率。 |
基础环形仪表盘 和 环形仪表盘(带对比) 的配置面板完全相同,差异仅在于后者预先配置了 对比 数据项。创建后可随时增删对比字段,两个预设可以互相转换。本文余下内容适用于这两个预设。
环形仪表盘的数据¶
环形仪表盘以 指标 决定进度弧的位置,通过 对比 拆分出多个仪表盘。
数据源、类别、数据源参数、维度聚合、排序、别名和单位等通用配置,参见 图表通用配置 > 配置数据。
指标¶
指标 决定进度弧的填充位置,必须且只能添加 1 个。指标值在 轴线范围 的最小值和最大值之间按比例换算为弧长。
对比¶
对比 为可选字段,最多可添加 1 个。添加后,数据按该字段的值分组,每个值生成一个独立的环形仪表盘,并按 布局 设置的行列数并排排列。
未添加对比字段时,组件只显示一个仪表盘,对比样式 区块也不显示。
备注
环形仪表盘只使用 指标 和 对比 两类数据项,添加其它数据项不会影响图表。
环形仪表盘的样式¶
样式 标签页按对比样式、指标样式和仪表盘样式三个区块组织。标题、组件内边距、背景等通用样式,参见 图表通用配置 > 配置样式。
配置好数据项后,对比 和 指标 两个折叠面板的标题会自动显示为所选字段的名称,便于确认正在配置哪个字段。
图表布局¶
图表布局 决定仪表盘的整体形态,可选 指针样式(默认)或 环形样式。
指针样式:半圆刻度盘配一根指针,指针指向当前值对应的位置,量程的上下限标注在弧线两端,指标名称、数值和单位显示在图表下方。
环形样式:接近整圆的环形弧,弧长表示当前值,环内显示数值、单位和名称,弧线外侧带刻度线,不显示量程标注。
该选项会切换 4 个配置项,其余配置项在两种布局下都显示:
配置项 |
指针样式 |
环形样式 |
|---|---|---|
数据字体 |
显示 |
隐藏 |
颜色规则 |
显示 |
隐藏 |
占比部分颜色规则 |
隐藏 |
显示 |
剩余部分颜色规则 |
隐藏 |
显示 |
备注
指针是组件按当前主题的颜色绘制的,不受 颜色规则 影响。环形样式 下没有指针。
对比样式¶
该区块仅在已添加对比字段时显示。
布局¶
布局 通过 行 和 列 指定多个仪表盘的排布方式,默认 3 行 3 列。行列数决定一屏内可见的仪表盘数量。
有效取值范围为 1 - 24:填入的值小于 1 或大于 24 时,按边界值处理;列 只取整数部分。
显示“展开”¶
勾选后,当仪表盘数量超出布局行列数时,组件底部提供 展开 入口查看其余仪表盘;取消勾选则只显示布局内可见的部分,其余仪表盘无法查看。
数值字体¶
设置每个仪表盘上方对比字段标签的字体、字号、颜色和样式。
指标样式 区块中另有一个同名的 数值字体,作用于仪表盘中心的数值。此处的 数值字体 只作用于对比字段标签。
指标样式¶
该区块仅在已添加指标字段时显示,包含一个折叠面板。以下配置项按面板中的顺序说明。
交互设置¶
为仪表盘中心的数值配置点击后的跳转或联动行为,参见 图表通用配置 > 交互设置。该配置只作用于中心数值,仪表盘上方的对比字段标签不支持点击交互。
显示名称¶
勾选后在仪表盘中显示指标字段的名称标签,默认不勾选。名称文本取指标字段的 别名,未配置别名时取字段名称。指针样式 下名称显示在图表下方数值的左侧,环形样式 下显示在环内数值的下方。
显示名称后,可继续设置指标名称标签的字体、字号、颜色和加粗、倾斜样式。
备注
指针样式 下,名称标签在字号为空或为 0 时不会渲染。若勾选了 显示名称 但看不到名称,检查此处的字号是否已设置。环形样式 下字号为空时按 16 pt 渲染,不会出现这个问题。
数值与单位¶
单位名称:数值后显示的单位文本,默认为空。勾选 以百分比显示 后,此处设置的单位不再出现在图表中。
自适应单位:勾选后按数据量级自动换算单位,参见 DTV 单位库。指针样式 下,该设置同时作用于图表下方的数值和弧线两端的量程标注。环形样式 下,环内的数值不参与单位换算:自适应单位 不生效,数据项自带的 单位 也不显示,环内只显示 单位名称 中填写的文本(或勾选 以百分比显示 后的百分号)。
小数位数:数值四舍五入到指定的小数位数,默认 2 位,不影响源数据。
单位换行:勾选后单位或百分号与数值分两行显示,默认不勾选。
字体设置¶
名称字体、单位字体 和 数值字体 分别设置指标名称、单位文本和仪表盘中心数值的字体、字号、颜色和样式。数值文字的颜色由 数值字体 决定,不受 颜色规则 影响。
轴线范围¶
通过 Min 和 Max 指定进度弧对应的数据范围,默认 0 - 100。指标值按该范围换算为弧长:等于 Min 时弧为空,等于 Max 时弧填满。
留空时按默认值计算:Min 留空按 0 计算,Max 留空按 100 计算。添加对比字段后同样如此,各组仪表盘共用同一套范围,不会按各组数据的实际最大值自动调整。
两个输入框都支持填写占位符,从而由参数动态控制范围。更多信息,参见 配置动态参数。
备注
避免把 Max 设为与 Min 相同的值,否则换算的分母为 0,图表无法得到有效的百分比。
以百分比显示¶
默认勾选。勾选后,仪表盘中心显示的是当前值相对于轴线范围的百分比,而非指标原始值,同时 单位名称 不再显示。取消勾选后显示指标原始值及单位,量程标注显示实际的最小值和最大值。
该选项还决定 颜色规则 的匹配基准:勾选时按百分比(0 - 100)匹配,取消勾选时按指标原始值匹配。改动该选项后需要复核已配置的颜色规则区间。
占比部分颜色规则¶
为不同的取值区间指定环形弧中已填充部分的颜色,规则结构与 图表通用配置 > 颜色规则 相同。仅在 图表布局 为 环形样式 时显示。
剩余部分颜色规则¶
为不同的取值区间指定环形弧中未填充部分的颜色,规则结构与 图表通用配置 > 颜色规则 相同。留空时未填充部分使用页面主题的默认颜色。仅在 图表布局 为 环形样式 时显示。
备注
颜色规则只作用于进度弧。背景轨道的颜色由页面主题决定,数值文字的颜色由 数值字体 决定,两者都不受颜色规则影响。
指标值超出 轴线范围 时,换算出的百分比可以小于 0 或大于 100,颜色规则按这个实际百分比匹配;而进度弧本身按 0 - 100 截断显示。因此弧线已经填满时,颜色仍可能落在超过 100 的规则区间上。
仪表盘样式¶
该区块只有一个名为 仪表盘 的折叠面板,其中只有 仪表盘粗细 一个配置项。
仪表盘粗细¶
指定环形弧线的粗细,单位为 pt,默认 6,最小值为 0。该值同时作用于进度弧和背景轨道。粗细设为 0 时弧线完全不绘制,图表中只剩指针和文本。
粗细按环形实际渲染尺寸换算为比例,因此同一个数值在较大的组件中看起来更细。数值超过环形自身的像素尺寸时,弧线不会绘制。
运行时交互¶
以下是环形仪表盘在运行时的交互行为:
数值动效:页面运行时,进度弧从 0 填充至目标位置,中心数值同步递增;在编辑器中直接显示最终值,便于配置。
悬浮提示:鼠标悬浮在数值、单位、名称和对比标签上显示完整文本。
多仪表盘排列:添加对比字段后,各仪表盘按 布局 的行列数排列;勾选了 显示“展开” 时,超出部分可通过 展开 查看。
自适应尺寸:仪表盘始终按正方形渲染,边长取组件可用宽高中的较小值,并预留标题和名称所需空间。
空状态:未添加指标字段时显示空状态提示。
无效数值:指标值不是数字时,中心显示
--。
备注
环形仪表盘不提供 显示提示 配置项,参见 图表通用配置 > 显示提示。数值上的悬浮提示由组件直接提供,不需要也无法通过配置开关。
环形仪表盘不支持 联动其它组件,过滤器 标签页中不显示该区域,参见 图表通用配置 > 适用范围。