Estadística

Destaca un único valor estadístico. Admite separador de miles, precisión decimal, prefijo y sufijo; un value en forma de cadena puede albergar números muy grandes.

Estadística

<template>
  <div class="demo-col">
    <div class="demo-row" style="gap: 48px; flex-wrap: wrap">
      <LhStatistic title="Obras de la colección" :value="1280" :separator="separator" suffix=" obras" />
      <LhStatistic title="Visitantes de hoy" :value="visitors" />
      <LhStatistic title="Precio medio (decenas de miles)" :value="price" :precision="2" prefix="¥" />
      <LhStatistic title="Número muy grande" value="9007199254740993" />
    </div>
    <p class="demo-note">Pasar una cadena vacía en separator desactiva la agrupación de miles</p>
    <div class="demo-row" style="gap: 48px; flex-wrap: wrap; margin-top: 16px">
      <LhStatistic title="Sin separador de miles" :value="visitors" separator="" />
      <LhStatistic :value="2026" suffix=" año" />
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    separator: ',',
    visitors: 38651,
    price: 182.5,
  }),
}
</script>

Props

Prop	Descripción	Tipo	Predeterminado
title	Título del valor (se muestra encima del número)	string	—
value	Valor estadístico; en forma de cadena puede albergar números muy grandes o texto con signo	number \| string	—
precision	Precisión decimal	number	—
separator	Separador de miles; la 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	Prop abreviada de maquetación	—	—