Statistic 统计数值

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

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

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

新增关注212+31%较上月

import { BookOpen, Clock, Users } from 'lucide-react'
import { Card, Grid, Statistic } from '@hina-ui/react'

export default function Demo() {
  return (
    <Grid cols={3} gap="md" className="w-full max-w-3xl">
      <Card>
        <Statistic
          label="本月阅读页数"
          value={12480}
          delta={0.12}
          deltaLabel="较上月"
          icon={<BookOpen />}
        />
      </Card>
      <Card>
        <Statistic
          label="阅读时长"
          value={36.5}
          suffix="小时"
          delta={-0.08}
          deltaLabel="较上月"
          icon={<Clock />}
        />
      </Card>
      <Card>
        <Statistic label="新增关注" value={212} delta={0.31} deltaLabel="较上月" icon={<Users />} />
      </Card>
    </Grid>
  )
}

tsx

用法

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

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

在读12,480

状态正常

import { Card, Inline, Statistic } from '@hina-ui/react'

export default function Demo() {
  return (
    <Inline gap="md" align="stretch">
      <Card className="w-56">
        <Statistic label="在读" value={12480} />
      </Card>
      <Card className="w-56">
        <Statistic label="状态" value="正常" />
      </Card>
    </Inline>
  )
}

tsx

示例

变化

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

新增书评86+18%较上周

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

举报3-40%较上周

import { Card, Inline, Statistic } from '@hina-ui/react'

export default function Demo() {
  return (
    <Inline gap="md" align="stretch">
      <Card className="w-56">
        <Statistic label="新增书评" value={86} delta={0.18} deltaLabel="较上周" />
      </Card>
      <Card className="w-56">
        <Statistic label="活跃读者" value={1204} delta={-0.05} deltaLabel="较上周" />
      </Card>
      <Card className="w-56">
        <Statistic label="举报" value={3} delta={-0.4} deltaLabel="较上周" invert />
      </Card>
    </Inline>
  )
}

tsx

数值格式

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

总阅读量128万

完读率67.4%

本月支出¥128.50

import { Card, Inline, Statistic } from '@hina-ui/react'

export default function Demo() {
  return (
    <Inline gap="md" align="stretch">
      <Card className="w-56">
        <Statistic label="总阅读量" value={1284000} format="compact" />
      </Card>
      <Card className="w-56">
        <Statistic label="完读率" value={0.674} format="percent" precision={1} />
      </Card>
      <Card className="w-56">
        <Statistic label="本月支出" value={128.5} format="currency" currency="CNY" />
      </Card>
    </Inline>
  )
}

tsx

前缀与后缀

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

余额¥2,480

平均时长42分钟

import { Card, Inline, Statistic } from '@hina-ui/react'

export default function Demo() {
  return (
    <Inline gap="md" align="stretch">
      <Card className="w-56">
        <Statistic label="余额" value={2480} prefix="¥" />
      </Card>
      <Card className="w-56">
        <Statistic label="平均时长" value={42} suffix="分钟" />
      </Card>
    </Inline>
  )
}

tsx

图标

icon 属性的图标显示在右侧，只是装饰。

评论1,024

import { Bookmark, MessageSquare } from 'lucide-react'
import { Card, Inline, Statistic } from '@hina-ui/react'

export default function Demo() {
  return (
    <Inline gap="md" align="stretch">
      <Card className="w-56">
        <Statistic label="收藏" value={318} icon={<Bookmark />} />
      </Card>
      <Card className="w-56">
        <Statistic label="评论" value={1024} icon={<MessageSquare />} />
      </Card>
    </Inline>
  )
}

tsx

加载中

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

本月阅读

加载中

'use client'

import { useState } from 'react'
import { Card, Inline, Statistic, Switch } from '@hina-ui/react'

export default function Demo() {
  const [loading, setLoading] = useState(true)

  return (
    <Inline gap="md" align="center">
      <Card className="w-56">
        <Statistic label="本月阅读" value={12480} suffix="页" delta={0.124} loading={loading} />
      </Card>
      <Switch checked={loading} onCheckedChange={setLoading}>
        加载中
      </Switch>
    </Inline>
  )
}

tsx

尺寸

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

在读12,480

import { Card, Inline, Statistic } from '@hina-ui/react'

export default function Demo() {
  return (
    <Inline gap="md" align="stretch">
      <Card className="w-48">
        <Statistic label="在读" value={12480} size="sm" />
      </Card>
      <Card className="w-48">
        <Statistic label="在读" value={12480} />
      </Card>
      <Card className="w-48">
        <Statistic label="在读" value={12480} size="lg" />
      </Card>
    </Inline>
  )
}

tsx

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'`	数字的字号
`className`	`string`	—	追加至根元素的类名

内容属性

属性	说明
`children`	数字下方的内容
`icon`	右侧的图标

用法

示例

变化

数值格式

前缀与后缀

图标

加载中

尺寸

无障碍

API

Props

内容属性