开发预览更新于 2026-05-10

Statistic 统计数值

大字号数字展示 + 千分位 / 前后缀 / 倒计时，常用于 dashboard 顶部指标。

基础用法

value 为数字时自动加千分位分隔符；precision 控制小数位；prefix / suffix 在数字两侧加单位。

背景视口

今日访问

12,384

收入

¥84,520.42

转化率

3.2%

src/App.vue

<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>

import { CfStatistic } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfStatistic label="今日访问" value={12384} />
      <CfStatistic label="收入" value={84520.42} prefix="¥" precision={2} />
      <CfStatistic label="转化率" value={3.2} suffix="%" precision={1} />
    </>
  );
}

import { CfStatistic } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfStatistic label="今日访问" value={12384} />
      <CfStatistic label="收入" value={84520.42} prefix="¥" precision={2} />
      <CfStatistic label="转化率" value={3.2} suffix="%" precision={1} />
    </>
  );
}

API

属性	类型	默认值	说明
`label`	`string`	`—`	数字上方的小字标签
`value`	`number`	`—`	主数字
`precision`	`number`	`0`	小数位数
`prefix` / `suffix`	`string`	`—`	数字前后单位
`separator`	`string`	`','`	千分位分隔符
`decimal`	`string`	`'.'`	小数点字符
`duration`	`number`	`800`	数值变化时的滚动动画时长（毫秒）
`countdown`	`number \| Date \| null`	`—`	倒计时目标时间戳 / Date 对象
`format`	`string`	`'HH:mm:ss'`	倒计时格式（支持 DD / HH / mm / ss）
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	数字字号
`loading`	`boolean`	`false`	加载态，数字位显示 `—`
`className`	`string`	`—`	透传到根元素的额外类名

Events

Vue 事件	React 回调	载荷类型	说明
`finish`	`onFinish`	—	仅倒计时模式（`countdown` 不为空时）有效；倒计时归零时触发