Statistic 統計数値

単一の統計数値を際立って表示します。桁区切り、小数精度、前後サフィックスをサポートし、文字列の value で巨大な数値も扱えます。

統計数値

<template>
  <div class="demo-col">
    <div class="demo-row" style="gap: 48px; flex-wrap: wrap">
      <LhStatistic title="館蔵画作" :value="1280" :separator="separator" suffix=" 点" />
      <LhStatistic title="本日の来館者" :value="visitors" />
      <LhStatistic title="平均価格（万）" :value="price" :precision="2" prefix="¥" />
      <LhStatistic title="巨大な数値" value="9007199254740993" />
    </div>
    <p class="demo-note">separator に空文字列を渡すと桁区切りを無効化します</p>
    <div class="demo-row" style="gap: 48px; flex-wrap: wrap; margin-top: 16px">
      <LhStatistic title="桁区切りなし" :value="visitors" separator="" />
      <LhStatistic :value="2026" suffix=" 年" />
    </div>
  </div>
</template>

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

Props

プロパティ	説明	型	デフォルト値
title	数値のタイトル（数値の上部に表示）	string	—
value	統計数値。文字列形式では巨大な数値や符号付きテキストも扱える	number \| string	—
precision	小数精度	number	—
separator	桁区切り文字。空文字列でグループ化を無効化	string	—
prefix	数値の接頭辞。通貨記号など	string	—
suffix	数値の接尾辞。単位など	string	—
sx	sx によるレイアウト省略記法	—	—