Статистика

LhStatistic используется для отображения статистических значений; поддерживает точность, разделение разрядов, префиксы и суффиксы.

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

Заголовок + значение

Годовые посещения

2,384,712

<script setup lang="ts">
</script>

<template>
  <LhStatistic title="Годовые посещения" :value="2384712" />
</template>

<script>
export default {}
</script>

<template>
  <LhStatistic title="Годовые посещения" :value="2384712" />
</template>

Точность и разделитель

precision управляет количеством знаков после запятой, separator — разделителем разрядов (пустая строка отключает группировку)

Оценка

4.85

Номер

8899001

<script setup lang="ts">
</script>

<template>
  <div style="display: flex; gap: 48px">
    <LhStatistic title="Оценка" :value="4.8471" :precision="2" />
    <LhStatistic title="Номер" :value="8899001" separator="" />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div style="display: flex; gap: 48px">
    <LhStatistic title="Оценка" :value="4.8471" :precision="2" />
    <LhStatistic title="Номер" :value="8899001" separator="" />
  </div>
</template>

Префикс и суффикс

prefix / suffix или одноимённые слоты

Сумма сделок

¥128,600юаней

Темп роста

12.6%

<script setup lang="ts">
</script>

<template>
  <div style="display: flex; gap: 48px">
    <LhStatistic title="Сумма сделок" :value="128600" prefix="¥" suffix="юаней" />
    <LhStatistic title="Темп роста" :value="12.6" :precision="1" suffix="%" />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div style="display: flex; gap: 48px">
    <LhStatistic title="Сумма сделок" :value="128600" prefix="¥" suffix="юаней" />
    <LhStatistic title="Темп роста" :value="12.6" :precision="1" suffix="%" />
  </div>
</template>

Текст вместо числа

Если в value передана строка, которую не удалось разобрать, она отображается как есть; это удобно для очень больших чисел или специальных надписей.

Строковое value

Звёзды

неисчислимо

<script setup lang="ts">
</script>

<template>
  <LhStatistic title="Звёзды" value="неисчислимо" />
</template>

<script>
export default {}
</script>

<template>
  <LhStatistic title="Звёзды" value="неисчислимо" />
</template>

API

Props

Свойство	Описание	Тип	По умолчанию
title	Заголовок значения	string	—
value	Статистическое значение; в строковой форме может содержать очень большие числа или текст со знаками	string | number	0
precision	Точность дробной части	number	0
separator	Разделитель разрядов; пустая строка отключает группировку	string	','
prefix	Префикс значения, например символ валюты	string	—
suffix	Суффикс значения, например единица измерения	string	—
sx	Свойство sx для быстрой вёрстки	LhSxProps	—

Слоты

Слот	Описание
title	Пользовательский заголовок
prefix	Пользовательский префикс
suffix	Пользовательский суффикс

Доступность

• Область значения помечена aria-live="polite": при изменении value скринридер мягко объявляет новое значение
• Заголовок, префикс и суффикс — обычный текст, который считывается напрямую

Определения типов

Компонент экспортирует следующие структуры TypeScript (автоматически извлечено из исходников packages/components/statistic/src/types.ts и @lh-ui/share/core/*; раскройте каждый пункт, чтобы увидеть полное определение; описания свойств — в таблице Props выше):

LhStatisticProps

export interface LhStatisticProps {
  /** Заголовок значения (отображается над числом) */
  title?: string
  /** Статистическое значение; в строковой форме может содержать очень большие числа или текст со знаками */
  value: number | string
  /** Точность дробной части */
  precision?: number
  /** Разделитель разрядов; пустая строка отключает группировку */
  separator?: string
  /** Префикс значения, например символ валюты */
  prefix?: string
  /** Суффикс значения, например единица измерения */
  suffix?: string
  /** Свойство sx для быстрой вёрстки */
  sx?: LhSxProps
}