Statistic 统计数值

突出显示一个关键数字，附带标签与变化。

本月阅读页数12,480+12%较上月

阅读时长36.5小时-8%较上月

新增关注212+31%较上月

<script setup lang="ts">
  import { BookOpen, Clock, Users } from '@lucide/vue'
  import { Card, Grid, Statistic } from '@hina-ui/vue'
</script>

<template>
  <Grid :cols="3" gap="md" class="w-full max-w-3xl">
    <Card>
      <Statistic label="本月阅读页数" :value="12480" :delta="0.12" delta-label="较上月">
        <template #icon><BookOpen /></template>
      </Statistic>
    </Card>
    <Card>
      <Statistic label="阅读时长" :value="36.5" suffix="小时" :delta="-0.08" delta-label="较上月">
        <template #icon><Clock /></template>
      </Statistic>
    </Card>
    <Card>
      <Statistic label="新增关注" :value="212" :delta="0.31" delta-label="较上月">
        <template #icon><Users /></template>
      </Statistic>
    </Card>
  </Grid>
</template>

vue

用法

import { Statistic } from '@hina-ui/vue'

label 说明这个数字是什么，value 是数字本身。数值按当前界面语言的习惯加千分位，字符串则原样显示。组件本身没有边框与底色，放进 Card 或 Panel 里使用。

在读12,480

状态正常

<script setup lang="ts">
  import { Card, Inline, Statistic } from '@hina-ui/vue'
</script>

<template>
  <Inline gap="md" align="stretch">
    <Card class="w-56">
      <Statistic label="在读" :value="12480" />
    </Card>
    <Card class="w-56">
      <Statistic label="状态" value="正常" />
    </Card>
  </Inline>
</template>

vue

示例

变化

delta 是相对上一期的变化比例，以带正负号的百分比显示，上升为成功色，下降为危险色，deltaLabel 说明比较的对象。对于越低越好的指标，设置 invert 反转好坏。

新增书评86+18%较上周

活跃读者1,204-5%较上周

举报3-40%较上周

<script setup lang="ts">
  import { Card, Inline, Statistic } from '@hina-ui/vue'
</script>

<template>
  <Inline gap="md" align="stretch">
    <Card class="w-56">
      <Statistic label="新增书评" :value="86" :delta="0.18" delta-label="较上周" />
    </Card>
    <Card class="w-56">
      <Statistic label="活跃读者" :value="1204" :delta="-0.05" delta-label="较上周" />
    </Card>
    <Card class="w-56">
      <Statistic label="举报" :value="3" :delta="-0.4" delta-label="较上周" invert />
    </Card>
  </Inline>
</template>

vue

数值格式

format 与 NumberFormat 相同：compact 缩写大数，percent 显示百分比，currency 配合 currency 显示货币；precision 限制小数位数。

总阅读量128万

完读率67.4%

本月支出¥128.50

<script setup lang="ts">
  import { Card, Inline, Statistic } from '@hina-ui/vue'
</script>

<template>
  <Inline gap="md" align="stretch">
    <Card class="w-56">
      <Statistic label="总阅读量" :value="1284000" format="compact" />
    </Card>
    <Card class="w-56">
      <Statistic label="完读率" :value="0.674" format="percent" :precision="1" />
    </Card>
    <Card class="w-56">
      <Statistic label="本月支出" :value="128.5" format="currency" currency="CNY" />
    </Card>
  </Inline>
</template>

vue

前缀与后缀

prefix 与 suffix 以较小的字号贴在数字两侧，用于单位或符号。

余额¥2,480

平均时长42分钟

<script setup lang="ts">
  import { Card, Inline, Statistic } from '@hina-ui/vue'
</script>

<template>
  <Inline gap="md" align="stretch">
    <Card class="w-56">
      <Statistic label="余额" :value="2480" prefix="¥" />
    </Card>
    <Card class="w-56">
      <Statistic label="平均时长" :value="42" suffix="分钟" />
    </Card>
  </Inline>
</template>

vue

图标

icon 插槽的图标显示在右侧，只是装饰。

评论1,024

<script setup lang="ts">
  import { Bookmark, MessageSquare } from '@lucide/vue'
  import { Card, Inline, Statistic } from '@hina-ui/vue'
</script>

<template>
  <Inline gap="md" align="stretch">
    <Card class="w-56">
      <Statistic label="收藏" :value="318">
        <template #icon><Bookmark /></template>
      </Statistic>
    </Card>
    <Card class="w-56">
      <Statistic label="评论" :value="1024">
        <template #icon><MessageSquare /></template>
      </Statistic>
    </Card>
  </Inline>
</template>

vue

加载中

loading 为真时数字与变化各自以骨架占位，标签保持可见，加载前后布局不跳动。

本月阅读

加载中

<script setup lang="ts">
  import { ref } from 'vue'
  import { Card, Inline, Statistic, Switch } from '@hina-ui/vue'

  const loading = ref(true)
</script>

<template>
  <Inline gap="md" align="center">
    <Card class="w-56">
      <Statistic label="本月阅读" :value="12480" suffix="页" :delta="0.124" :loading="loading" />
    </Card>
    <Switch v-model="loading">加载中</Switch>
  </Inline>
</template>

vue

尺寸

三档只改变数字的字号，md 是默认值。

在读12,480

<script setup lang="ts">
  import { Card, Inline, Statistic } from '@hina-ui/vue'
</script>

<template>
  <Inline gap="md" align="stretch">
    <Card class="w-48">
      <Statistic label="在读" :value="12480" size="sm" />
    </Card>
    <Card class="w-48">
      <Statistic label="在读" :value="12480" />
    </Card>
    <Card class="w-48">
      <Statistic label="在读" :value="12480" size="lg" />
    </Card>
  </Inline>
</template>

vue

API

Props

属性	类型	默认值	说明
`label`	`string`	—	必填。数字的说明
`value`	`number \| string \| null`	—	数值，空值显示破折号
`format`	`'decimal' \| 'compact' \| 'percent' \| 'currency'`	`'decimal'`	数值格式
`currency`	`string`	—	货币代码，配合 `currency`
`precision`	`number`	—	最多保留的小数位数
`prefix`	`string`	—	数字前的符号
`suffix`	`string`	—	数字后的单位
`delta`	`number`	—	变化比例，`0.12` 即 12%
`deltaLabel`	`string`	—	变化的说明
`invert`	`boolean`	`false`	下降视为好的变化
`loading`	`boolean`	`false`	是否显示骨架
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	数字的字号
`class`	`string`	—	追加至根元素的类名

插槽

插槽	说明
default	数字下方的内容
`icon`	右侧的图标

用法

示例

变化

数值格式

前缀与后缀

图标

加载中

尺寸

无障碍

API

Props

插槽