Statistic

Statistic — компонент библиотеки Element Plus, предназначенный для отображения числовых показателей, статистических значений и метрик. Он используется для представления данных в виде аккуратно оформленного числового блока с подписью, дополнительными элементами оформления и возможностью форматирования.

Компонент часто применяется в дашбордах, административных панелях, аналитических интерфейсах и других системах, где необходимо визуально выделить ключевые показатели:

  • количество пользователей
  • объем продаж
  • финансовые показатели
  • скорость операций
  • системные метрики

Основная задача компонента — наглядно представить число и его описание, сохраняя визуальную иерархию интерфейса.

Базовое использование

Минимальная конфигурация компонента состоит из двух параметров:

  • title — подпись показателя
  • value — числовое значение
<template>
  <el-statistic title="Активные пользователи" :value="1024" />
</template>

Результат отображает блок:

Активные пользователи
1024

Значение автоматически стилизуется крупным шрифтом, чтобы выделяться на фоне интерфейса.

Использование с реактивными данными

Компонент работает с реактивными данными Vue.

<template>
  <el-statistic title="Заказы" :value="orders" />
</template>

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

const orders = ref(345)
</script>

При изменении значения orders компонент автоматически обновит отображение.

Форматирование чисел

Для улучшения читаемости больших чисел используется свойство precision, которое определяет количество знаков после запятой.

<template>
  <el-statistic title="Конверсия" :value="12.3456" :precision="2" />
</template>

Результат:

12.35

Это особенно полезно для:

  • финансовых данных
  • процентов
  • научных расчетов
  • статистических показателей

Добавление префикса

Свойство prefix добавляет текст или иконку перед значением.

Пример с валютой:

<template>
  <el-statistic title="Доход" :value="56789">
    <template #prefix>$</template>
  </el-statistic>
</template>

Результат:

$56789

Частые сценарии использования:

  • валюты
  • единицы измерения
  • иконки
  • специальные обозначения

Добавление суффикса

Свойство suffix добавляет элементы после числа.

<template>
  <el-statistic title="Использование CPU" :value="73">
    <template #suffix>%</template>
  </el-statistic>
</template>

Отображение:

73%

Суффикс часто используется для:

  • процентов
  • единиц измерения (GB, ms, km)
  • обозначения валюты
  • пользовательских меток

Использование разделителей тысяч

Для улучшения читаемости больших чисел применяется свойство group-separator.

<template>
  <el-statistic
    title="Просмотры"
    :value="1234567"
    group-separator=","
  />
</template>

Отображение:

1,234,567

В русской локализации часто используется пробел:

group-separator=" "

Разделитель десятичной части

Свойство decimal-separator позволяет изменить символ разделения дробной части.

<template>
  <el-statistic
    title="Цена"
    :value="1234.56"
    decimal-separator=","
    group-separator=" "
  />
</template>

Результат:

1 234,56

Это особенно важно при локализации интерфейсов.

Слот title

Заголовок можно полностью кастомизировать с помощью слота.

<template>
  <el-statistic :value="150">
    <template #title>
      Продажи за сегодня
    </template>
  </el-statistic>
</template>

Это позволяет:

  • добавлять иконки
  • вставлять HTML
  • изменять структуру заголовка

Отображение времени

Компонент поддерживает форматирование временных значений.

Пример отображения даты:

<template>
  <el-statistic
    title="Дата запуска"
    :value="timestamp"
    format="YYYY-MM-DD"
  />
</template>

<script setup>
const timestamp = Date.now()
</script>

Используется для:

  • даты запуска системы
  • времени события
  • таймстампов
  • логирования

Обратный отсчет

Statistic может отображать обратный отсчет времени.

<template>
  <el-statistic
    title="Окончание акции"
    :value="deadline"
    format="HH:mm:ss"
  />
</template>

<script setup>
const deadline = Date.now() + 1000 * 60 * 60
</script>

Компонент автоматически обновляет значение времени.

Подобный функционал часто применяется для:

  • таймеров
  • дедлайнов
  • акций
  • событий

Использование в сетке

Statistic часто используется совместно с Grid системой Element Plus.

<template>
  <el-row :gutter="20">
    <el-col :span="6">
      <el-statistic title="Пользователи" :value="1200" />
    </el-col>

    <el-col :span="6">
      <el-statistic title="Продажи" :value="530" />
    </el-col>

    <el-col :span="6">
      <el-statistic title="Доход" :value="78400">
        <template #prefix>$</template>
      </el-statistic>
    </el-col>

    <el-col :span="6">
      <el-statistic title="Конверсия" :value="6.8">
        <template #suffix>%</template>
      </el-statistic>
    </el-col>
  </el-row>
</template>

В результате формируется панель статистики, используемая в дашбордах.

Стилизация компонента

Компонент можно кастомизировать через CSS.

Пример изменения цвета значения:

.el-statistic__content-value {
  color: #409eff;
  font-weight: 600;
}

Изменение заголовка:

.el-statistic__head {
  color: #909399;
  font-size: 14px;
}

Также можно изменить:

  • размер шрифта
  • межстрочный интервал
  • цветовые акценты
  • расположение элементов

Использование с иконками

Часто статистика сопровождается иконками.

<template>
  <el-statistic :value="2345">
    <template #title>
      <el-icon><User /></el-icon>
      Пользователи
    </template>
  </el-statistic>
</template>

Такой подход делает интерфейс более наглядным.

Динамическое обновление данных

Компонент может обновляться в реальном времени.

<template>
  <el-statistic title="Онлайн пользователи" :value="online" />
</template>

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

const onl ine = ref(120)

setInterval(() => {
  online.value += Math.floor(Math.random() * 5)
}, 3000)
</script>

Подобный сценарий используется в:

  • мониторинге серверов
  • статистике пользователей
  • финансовых панелях
  • системах аналитики

Основные свойства компонента

Свойство Описание
title Заголовок статистического блока
value Отображаемое значение
precision Количество знаков после запятой
prefix Слот для префикса
suffix Слот для суффикса
group-separator Разделитель тысяч
decimal-separator Разделитель дробной части
format Формат отображения даты/времени
value-style Стили для значения

Слоты

Слот Назначение
title Кастомизация заголовка
prefix Элемент перед числом
suffix Элемент после числа

Практический пример панели аналитики

<template>
  <el-row :gutter="20">

    <el-col :span="8">
      <el-statistic title="Новые пользователи" :value="1234" />
    </el-col>

    <el-col :span="8">
      <el-statistic title="Доход" :value="56320">
        <template #prefix>$</template>
      </el-statistic>
    </el-col>

    <el-col :span="8">
      <el-statistic title="Конверсия" :value="5.6">
        <template #suffix>%</template>
      </el-statistic>
    </el-col>

  </el-row>
</template>

Такой блок статистики широко используется в:

  • административных панелях
  • CRM-системах
  • BI-интерфейсах
  • системах мониторинга
  • аналитических панелях управления.

Компонент Statistic обеспечивает удобное представление числовых данных, легко интегрируется с реактивной системой Vue и позволяет гибко настраивать отображение статистических показателей в пользовательских интерфейсах.

Оглавление