指标卡

2025-1-14

分析师
普通用户
图表设计

About 23 min

# KPI指标卡

指标卡在数据看板中扮演着非常重要的角色，本章将学习通过BI设计各种风格的指标卡

指标卡配置至少需要一个指标，我们从最简单的一个指标开始

当配置多个指标或者增加列维指标卡组件则可以通过网格形式一次展示多个指标

# 指标格式化、前缀、后缀

指标支持统一配置前缀、后缀，或者为每个指标单独配置前缀后缀，

指标卡的前后缀配置与格式化的前后缀不同之处在于前后缀配置可以独立的配置前后缀字体样式

# 指标注解

可以在图表配置中为指标配置注释也在可以数据集中对指标字段统一配置注释，不希望显示注释可以在指标名/指标值配置栏中关闭注释显示

# 风格切换

指标卡默认以卡片风格展示，您可以通过样式->风格切换不同的展示风格

# 指标卡背景图

为指标卡配置背景图，背景图可以是网络图片或者上传图

# 卡片风格

指标卡背景色配置，第一个指标卡背景色单独配置，v2.1之后，多个指标卡可以通过调色板批量控制

# 朴素风格

朴素风格指标卡常用于大屏指标展示，原始的朴素风格指标卡只有指标名与指标值，甚至大多数场景下配合不显示指标名(指标名单独用文本组件显示)

# 翻牌器风格

翻牌器每个数字展示位一个数字卡片

风格设置为翻牌器之后，图表配置栏会出现一栏翻牌器特有样式属性
如果您配置的字体不能在卡片中垂直或水平居中，可以使用内边距调整字体上下偏移量
水平边距用于控制卡片间的距离
上边距用于控制指标名与数字卡片的距离
下边距用于控制数字卡片与同环比的距离
翻牌器背景图 为每个数字卡片的背景图

# 表格表格风格

表格风格指标卡用于一表格形式展示多个指标

表头配置中可以配置不显示表头、表头行高、表头字体等
边框配置不开启边框默认为三线表，如果需要完全不显示边框可以把边框宽度设置为0
其他配置栏
- 斑马纹
- 指标数据行高
- 各列宽度：宽度可以是百分数或者纯数字(px)

# 主从风格

主从风格指标卡用于展示一个关键主指标，多个从指标的场景

v2.0.3开始支持按列维拆分多个主从指标与条件格式

# 多指标网格

多个指标使用grid网格布局，默认一个指标卡片占一个网格，
您可以设置网格划分的行列数，也可以对特定指标的其实行列、行列跨度进行设置

# 指标分页^v2.1

多指标配置设置网格行、列数
当指标卡总数量大于页网格数之后指标自动分页
支持配置自动播放与播放时间间隔

# 多指标组合 ^v2.1

切换风格为朴素
在不做指标组合的配置下，每个指标独占一个指标卡，v2.1增加按列维组合指标，开启按列维组合指标之后可以将列维值相同的指标组合显示在一个指标卡

# 按指标栏组合

如果没有列维您还可以通过增加指标栏的形式给指标分组

# 多指标卡布局

在开始多指标组合布局之前，先认识一下组合之后的指标卡片元素

图标区块
主指标区块
指标组区块
每个区块内的元素又可以设置行列布局

# 布局辅助线

组合指标元素很多，为了方便布局调整，我们提供了布局辅助线，开启辅助线之后可以清晰的观察每个区块、每个元素的位置与大小

# 组标题配置

组标题伴随: 组标题可以选择伴随图标或者指标

组标题位置: 标题伴随图标可以配置围绕图标的位置
组标题字体: 组标题字体配置，位于图标上下时不要忘记字体对齐配置

# 图标区块配置

图标区块位置配置

还可以配置

图标是否显示: 为了便于组标题布局，如果组标题伴随图标，即使图标不显示，图标区块也会存在
图表区块宽度与高度：图标区块位于上方配合高度配置，图标区块位于两边配合宽度配置
图标与内容间隔：用于配置图标与组标题间隔
图标选择、图标大小与圆角：在样式栏中配置

# 指标组

指标组为网格布局，你可以配置

网格行列数量
网格行列间距
指标组区块占卡片的整体宽、高

# 指标项

指标组中指标项统一配置

您可以配置指标项的

排列
指标名位置
指标名值间距
指标项目内边距
背景色
边框、圆角
指标名、指标值字体
按列排列时可以配置指标名、指标值宽度

# 指标组合主从

开启主从指标，指标组内第一个指标会作为主指标, 主指标项目可以独立配置

# 同比环比

指标卡输入没有行维度信息时只有一个指标值，如果需要进行同环比比较计算，需要增加行维，让一个值变成一个系列，然后引擎会按照默认偏移量进行比较计算，

默认情况下，环比比较偏移量为1，即与上一个数值进行比较，同比比较偏移量为12，支持微调项目中修改

# 数据源层计算同环比

从上面的同环比快速计算逻辑可以看出，如果数据过滤了对比日期之后表面数据，那么同环比值无法计算。
如果希望在数据源层面进行计算，并且希望看板参数上能指定过滤周期，可以参考下面的逻辑实现

# 日环比

增加计算字段今日销售额

IF(`r_date` = '${dt!cdt.now("yyyy-MM-dd")}', `store_sales`, 0)

增加计算字段昨日销售额

IF(addDay(`r_date`, 1) = '${dt!cdt.now("yyyy-MM-dd")}', `store_sales`, 0)

增加汇总表达式日环比

CHGRATE(sum(`昨日销售额`), sum(`今日销售额`))

拖拽今日销售额、昨日销售额到指标栏，汇总类型选择sum, 拖拽汇总表达式日环比到指标

# 月环比

增加计算字段本月销售额

IF( 
  DATETRUNC('month', `r_date`) = '${cdt.startOfMonth(dt, "yyyy-MM-dd")}', 
  `store_sales`, 0)

1
2
3

增加计算字段上月销售额

IF(
  DATETRUNC('month', addMonth(`r_date`, 1)) = '${cdt.startOfMonth(dt, "yyyy-MM-dd")}', 
  `store_sales`, 0)