Statistic 统计数值

统计数值展示，支持数字动画和倒计时功能。

基础用法

通过 title 设置标题，value 设置数值。

总销售额

268,500

<template>
  <ZcStatistic title="总销售额" :value="268500" />
</template>

前缀与后缀

通过 prefix 和 suffix 设置前缀和后缀。

总销售额

¥268,500

增长率

9.6%

活跃用户

21,893

<template>
  <div style="display: flex; gap: 32px;">
    <ZcStatistic title="总销售额" :value="268500" prefix="¥" />
    <ZcStatistic title="增长率" :value="9.6" suffix="%" :precision="1" />
    <ZcStatistic title="活跃用户" :value="21893" />
  </div>
</template>

数字动画

设置 count-up 开启数字增长动画。

活跃用户

268,500

<template>
  <ZcStatistic title="活跃用户" :value="268500" count-up :count-from="0" :duration="2000" />
</template>

倒计时

设置 countdown 开启倒计时功能。

活动倒计时

<template>
  <ZcStatistic title="活动倒计时" :start-value="Date.now() + 6 * 60 * 60 * 1000" countdown />
</template>

Statistic API

Props

参数	说明	类型	默认值
value	数值	number	0
title	标题	string	''
prefix	前缀	string	''
suffix	后缀	string	''
precision	数字精度	number	0
decimalSeparator	小数点	string	'.'
groupSeparator	千分位分隔符	string	','
formatter	自定义格式化函数	(value: number) => string	undefined
valueStyle	数值自定义样式	object	{}
countUp	是否开启数字增长动画	boolean	false
countFrom	动画起始值	number	0
duration	动画时长(ms)	number	2000
countdown	是否开启倒计时	boolean	false
format	倒计时格式	string	'HH:mm:ss'
startValue	倒计时起始时间戳	number	0

Slots

插槽名	说明
default	自定义数值显示
title	自定义标题
prefix	自定义前缀
suffix	自定义后缀