Statistic 统计数值

突出展示某个或某组数字，支持趋势标识、色彩类型、数字动画、加载态等，常用于数据看板和仪表盘。

基础用法

设置 label 和 value 展示统计数值，precision 控制小数位数，separator 控制千分位分隔符。

活跃用户

93,120

总订单

280,000

转化率

12.5%

不同尺寸

提供 sm / md / lg 三种尺寸。

小尺寸

1,234

中尺寸（默认）

1,234

大尺寸

1,234

色彩类型

通过 type 设置不同颜色语义：default / primary / success / warning / danger。

默认

1,200

主要

1,200

成功

1,200

警告

1,200

危险

1,200

前缀和后缀

使用 prefix 和 suffix 属性或同名插槽添加前后缀。

总收入

¥56,800

增长率

8.3%

评分

4.8★

趋势标识

通过 trend 设置上升或下降趋势，trend-text 设置趋势描述文字。

周销量

93,120

较上周 +12.5%

退货率

3.2%

较上月 -2.1%

数字动画

设置 animation 开启数字滚动动画，animation-duration 控制动画时长（毫秒）。

用户总量

加载状态

设置 loading 属性展示骨架屏加载效果。

正常状态

8,800

加载中

自定义标签与底部

使用 #label 和 #footer 插槽自定义标签和底部内容。

本月收入

¥2,568

新增用户

1,286人

在卡片中使用

搭配 Card 组件构建数据看板，是最常见的业务场景。

总用户

126,800

+8.2%

总收入

¥256,800

+15.3%

订单量

9,420单

+5.1%

退货率

2.3%

-1.2%

Props

参数	类型	默认值	说明
`label`	`string`	`—`	标题文本
`value`	`number`	`—`	数值（必填）
`prefix`	`string`	`—`	前缀文本
`suffix`	`string`	`—`	后缀文本
`precision`	`number`	`0`	小数精度
`separator`	`boolean`	`true`	是否显示千分位分隔符
`type`	`'default' \| 'primary' \| 'success' \| 'warning' \| 'danger'`	`'default'`	色彩类型
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	尺寸
`trend`	`'up' \| 'down' \| 'none'`	`'none'`	趋势方向
`trendText`	`string`	`—`	趋势描述文字
`animation`	`boolean`	`false`	是否开启数字滚动动画
`animationDuration`	`number`	`1000`	动画时长（毫秒）
`loading`	`boolean`	`false`	是否显示加载状态

Slots

插槽名	说明
`label`	自定义标签内容
`prefix`	自定义前缀内容
`suffix`	自定义后缀内容
`footer`	底部额外内容