Preview Updated 2026-05-10

Statistic

Large numeric display with thousand separators, prefix/suffix, and countdown. Common in dashboard headers.

Basic usage

When value is a number, thousand separators are applied automatically. precision controls decimal places. prefix / suffix add units on either side.

背景

今日访问

12,384

收入

¥84,520.42

转化率

3.2%

<script setup lang="ts">
import { CfStatistic } from '@chufix-design/vue';
</script>

<template>
  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px;">
    <CfStatistic label="今日访问" :value="12384" />
    <CfStatistic label="收入" :value="84520.42" prefix="¥" :precision="2" />
    <CfStatistic label="转化率" :value="3.2" suffix="%" :precision="1" />
  </div>
</template>

<script setup>
import { CfStatistic } from '@chufix-design/vue';
</script>

<template>
  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px;">
    <CfStatistic label="今日访问" :value="12384" />
    <CfStatistic label="收入" :value="84520.42" prefix="¥" :precision="2" />
    <CfStatistic label="转化率" :value="3.2" suffix="%" :precision="1" />
  </div>
</template>

<CfStatistic label="Today's visits" value={12384} />
<CfStatistic label="Revenue" value={84520.42} prefix="¥" precision={2} />
<CfStatistic label="Conversion" value={3.2} suffix="%" precision={1} />

<CfStatistic label="Today's visits" value={12384} />
<CfStatistic label="Revenue" value={84520.42} prefix="¥" precision={2} />
<CfStatistic label="Conversion" value={3.2} suffix="%" precision={1} />

API

Prop	Type	Default	Description
`label`	`string`	`—`	Small label above the number
`value`	`number`	`—`	Main number
`precision`	`number`	`0`	Decimal places
`prefix` / `suffix`	`string`	`—`	Units before/after the number
`separator`	`string`	`','`	Thousand separator
`decimal`	`string`	`'.'`	Decimal character
`duration`	`number`	`800`	Roll animation duration on value change (ms)
`countdown`	`number \| Date \| null`	`—`	Countdown target timestamp / Date
`format`	`string`	`'HH:mm:ss'`	Countdown format (supports DD / HH / mm / ss)
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Number font size
`loading`	`boolean`	`false`	Loading state, number slot shows `—`

Events: onFinish (countdown mode only, fired when reaching zero).