With Prefix/Suffix

<template>
  <el-statistic title="Revenue" :value="100000" prefix="$" suffix="USD" />
</template>

Formatting

<template>
  <el-statistic
    title="Formatted Number"
    :value="1234567.89"
    :precision="2"
    group-separator=","
    decimal-separator="."
  />
</template>

Custom Formatter

<template>
  <el-statistic
    title="Custom Format"
    :value="1234567"
    :formatter="formatter"
  />
</template>

<script setup>
const formatter = (value) => {
  return value.toLocaleString('en-US')
}
</script>

Countdown

<template>
  <el-countdown
    title="Countdown"
    :value="deadline"
    @finish="handleFinish"
  />
</template>

<script setup>
import { ref } from 'vue'

const deadline = ref(Date.now() + 1000 * 60 * 60 * 24)

const handleFinish = () => {
  console.log('Countdown finished')
}
</script>

Countdown Format

<template>
  <el-countdown
    title="Custom Format"
    :value="deadline"
    format="DD days HH:mm:ss"
  />
</template>

API Reference

Statistic Attributes

Name	Description	Type	Default
value	Numeric value	`number`	`0`
title	Title	`string`	—
prefix	Prefix	`string`	—
suffix	Suffix	`string`	—
precision	Decimal precision	`number`	`0`
decimal-separator	Decimal separator	`string`	`'.'`
group-separator	Thousand separator	`string`	`','`
formatter	Custom formatter	`(value: number) => string \| number`	—
value-style	Value style	`CSSProperties`	—

Statistic Slots

Name	Description
title	Custom title
prefix	Custom prefix
suffix	Custom suffix

Countdown Attributes

Name	Description	Type	Default
value	Target time	`number \| Dayjs`	—
title	Title	`string`	—
prefix	Prefix	`string`	—
suffix	Suffix	`string`	—
format	Display format	`string`	`'HH:mm:ss'`
value-style	Value style	`CSSProperties`	—

Countdown Events

Name	Description	Type
change	Time difference changes	`(value: number) => void`
finish	Countdown ends	`() => void`

Countdown Slots

Name	Description
title	Custom title
prefix	Custom prefix
suffix	Custom suffix

Best Practices

Use precision for decimal values
Use group-separator for large numbers
Use Countdown for time-sensitive displays

el-statistic

Statistic Component

When to Use

Basic Usage