跳到主要内容
Termlib

UI 组件 · 数据展示

统计数值

Statistic

也叫：指标卡、数据卡片、KPI 卡片、数字卡片

用大号数字突出显示一个关键指标，上面是指标名称，常带单位、涨跌箭头和对比说明。

点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。

怎么跟 AI 说

改成你的业务内容再发

仪表盘顶部横排 4 个统计数值卡片：每张卡片上方是灰色小字指标名，中间是 28px 加粗数字（带千分位和单位），下方是「较上月 ↑ 12.5%」，上涨用绿色、下降用红色并配箭头；窄屏时自动变成两列。

发给

01判断

你的内容是这样吗？

对照两列，确认统计数值是不是你要找的。

符合这些情况，用统计数值

  • 仪表盘顶部需要一眼看到几个关键业务指标
  • 需要突出单个数字及其相对上一周期的变化
  • 报表页开头先给出总数、总额这类结论性数字

是这些情况，换成别的

  • 需要展示一段时间内的变化趋势或各部分占比

    改用图表

  • 数据是很多行多列的明细

    改用表格

  • 只是提示未读消息数量

    改用徽标

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    一行塞了八九个统计卡片，每个数字都一样大，没有重点

    下面的线框画的就是这种情况，红色虚线框是出问题的地方。

  2. 02

    数字没有单位和统计周期，用户不知道是今天还是本月

  3. 03

    涨跌只用红绿颜色区分，没有箭头或正负号

反例示意，对应第 01 条

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由指标名称、大号数值（含前后缀单位）和可选的趋势说明（涨跌箭头、对比百分比或迷你图）组成。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1一行几张小卡片，每张里有一个醒目的大号数字
  2. 2数字上方有灰色小字标题
  3. 3数字下方有上下箭头和百分比

04解释

详细解释

统计数值是仪表盘里最常见的小模块：上面一行小字写「本月销售额」，下面一个大号加粗数字「¥128,560」，旁边或下方写「较上月 ↑ 12.5%」。多个统计数值通常横向排成一行，放在页面顶部，让人一眼看到最重要的几个数。有的还带一条迷你折线（Sparkline）表示近期走势。

它和 图表 的分工：统计数值回答「现在是多少」，图表回答「怎么变化、各部分占多少」，通常先用几个统计数值给结论，再用图表展开细节。和 徽标 的区别：徽标是贴在图标角上的小红点或小数字，提醒未读数量，不用来展示业务指标。数字要统一千分位和小数位，涨跌要配箭头或正负号，不能只靠红绿区分。

开发者信息
术语 ID
component-statistic
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • .ant-statistic
  • .el-statistic
  • .arco-statistic
  • .n-statistic
  • [data-slot="card"]:has([data-slot="card-description"] + [data-slot="card-title"])
  • [data-slot="card"]:has(.tabular-nums):not(:has(table, ul, form))
  • :is(.rounded, .rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl, [data-slot="card"]):has(:is(.text-2xl, .text-3xl, .text-4xl):is(.font-bold, .font-semibold):not(h1, h2, h3)):not(:has(ul, table, form, input, textarea, canvas))
  • .stat
  • .ant-card:has(> .ant-card-body > .ant-statistic)
  • .el-card:has(> .el-card__body > .el-statistic)
  • [data-slot="card-description"] + [data-slot="card-title"]
  • [data-slot="card-title"].tabular-nums
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • stat
  • stat-card
  • stats-card
  • statistic
  • statistics-card
  • metric
  • metric-card
  • metrics-card
  • kpi
  • kpi-card
  • stat-item
  • summary-card
  • number-card
  • overview-card
  • stat-box
  • metric-item
  • counter-card
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Statistic
  • StatCard
  • StatsCard
  • MetricCard
  • KpiCard
  • Stat
  • SummaryCard
  • Metric
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 大号数字
  • 标签 + 值
优先级
3 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30