Statistic 统计组件
Statistic 用于突出展示统计数值、金额、排名等数据。VISTA B 直接使用 Element Plus 的 el-statistic，需要倒计时时使用 el-countdown。
基础用法
用于突出某个或某组数字时，数值和标题前后都可以加入图标、单位等元素。需要数值变化动效时，可结合 VueUse 等工具处理输入值。
vue
<el-statistic title="Daily active users" :value="268500" />
<el-statistic :value="138">
<template #title>
<div>
Ratio of men to women
<el-icon><Male /></el-icon>
</div>
</template>
<template #suffix>/100</template>
</el-statistic>格式化数值
通过 precision、decimal-separator、group-separator、prefix、suffix 和 value-style 可以控制数值展示格式。
vue
<el-statistic
title="Rental revenue"
:value="98642.57"
:precision="2"
prefix="$"
/>倒计时
Countdown 用于展示剩余时间，支持自定义标题、格式和控制按钮。
vue
<script setup>
import { ref } from 'vue'
const value = ref(Date.now() + 1000 * 60 * 60 * 7)
</script>
<template>
<el-countdown title="Start to grab" :value="value" />
<el-countdown format="DD [days] HH:mm:ss" :value="value" />
</template>TIP
倒计时格式化时，建议在天数范围内使用，避免过长周期导致展示含义不清。
统计卡片
统计卡片适合在数据看板中组合展示标题、数值、趋势和说明信息。
vue
<div class="statistic-card">
<el-statistic :value="98500">
<template #title>
<div>Daily active users</div>
</template>
</el-statistic>
<div class="statistic-footer">
<span>than yesterday</span>
<span>24%</span>
</div>
</div>Statistic API
Statistic 属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
value | 数字内容 | number / Dayjs | 0 |
decimal-separator | 设置小数点符号 | string | . |
formatter | 自定义数字格式化 | Function | 空 |
group-separator | 设置千分位标识符 | string | , |
precision | 数字精度 | number | 0 |
prefix | 设置数字前缀 | string | 空 |
suffix | 设置数字后缀 | string | 空 |
title | 数字标题 | string | 空 |
value-style | 数字样式 | string / object / array | 空 |
Statistic 插槽
| 插槽名 | 说明 |
|---|---|
title | 数字标题 |
prefix | 数字内容之前 |
suffix | 数字内容之后 |
Statistic 暴露
| 名称 | 说明 | 类型 |
|---|---|---|
displayValue | 当前显示值 | ComputedRef<string | number | Dayjs> |
Countdown API
Countdown 属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
value | 目标时间 | number / Dayjs | 0 |
format | 格式化倒计时 | string | HH:mm:ss |
prefix | 设置倒计时前缀 | string | 空 |
suffix | 设置倒计时后缀 | string | 空 |
title | 倒计时标题 | string | 空 |
value-style | 倒计时值样式 | string / object / array | 空 |
Countdown 事件
| 事件名 | 说明 | 类型 |
|---|---|---|
change | 时间差改变时触发 | (value: number) => void |
finish | 倒计时结束时触发 | () => void |
Countdown 插槽
| 插槽名 | 说明 |
|---|---|
title | 倒计时标题 |
prefix | 倒计时值前缀 |
suffix | 倒计时值后缀 |
Countdown 暴露
| 名称 | 说明 | 类型 |
|---|---|---|
displayValue | 当前显示值 | ComputedRef<string> |
使用提醒
统计组件适合展示关键指标，不适合承载复杂明细。数据看板中建议保持同一行指标的口径一致，并在需要时通过 Tooltip 说明统计口径。