platforms/.agents/skills/arco-design-vue/references/components/data-display/statistic.md

name, description, user-invocable

name	description	user-invocable
arco-vue-statistic	Arco Design Vue 数值显示 Statistic 组件参考。用于 Vue 3、`@arco-design/web-vue`、`<a-statistic>`、属性、事件、插槽、示例和实现细节。	false

数值显示 Statistic

简介

当需要突出某个或某组数字或展示带描述的统计类数据时使用。

基本用法

<template>
  <a-space size="large">
    <a-statistic title="Downloads" :value="125670" show-group-separator />
    <a-statistic extra="Comments" :value="40509" :precision="2" />
  </a-space>
</template>

API

<statistic> 属性

参数名	描述	类型	默认值	版本
title	数值显示的标题	string	-
value	数值显示的值	number | Date	-
format	数值显示的格式 dayjs（日期模式使用）	string	'HH:mm:ss'
extra	额外的显示内容	string	-
start	是否开始动画	boolean	true
precision	小数保留位数（数字模式使用）	number	0
separator	进位分隔符（数字模式使用）	string	-
show-group-separator	是否展示进位分隔符（数字模式使用）	boolean	false
animation	是否开启动画	boolean	false
animation-duration	动画的过度时间	number	2000
value-from	动画的起始值	number	-
placeholder	提示文字（当 value 为 undefined 时显示）	string	-	2.28.0

仅列出常用项，低频属性按需查阅官方 API。

<statistic> 插槽

插槽名	描述	参数
title	标题	-
prefix	前缀	-
suffix	后缀	-
extra	额外内容	-

<countdown> 属性

参数名	描述	类型	默认值	版本
title	倒计时的标题	string	-
value	倒计时的值	number	() => Date.now() + 300000
now	用于修正初始化时间显示不正确	number	() => Date.now()
format	倒计时的展示格式 dayjs	string	'HH:mm:ss'
start	是否开始倒计时	boolean	true
value-style	自定义显示值的样式	CSSProperties	-	2.32.0

<countdown> 事件

事件名	描述	参数
finish	倒计时完成后触发的回调	-

<countdown> 插槽

插槽名	描述	参数
title	标题	-

常用模式

• 自定义前缀&后缀：通过 prefix 和 suffix 插槽可以添加前后缀。
• 数值动画：通过 animation 可以开启数值动画。
• 倒计时组件：倒计时组件 countdown 的基本使用方法。

最佳实践

• 新代码优先使用 Vue 3、Composition API 和 <script setup lang="ts">。
• 模板属性使用 kebab-case，事件使用 @event-name，插槽使用 #slot-name。
• 不要套用 React 专属 API，例如 JSX children、Component.Sub 或 Form.useForm。
• 数据展示组件只负责呈现，分页、筛选、排序等远程状态放在业务层维护。
• 大数据量场景优先使用组件自带的分页、虚拟滚动或懒加载能力。