Estadística

LhStatistic sirve para mostrar valores estadísticos; admite precisión decimal, separador de millares y prefijo y sufijo.

Uso básico

Título + valor

Visitas anuales

2,384,712

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

<template>
  <LhStatistic title="Visitas anuales" :value="2384712" />
</template>

<script>
export default {}
</script>

<template>
  <LhStatistic title="Visitas anuales" :value="2384712" />
</template>

Precisión y separador

precision controla los decimales y separator el separador de millares (una cadena vacía desactiva la agrupación)

Puntuación

4.85

Número

8899001

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

<template>
  <div style="display: flex; gap: 48px">
    <LhStatistic title="Puntuación" :value="4.8471" :precision="2" />
    <LhStatistic title="Número" :value="8899001" separator="" />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div style="display: flex; gap: 48px">
    <LhStatistic title="Puntuación" :value="4.8471" :precision="2" />
    <LhStatistic title="Número" :value="8899001" separator="" />
  </div>
</template>

Prefijo y sufijo

prefix / suffix o slots del mismo nombre

Volumen de transacciones

¥128,600yuanes

Tasa de crecimiento

12.6%

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

<template>
  <div style="display: flex; gap: 48px">
    <LhStatistic title="Volumen de transacciones" :value="128600" prefix="¥" suffix="yuanes" />
    <LhStatistic title="Tasa de crecimiento" :value="12.6" :precision="1" suffix="%" />
  </div>
</template>

<script>
export default {}
</script>

<template>
  <div style="display: flex; gap: 48px">
    <LhStatistic title="Volumen de transacciones" :value="128600" prefix="¥" suffix="yuanes" />
    <LhStatistic title="Tasa de crecimiento" :value="12.6" :precision="1" suffix="%" />
  </div>
</template>

Texto no numérico

Cuando value recibe una cadena no analizable, se muestra tal cual; sirve para números desbordantes o textos especiales.

value como cadena

Estrellas

Incontables

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

<template>
  <LhStatistic title="Estrellas" value="Incontables" />
</template>

<script>
export default {}
</script>

<template>
  <LhStatistic title="Estrellas" value="Incontables" />
</template>

API

Props

Prop	Descripción	Tipo	Predeterminado
title	Título del valor	string	—
value	Valor estadístico; en forma de cadena puede albergar números desbordantes o textos con símbolos	string | number	0
precision	Precisión decimal	number	0
separator	Separador de millares; una cadena vacía desactiva la agrupación	string	','
prefix	Prefijo del valor, p. ej. un símbolo de moneda	string	—
suffix	Sufijo del valor, p. ej. una unidad	string	—
sx	Props de maquetación rápida sx	LhSxProps	—

Slots

Slot	Descripción
title	Título personalizado
prefix	Prefijo personalizado
suffix	Sufijo personalizado

Accesibilidad

• La zona del valor lleva aria-live="polite"; cuando cambia value, el lector de pantalla anuncia con suavidad el nuevo valor
• El título, el prefijo y el sufijo son texto normal y se pueden leer directamente

Definiciones de tipos

Las estructuras de tipos TypeScript que exporta este componente son las siguientes (extraídas automáticamente de packages/components/statistic/src/types.ts y del código fuente de @lh-ui/share/core/*; despliega cada entrada para ver la definición completa; la descripción de los atributos está en la tabla de Props de arriba):

LhStatisticProps

export interface LhStatisticProps {
  /** Título del valor (se muestra encima del valor) */
  title?: string
  /** Valor estadístico; en forma de cadena puede albergar números desbordantes o textos con símbolos */
  value: number | string
  /** Precisión decimal */
  precision?: number
  /** Separador de millares; una cadena vacía desactiva la agrupación */
  separator?: string
  /** Prefijo del valor, p. ej. un símbolo de moneda */
  prefix?: string
  /** Sufijo del valor, p. ej. una unidad */
  suffix?: string
  /** Props de maquetación rápida sx */
  sx?: LhSxProps
}