指标卡、进度、排行与表格
指标卡、进度组件、排行和表格四类数据展示组件的内容设置、数据绑定方式与阈值告警说明。
概述
这四类组件承载大屏上的核心数字与明细:指标卡显示一个关键数字并带趋势与阈值告警,进度组件显示完成率,排行显示 TOP 榜单,表格显示明细与滚动列表。它们的文案与数值都可以「固定值 / 数据集 / 表达式」三选一绑定到数据,见数据接入。
功能入口
左栏「资源库」>「基础组件」中的「指标卡」「进度 / 液态 / 环形」「排行」「表格/列表」分组;选中组件后,在右栏「组件」>「内容设置」编辑。「内容设置」按段折叠,顶部有分段跳转条。
操作步骤
让指标卡在超阈值时变色
- 选中指标卡,在「内容设置」找到「阈值告警」。
- 点击「+ 添加规则」,选比较符(≥、>、≤、<、=),填阈值和命中时的颜色,「状态(可选)」可填如「告警」的文案。
- 数值命中第一条规则时整卡换成该色。新增规则默认是「≤ 60、红色、告警」。
给排行绑数据集
- 选中排行,在「内容设置」>「数据」把「榜单来源」选为「数据集」。
- 选「数据集」,再选「名称字段」和「数值字段」。榜单每行取名称字段作左边的名字、数值字段作右边的数,并按数值排序。
- 数据集里没有叫
name/value的列时必须手动指定这两个字段,否则榜单为空。
配置表格的列
- 选中表格,在「内容设置」>「数据」点击「列定义」,为每一列设置字段、表头、宽度、对齐与格式。
- 在「表格数据来源」选「数据集」,选数据集,让行数据来自数据集;也可选「手工」自己填数据,或选「表达式」写
dataset('ranking').rows()这样的取行表达式。
属性/参数说明
指标卡
| 属性 | 说明 | 取值/默认值 |
|---|---|---|
| 指标名称、指标数值、说明文案 | 基本信息,可绑定数据 | 文本 |
| 单位、前缀、后缀 | 数值修饰,可绑定数据 | 文本 |
| 显示趋势与进度 | 是否显示趋势、第二角标与进度 | 显示/隐藏 |
| 趋势标签、趋势数值、趋势方向 | 例如「较昨日」「+12.6%」 | 方向:上升、下降、持平 |
| 第二角标、第二角标值、第二角标方向 | 同比、环比等,留空则不显示 | 方向同上 |
| 进度值、进度上限 | 进度信息 | 数值 |
| 卡片样式 | 卡片外观 | 玻璃、面板、极简、驾驶舱、灯墙 |
| 数值动画 | 数字入场效果 | 无、数字滚动、翻牌器 |
| 强调色、背景色 | 颜色 | 颜色 |
| 阈值告警 | 命中规则整卡换色,首个匹配生效 | 比较符 ≥ > ≤ < =;空则关闭 |
进度组件
| 属性 | 说明 | 取值/默认值 |
|---|---|---|
| 标题、说明文案、当前值、上限值、单位、后缀 | 内容,可绑定数据 | 文本 |
| 展示形态 | 进度样式 | 条形、环形、液态 |
| 标题位置 | 标题在组件的位置 | 顶部、底部 |
| 对齐方式 | 文字对齐 | 左对齐、居中、右对齐 |
| 显示百分比、显示数值 | 显示项 | 显示/隐藏 |
| 标题字号、数值字号、说明字号、厚度 | 字号与尺寸 | 数值 |
| 动效强度 | 波形透明度 | 0 到 1,步长 0.05 |
| 轨道色、强调色、标题色、数值色、辅助色、背景色、边框色、辉光色 | 配色 | 颜色 |
排行
| 属性 | 说明 | 取值/默认值 |
|---|---|---|
| 外观样式 | 外壳风格;分段选择器里还列有「驾驶舱」,但排行只为前三种定义了外观,选它没有独立样式 | 玻璃、面板、极简 |
| 自动滚动 | 榜单条目超出可见行数时滚动 | 开启/关闭 |
| 轮播高亮 | 逐项循环聚焦 | 开启/关闭 |
| 显示条形背景 | 每行显示条形对比 | 显示/隐藏 |
| 高亮 Top 3 | 前三名高亮 | 高亮/普通 |
| 可见行数 | 同时显示的行数 | 1 到 12 |
| 滚动时长 (s) | 滚动周期 | 6 到 120 |
| 榜单来源 | 数据来源 | 手工、数据集、表达式 |
| 榜单内容 | 手工来源,每行一项 | 例如 杭州: 98 |
| 数据集、名称字段、数值字段 | 数据集来源 | 见上文 |
| 表达式、缺省值(可选) | 表达式来源,表达式为空时使用缺省值 | 例如 dataset('ranking').rows() |
| 变量过滤 | 用页面变量筛选已取回的行,变量无值时显示全部 | 数据字段、变量、等于/不等于 |
| 条形色、轨道色、名称色、数值色、行背景色 | 配色 | 颜色 |
表格
| 属性 | 说明 | 取值/默认值 |
|---|---|---|
| 展示模式 | 表格形态 | 标准、分组、日志、事件、时间轴 |
| 分组字段 | 仅「分组」模式,按该列分组显示 | 例如 region |
| 显示表头、显示序号 | 显示项 | 显示/隐藏 |
| 自动滚动、滚动方式 | 行数超出时滚动 | 连续滚动、分页切换 |
| 性能保护下保留滚动 | 性能保护模式下是否仍保留滚动播放 | 保留/降级 |
| 轮播高亮 | 当前行循环聚焦,适合短表 | 开启/关闭 |
| 可见行数 | 同时显示的行数 | 1 到 12 |
| 滚动时长 (s) | 滚动周期 | 6 到 120 |
| 表格数据来源 | 行数据来源 | 手工、数据集、表达式 |
| 手工数据 | 手工来源,行对象数组 | 例如 [{time: 10:21, region: 滨江区}] |
| 缺省值(JSON,可选) | 数据为空时使用 | 例如 [] |
| 变量过滤 | 同排行 | 数据字段、变量、等于/不等于 |
| 表头背景、表头文字色、内容文字色、斑马纹背景 | 配色 | 颜色 |
| 空状态文案 | 无数据时的提示 | 文本 |
表格列定义
| 属性 | 说明 | 取值/默认值 |
|---|---|---|
| 字段 | 数据行的字段名 | 必填 |
| 表头 | 列标题 | 文本 |
| 列宽 | 单位 px | 留空为自适应 |
| 对齐 | 列对齐 | 左对齐、居中、右对齐 |
| 格式 | 值格式 | 文本、数值、百分比、金额、徽标 |
| 小数位 | 数值格式的小数位数 | 数值 |
| 单位 / 货币符号 | 金额格式显示「货币符号」,其余显示「单位」 | 文本 |
| 阈值染色 | ≥ 预警、≥ 危险、≤ 预警、≤ 危险,超过阈值时该列的值变色 | 数值,留空为不启用 |
示例
「科室就诊」指标卡:「指标名称」填 今日就诊,「指标数值」绑定数据集 科室就诊 的 visits,取值策略选「求和」,「单位」填 人次,「数值动画」选「数字滚动」。在「阈值告警」添加规则「≤ 3000、红色、偏低」,则总数不超过 3000 时整卡变红并显示「偏低」。
注意事项
注意:表格没有组件级维度列,「分组字段」只用于分组显示;零配置联动时表格行按行里第一个非数值列过滤。
注意:变量过滤是前端过滤,不参与取数;要按变量重新查询数据,请让数据集参数引用变量,见数据接入。
提示:表格、排行和图表的数据项可点击,发出「点击数据项」事件,用于联动,见交互与联动。