水球图


水球图以液位高低展示数值相对于指定范围的完成进度,液面越高表示数值越大,液体带波浪动效。添加对比字段后,可将多个水球并排排列,同时比较多组数据。


../_images/liquid_fill_blue.gif


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

水球图的类型


添加组件时,水球图 分组下提供以下选项:

预设

样式

描述

推荐场景

基础水球图

../_images/basic_liquid_fill.png

单个水球以液位展示一个指标的完成进度。

展示水箱液位、单个储罐余量、单项目标达成率。

水球图(带指标卡)

../_images/liquid_fill_with_metric_card.png

水球图与最多两张指标卡组合展示,配置方法参见 环形仪表盘(带指标卡)。

在展示液位的同时并列几个关键数值。

水球图(带对比)

../_images/liquid_fill_with_comparison.png

按对比字段拆分为多个水球并排展示。

横向比较各储罐余量、各车间的用水量占比。


基础水球图 和 水球图(带对比) 的配置面板完全相同,差异仅在于后者预先配置了 对比 数据项。创建后可随时增删对比字段,两个预设可以互相转换。本文余下内容适用于这两个预设。


备注

水球图(带指标卡) 虽然列在本分组下,但它与 环形仪表盘(带指标卡) 是同一个组件,只是把 类型 预置为 水球图。它的配置面板与水球图完全不同,本文的数据和样式说明不适用于它,参见 环形仪表盘(带指标卡)。

水球图的数据


水球图以 指标 决定液位高度,通过 对比 拆分出多个水球。

数据源、类别、数据源参数、维度聚合、排序、别名和单位等通用配置,参见 图表通用配置 > 配置数据。

指标


指标 决定液位的高度,必须且只能添加 1 个。指标值在 轴线范围 的最小值和最大值之间按比例换算为液位:等于最小值时水球为空,等于最大值时水球注满,超出范围的部分按空或注满截断。

对比


对比 为可选字段,最多可添加 1 个。添加后,数据按该字段的值分组,每个值生成一个独立的水球,并按 布局 设置的行列数并排排列。

未添加对比字段时,组件只显示一个水球,对比样式 区块也不显示。

水球图的样式


样式 标签页按对比样式和指标样式两个区块组织,没有独立的仪表盘样式区块。标题、组件内边距、背景等通用样式,参见 图表通用配置 > 配置样式。

配置好数据项后,对比 和 指标 两个折叠面板的标题会自动显示为所选字段的名称,便于确认正在配置哪个字段。

对比样式


该区块仅在已添加对比字段时显示,包含一个 对比 折叠面板,提供 布局、显示“展开” 和 数值字体 三个配置项。含义、默认值和取值范围与环形仪表盘一致,参见 环形仪表盘的样式 > 对比样式。

指标样式


该区块仅在已添加指标字段时显示,包含一个折叠面板。

以下配置项的含义与默认值都与环形仪表盘一致,不再重复说明:


以下只说明水球图特有或有差异的配置项。

边框


控制水球外圈的样式,默认不勾选。

  • 不勾选:外圈为 1 像素细线,颜色取自页面主题,紧贴水球。

  • 勾选:外圈加粗为 3 像素,颜色与液体颜色一致,并与水球之间留出 7 像素间距,视觉上形成一个描边圆环。

水球始终带有外圈,该选项切换的是外圈的粗细、颜色和间距,而不是显示或隐藏外圈。

轴线范围


通过 Min 和 Max 指定液位对应的数据范围,默认 0 - 100。指标值按该范围换算为液位高度。留空规则和边界情况与环形仪表盘一致,参见 环形仪表盘的样式 > 轴线范围。

两个输入框都是文本框,除固定数值外还可以填写占位符,从而由参数动态控制范围。更多信息,参见 配置动态参数。

以百分比显示


默认勾选。勾选后,水球中心显示的是当前值相对于轴线范围的百分比,单位由百分号替代;取消勾选后显示指标原始值及单位。它同时决定 颜色规则 的匹配基准,详见 环形仪表盘的样式 > 以百分比显示。

该选项只改变中心文字的内容,不改变液位高度——液位始终按轴线范围换算。

固定水位在 40%


勾选后,无论指标值为多少,液位一律固定显示在 40%,波浪动效照常播放。适用于只需用颜色反映状态、不需要液位体现数值高低的场景。默认不勾选。

该选项只固定液位,中心显示的数值仍是真实数据。勾选后液位不再反映指标值。

颜色规则


为不同的取值区间指定液体颜色,支持纯色和渐变色。规则结构与 图表通用配置 > 颜色规则 相同,默认没有规则,此时液体使用系统默认颜色。

颜色规则同时作用于液体的两层波浪(下层半透明、上层不透明)。勾选 边框 后,外圈也取用同一颜色。


备注

中心数值的颜色由 数值字体 决定,水球背景始终透明,两者都不受颜色规则影响。

运行时交互


以下是水球图在运行时的交互行为:

  • 波浪动效:液体持续起伏,在编辑器中同样播放。换算出的液位为 0 且未勾选 固定水位在 40% 时,波幅为 0,液面保持水平。

  • 数值不递增:中心数值直接显示最终值,不播放递增动效。

  • 取数:未添加对比字段时只展示返回数据中的最后一条记录;添加对比字段后,每个对比值取该值下的最后一条记录,水球按对比值在返回数据中首次出现的顺序排列。

  • 多水球排列:各水球按 布局 的行列数排列,默认折叠;勾选了 显示“展开” 时,超出部分可通过 展开 查看。

  • 悬浮提示:对比标签、数值、单位和名称过长时截断显示,鼠标悬浮显示完整文本。

  • 数值跳转:配置了 交互设置 后,中心数值变为可点击,对比标签不支持点击交互。

  • 自适应尺寸:水球始终按正圆渲染,直径取组件可用宽高中的较小值,并预留对比标签和名称所需空间。

  • 空状态:未添加指标字段或取不到数据时显示空状态提示。

  • 无效数值:指标值不是数字时,中心显示 --,水球以 20% 的灰色液位(绿色主题下为 15% 的深青色液位)显示,以区别于真实的 0 值。


备注

  • 水球图不提供鼠标悬停提示框,也不提供 显示提示 配置项,参见 图表通用配置 > 显示提示。上述悬浮提示由组件直接提供,不需要也无法通过配置开关。

  • 水球图不支持 联动其它组件,过滤器 标签页中不显示该区域,参见 图表通用配置 > 适用范围。