简体中文

English

简体中文

English

深色模式

数值 Statistic ​

用于展示数值类统计数据，支持动画、千分位、小数精度、自定义前缀等功能。

基础用法 ​

通过 v-model 绑定数值，支持动态切换。

100.91
vue
<template>
  <bp-button size="small" type="plain" @click="random" style="margin-bottom: 20px">切换</bp-button>

  <bp-statistic v-model="value" animation :precision="2" :font-size="['26px', '26px']"> </bp-statistic>
</template>

<script setup lang="ts">
import { ref } from "vue";

const value = ref(100.91);

const random = () => {
  value.value = (Math.floor(Math.random() * 9999999) + 1) / 100;
};
</script>

小数精度 ​

通过 precision 属性设置小数位数，自动四舍五入并补零。

无小数 (默认)
3
保留 2 位
3.14
保留 4 位
3.1416
vue
<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">无小数 (默认)</div>
      <bp-statistic v-model="val1" />
    </div>
    <div>
      <div class="label">保留 2 位</div>
      <bp-statistic v-model="val2" :precision="2" />
    </div>
    <div>
      <div class="label">保留 4 位</div>
      <bp-statistic v-model="val3" :precision="4" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const val1 = ref(3);
const val2 = ref(3.14);
const val3 = ref(3.1415926);
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 8px;
}
</style>

千分位分隔 ​

通过 show-separator 属性开启千分位分隔，separator 自定义分隔符。

千分位分隔
1,234,567
自定义分隔符
1.234.567
带精度 + 千分位
1,234,567.89
vue
<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">千分位分隔</div>
      <bp-statistic v-model="val1" show-separator />
    </div>
    <div>
      <div class="label">自定义分隔符</div>
      <bp-statistic v-model="val2" show-separator separator="." />
    </div>
    <div>
      <div class="label">带精度 + 千分位</div>
      <bp-statistic v-model="val3" show-separator :precision="2" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const val1 = ref(1234567);
const val2 = ref(1234567);
const val3 = ref(1234567.89);
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 8px;
}
</style>

单位与前缀 ​

通过 unit 属性设置单位，prefix 插槽自定义前缀内容。

带单位
99.9%
自定义前缀
💰2048
货币符号前缀
¥19,999
vue
<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">带单位</div>
      <bp-statistic v-model="val1" unit="%" :precision="1" />
    </div>
    <div>
      <div class="label">自定义前缀</div>
      <bp-statistic v-model="val2">
        <template #prefix>
          <span style="font-size: 16px; margin-right: 4px">💰</span>
        </template>
      </bp-statistic>
    </div>
    <div>
      <div class="label">货币符号前缀</div>
      <bp-statistic v-model="val3" show-separator>
        <template #prefix>
          <span style="font-size: 16px; margin-right: 2px">¥</span>
        </template>
      </bp-statistic>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const val1 = ref(99.9);
const val2 = ref(2048);
const val3 = ref(19999);
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 8px;
}
</style>

动画效果 ​

通过 animation 属性开启动画，duration 控制动画时长，value-from 设置起始值。

从 0 动画到目标值
8888.88万
自定义起始值
8,889
vue
<template>
  <div>
    <bp-button size="small" type="plain" @click="restart" style="margin-bottom: 20px">重新播放</bp-button>
    <div style="display: flex; gap: 40px">
      <div>
        <div class="label">从 0 动画到目标值</div>
        <bp-statistic v-model="value" animation :duration="2000" :precision="2" unit="万" />
      </div>
      <div>
        <div class="label">自定义起始值</div>
        <bp-statistic v-model="value" animation :value-from="500" :duration="1500" show-separator />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const value = ref(8888.88);

const restart = () => {
  value.value = 0;
  setTimeout(() => {
    value.value = 8888.88;
  }, 100);
};
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 8px;
}
</style>

颜色与字号 ​

通过 color 属性自定义颜色，font-size 支持字符串或数组（分别设置整数和小数字号）。

自定义颜色
76.5%
警告色
3,200人
自定义字号
42
整数/小数不同字号
99.8%
vue
<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">自定义颜色</div>
      <bp-statistic v-model="val1" :precision="1" unit="%" color="#00b42a" />
    </div>
    <div>
      <div class="label">警告色</div>
      <bp-statistic v-model="val2" show-separator color="#ff7d00" unit="人" />
    </div>
    <div>
      <div class="label">自定义字号</div>
      <bp-statistic v-model="val3" font-size="40px" />
    </div>
    <div>
      <div class="label">整数/小数不同字号</div>
      <bp-statistic v-model="val4" :precision="1" :font-size="['32px', '18px']" unit="%" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const val1 = ref(76.5);
const val2 = ref(3200);
const val3 = ref(42);
const val4 = ref(99.8);
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 8px;
}
</style>

占位文本 ​

当数值为 undefined 或 null 时显示占位文本，通过 placeholder 属性自定义。

默认占位
--
自定义占位
暂无数据
切换数值
--
vue
<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">默认占位</div>
      <bp-statistic />
    </div>
    <div>
      <div class="label">自定义占位</div>
      <bp-statistic placeholder="暂无数据" />
    </div>
    <div>
      <div class="label">切换数值</div>
      <bp-button size="small" type="plain" @click="toggle">切换</bp-button>
      <bp-statistic animation v-model="val" style="margin-top: 8px" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const val = ref<number | undefined>(undefined);
const toggle = () => {
  val.value = val.value === undefined ? 2026 : undefined;
};
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 8px;
}
</style>

Statistic 属性 ​

v-model绑定值
Number
--
value数值
Number
--
placeholder占位文本
String
---
separator千分位分隔符
String
,-
show-separator是否显示千分位
Boolean
--
color文字颜色
String
--
unit单位
String
--
precision小数精度
Number
--
font-size字体大小
StringArray
26px-
animation是否开启动画
Boolean
--
duration动画时长
Number
1000-
value-from动画起始值
Number
--

Statistic 插槽 ​

prefix前缀内容--