指标卡¶
备注
单指标卡 与 多指标卡 的配置面板差异较大:多指标卡使用 新版配置面板,支持共享样式、同环比、状态圆点等;单指标卡使用旧版配置面板,不支持这些功能。本文按多指标卡的配置项顺序描述,各节中如有差异,会分别提供说明。
指标卡可以清晰展示单个或多个指标的数据表现,如当日、当月、当年、累计的门店收益情况。这里的“当日收益”、“当月收益”、“当年收益”和“累计收益”即为指标。
还可以展示多个指标在某一维度的数据表现,如某一风场的风机状态。这里的“某一风场”是维度,“正常”、“维修”、“失败”等是指标。
本文介绍指标卡的特殊配置。有关各图表通用的配置项,如 过滤器 标签页、其它 标签页的内容,参见 图表通用配置。
指标卡的类型¶
指标卡的基础类型有 单指标卡 和 多指标卡,在此基础上,DTV 预置了几种常见的指标卡类型。在页面添加指标卡时,可以根据业务场景从以下类型中选择:
指标卡类型 |
样式 |
描述 |
推荐场景 |
|---|---|---|---|
单指标卡 |
|
仅展示单个指标的单一数据,支持添加对比项细分展示数据,也支持添加扩展项,为指标提供额外信息。 |
单独展示某个需要高频关注的指标,突出关键信息。或添加到移动端等空间有限的页面,简单清晰。 |
多指标卡 |
|
展示多个指标的数据,支持按某一维度来展示,也支持为某一项指标添加扩展项,展示一项数据的同环比等扩展信息。 |
展示某一维度下的多个指标数据,例如某一风场内的总输出功率、风速和温度,作为场站状态的概览。 |
多指标卡(带图标) |
|
在基础多指标卡上为每个指标添加图标,图标颜色可跟随数值变化。 |
通过图标和颜色变化,及时提示数据异常情况。 |
多指标卡(卡片) |
|
在基础多指标卡的基础上添加卡片颜色,用颜色来展示多个指标之间的关系。 |
通过颜色区分多个相关的指标数据,例如某一风场内风机的多种状态分布,为设备维护和故障处理提供参考。 |
多指标卡(同环比) |
|
在基础多指标卡的基础上支持添加多个扩展项,每项指标可以与不同扩展项进行同环比,得出数据趋势。 |
展示某一维度下多个指标数据及其各自的同环比,实时反应多项指标的数据变化趋势。 |
多指标卡(图标&同环比) |
|
在同环比多指标卡的基础上添加默认图标和多个扩展项。 |
通过颜色变化,及时提示指标异常情况。 |
多指标卡(卡片&同环比) |
|
在同环比多指标卡的基础上添加卡片颜色和多个扩展项。 |
通过颜色区分多个相关的指标数据及其同环比数据。 |
指标卡的数据¶
指标卡中的数据以指标为核心,通过对比和维度来限制和细分指标数据,通过扩展来丰富展示数据趋势。
有关数据源、数据项的更多信息,参见 图表通用配置。
单指标卡最佳实践¶
单指标卡用于展示单个指标的数值,可用于展示对业务影响重大、容易理解的关键指标。例如,在创建资源监控面板时,你可以使用单指标卡展示集团的“年产量”指标总量,或按照资产细分展示数据。
单指标卡的指标¶
指标是单指标卡的核心数据。选择核心指标“年产量(YTDYield)”后,单指标卡的中心将默认展示该指标的最新一条数据。
若希望展示所有资产的年产量总和,可通过 维度聚合,展示 求和 后的数值。更多信息,参见 聚合展示数值。
单指标卡的对比¶
若你希望按照某一维度分组展示该指标的数据,重点对比这个维度下每项数据彼此之间的差异,可以在 对比 中添加数据项。
例如为指标 YTDYield 添加对比项 assetId,可按资产分别展示年产量。此时单指标卡中展示指标 YTDYield 按资产划分的多个数据。
当多个 YTDYield 对应着同一个 assetId 时,可通过 维度聚合,将相同对比的指标数据聚合起来。这样在单指标卡中,1 个 assetId 下将展示 1 个数据。更多信息,参见 聚合展示数值。
单指标卡的扩展¶
单指标卡可添加 扩展 字段,数量不限。扩展字段在单指标卡中只有一个用途:作为 占比总值 的来源。在 描述与占比总值 的 占比总值 中选择一个扩展字段后,指标将以 当前值 / 总值 的形式展示占比关系;未添加扩展字段时,该下拉只有 无。
单指标卡不提供 描述 和 同环比配置,如需这两项功能,请改用多指标卡。
多指标卡最佳实践¶
当你已基于业务需要创建了多个指标,可使用多指标卡平铺展示多个指标的数据。例如,可使用多指标卡同时展示一个场站内的风机设备数、实时风速、温度和日发电小时数等 4 个指标,并展示每个指标的同环比数值。
多指标卡的指标¶
在配置指标卡的数据时,首要的是确定 指标。指标决定了指标卡组件中展示的核心数据是什么。在多指标卡中,支持添加多个数据项。默认展示数据项传入的最新一条数据。
多指标卡的维度¶
若你希望按照某一维度聚合展示和查看各个指标的数据,可以在 维度 中添加数据项。
例如,在使用了 Timeseries 数据源的多指标卡中,可按照以下步骤,为指标“发电量”添加维度 localtime,并按当地时间聚合展示发电量数据。
在 维度 中添加数据项
localtime,此时数据列表中,第一列是所选维度,剩余列是所选指标。
在 维度聚合 中选择 是,并在 展开参数 后根据需要配置数据的 时间、资产范围 等。参数取决于所选数据源。此时数据将按维度
localtime聚合的资产数据。
指标卡中展示最后一条数据,默认按照维度的值升序排列。可为维度
localtime切换 升序 或 降序 排列。更多排序方式,参见 对数值排序。
指标数据默认以 求和 的方式聚合,可为指标
发电量定义其它聚合方式。更多聚合方式,参见 聚合展示数值。
上图中,指标 发电量 以求和的方式按月聚合,指标卡中展示最新的月发电量数值。
多指标卡的扩展¶
若需要展示指标数据的额外信息,例如 同环比配置 或 描述,可以在 扩展 中添加数据项。
例如,为指标“当年净排放”添加扩展项“年净排放同比”,可在指标数值旁边展示同比结果。同环比配置 >>。
又如,为指标“温度”添加扩展项“额定温度”,可在指标数值下方展示补充的额定温度信息。描述 >>。
如果没有合适的数据项作为扩展字段,你可以在 添加数据项 弹窗中选择 添加计算字段,将已有数据项进行简单运算,自定义一个数据项,例如“年净排放同比 = (当前年份净排放量 - 前一年净排放量)/ 前一年净排放量 × 100%”。更多信息,参见 计算字段。
指标卡的样式¶
布局¶
对于多指标卡,以及配置了 对比 项的单指标卡,一个组件中将展示多项数据。此时可以通过 布局 修改各项数据的行列分布。
在多指标卡中,布局 是一个独立的配置区块,包含:
行 和 列:指定一屏内展示的指标行列数。指标数量超出行列数时,可通过 其它 标签页的 显示“展开” 提供展开入口。
间距:左右间距 控制相邻指标之间的水平距离;行高 控制每行的高度,设为 0 时按内容自适应。
单指标卡的行列数在 对比样式 的 布局 中设置,且仅在配置了对比项时生效。
指标¶
单指标卡的样式按已添加的指标数量增加配置卡片,每个指标单独配置。
多指标卡的样式分为作用于所有指标的 共享样式 和按指标单独配置的 单个指标样式 两层。样式 标签页顶部还提供 快捷样式切换,可在相近的预设样式之间快速切换。
下列配置项按照多指标卡配置面板的顺序排列。
单个指标样式¶
单个指标样式是在 共享样式 的基础上,进一步定义每个指标单独的样式,例如图标、同环比等。
为某一指标配置单个指标样式后,这一指标的 单个指标样式 将覆盖 共享样式,其余未配置单个指标样式的指标将使用共享样式。
布局方式¶
布局方式 决定名称与数值的排布关系,仅在 指标名称 为 有名称 时显示。
对齐方式:指标内部各元素的对齐方式,可选 两端对齐 等,默认两端对齐。
名称位置:名称相对数值的位置,默认在上方。选择左侧或右侧时,名称与数值横向排列。
名称-数值间距¶
指标卡组件中,一个指标的数据由 名称 和 数值 两部分组成。
名称-数值间距 是指标的名称与数值之间的展示距离。
以下情况不显示 名称-数值间距 配置项,可以通过调整 名称边距 或 数值边距 来控制间距:
基础样式 为 卡片样式。
指标名称 为 无名称。
名称边距¶
指标卡组件中,一个指标的数据由 名称 和 数值 两部分组成。
名称边距 是指标的名称与其它元素之间的边距,如图所示:
上边距
下边距
左边距
右边距
当 指标名称 设为 无名称 时,不显示 名称边距 配置项。数值边距 不受该设置影响,始终可配置。
数值边距¶
指标卡组件中,一个指标的数据由 名称 和 数值 两部分组成。
数值边距 是指标的数值与其它元素之间的边距,如图所示:
上边距
下边距
左边距
右边距
备注
名称边距和数值边距都支持上、下、左、右四个方向。单指标卡不提供四向边距,只在 指标卡样式 > 卡片 中提供 名称框内边距 和 数值框内边距 两个数值。
图标¶
在 共享样式 中将 图标 设为 有图标 后,可在 单个指标样式 中为每个指标单独配置图标:
图标:先选择 内置 或 自定义。选择内置时从图标库中挑选;选择自定义时上传或选择素材图片。
图标颜色跟随数值:勾选后,图标颜色由 颜色规则 按当前数值决定。仅在图标类型为内置时可用。
图标样式:设置图标的 尺寸 和 颜色。仅在图标类型为内置且未勾选颜色跟随数值时可配置颜色。
单指标卡同样支持图标,配置项位于 指标样式 中,包含 图标、图标颜色跟随数值、图标颜色 和 图标大小。
填充色¶
填充色 为指标的名称和数值区域设置背景色,常与 基础样式 的 卡片样式 搭配使用。
名称框 和 数值框:分别设置两个区域的背景色,支持纯色或渐变色。
边框:默认勾选,为填充区域显示边框。
备注
采用卡片样式且名称位于左侧或右侧时,数值框 不可单独配置。单指标卡没有该配置项,改为在 指标卡样式 > 卡片 中通过 卡片套色 选择无、绿、蓝、灰、橙、红六种预置配色。
小数位数与千分位¶
这两项在 单个指标样式 中按指标单独配置:
小数位数:将数值四舍五入到指定位数,最多支持 4 位。
展示千分位:为数值添加千分位分隔符,例如把 1000000 显示为 1,000,000。
描述与占比总值¶
这两项都需要先在 数据 标签页添加 扩展 数据项,再在 单个指标样式 中选择。
描述:选择一个扩展字段,其值作为补充说明显示在指标数值附近,默认为 无。
占比总值:选择一个扩展字段作为分母,指标将以
当前值 / 总值的形式展示占比关系,默认为 无。选择后可另行设置 总值名称字体 和 总值数值字体。
移除扩展数据项后,若原先选中的字段已不存在,这两项会自动重置为 无。
颜色规则¶
颜色规则 在 单个指标样式 中按指标配置,按取值区间改变 数值文字 的颜色。参见 图表通用配置 > 颜色规则。
勾选 图标颜色跟随数值 后,图标颜色也会套用同一组规则。
备注
该颜色规则与 状态圆点 的 启用颜色规则 是两套独立配置:前者作用于数值文字和图标,后者只作用于圆点,且支持按字符串匹配。
状态圆点¶
状态圆点 是显示在指标名称或数值旁边的小圆点,可通过颜色直观反映指标的状态或等级,例如用绿色表示正常、红色表示告警。
在 共享样式 中将 状态圆点 设为 有圆点 后,显示以下配置项:
圆点位置(共享样式中配置):
对齐:圆点跟随 名称 还是 数值,默认名称。
位置:圆点位于所跟随文字的 左侧 或 右侧,默认左侧。
圆点尺寸(共享样式中配置):
尺寸:圆点直径,默认 6。
间距:圆点与文字之间的距离,默认 8。
圆点颜色(在 单个指标样式 中按指标配置):
默认直接指定一个固定颜色,支持纯色或渐变色。
勾选 启用颜色规则 后,改为点击 设置分段匹配规则 在弹窗中按取值分档着色。匹配类型 可选 数值区间(每条规则填 从、至 和 展示颜色)或 匹配字符串(每条规则填匹配字符串和展示颜色),并可设置 不匹配下列规则时展示的颜色。
备注
圆点只提供左右方向的位置选择,没有垂直对齐配置项。圆点相对名称和数值的上下关系由 布局方式 的 名称位置 决定。
同环比配置¶
同环比是比较相邻时间段数据的一种方式,用于辅助展示指标数据的变化趋势。例如,当你需要直观展示某个指标从去年到今年的变化比值,或今年第一季度到第二季度的增长情况,可以配置同环比。
2. 在 选择扩展字段 中为当前指标选择一个 扩展字段 作为同环比的数据项。选择后,同环比的数值将展示在指标的数值旁边。
3. 可进一步定义数值的显示方式、位置、字体和套色。
具体配置项如下:
显示方式:可选 箭头、箭头 + 比值(百分比形式) 或 箭头 + 比值(小数形式),默认只显示箭头。勾选 隐藏数值 后只保留箭头,同时 位置 配置项隐藏。
位置:同环比相对指标数值的位置,可选 指标数值右侧(默认)或 指标数值左侧,并可设置与数值之间的 间距,默认 4 px。
字体:设置同环比文字的字体、字号和加粗等样式。该配置项不提供颜色设置,颜色由 套色 决定。
套色:可选 红升绿降(默认)或 绿升红降,决定上升和下降分别使用哪种颜色。
备注
同环比只在多指标卡中提供,且始终按指标单独配置,不受 覆盖共享样式 控制。单指标卡不支持同环比。
指标卡的其它配置¶
其它 标签页提供以下配置项。刷新频率、标题交互、导出组件数据等通用项,参见 图表通用配置 > 配置其他项。
显示“展开”¶
勾选后,当指标数量超出 布局 设置的行列数时,组件底部提供 展开 入口查看其余指标;取消勾选则只显示布局内可见的部分。
交互动作¶
按指标配置点击后的跳转或联动行为。每个指标可单独设置,配置方法参见 图表通用配置 > 交互设置。
开启趋势分析¶
按指标开启趋势分析后,终端用户将鼠标悬浮到指标上时可查看该指标的历史趋势。开启后可进一步配置 资产聚合 和 资产参数。
有关这三项的详细说明,参见 开启趋势分析、资产聚合 和 资产参数。
备注
单指标卡不提供交互动作和趋势分析配置项。如需为单个指标配置跳转,可使用 基本 标签页的 标题交互,参见 左侧标题交互。
运行时交互¶
指标卡没有提示框开关,也没有图例和轮播,运行时的交互都集中在指标数值上:


