El Statistic

Statistic Component

Statistic displays numerical values with optional formatting and countdown support.

When to Use

• Dashboard statistics
• Count displays
• Amount displays
• Countdown timers

Basic Usage

<template>
  <el-statistic title="Total Users" :value="268500" />
</template>

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

Statistic Slots

Countdown Attributes

Countdown Events

Countdown Slots

Best Practices

1. Use precision for decimal values
2. Use group-separator for large numbers
3. Use Countdown for time-sensitive displays