统计数值组件 (Statistic)

Element UI 的 Statistic 组件用于在界面中突出显示某个或某组重要的数字，如金额、排名、倒计时等。该组件支持自定义数值格式、前缀、后缀以及精度设置等，适用于多种场景。

提示

Statistic 组件官方文档：https://element.eleme.cn/#/zh-CN/component/statistic (opens new window)

1. 基本用法

基本语法：使用 <el-statistic> 标签创建一个统计数值展示区域，通过 value 属性设置要展示的数值内容，并通过 title 属性设置数值的标题。

<template>
  <el-statistic title="总销售额" :value="123456789" suffix="元"></el-statistic>
</template>

<script>
export default {
  // 组件逻辑可以在这里编写
};
</script>

• value 属性：设置数值内容，可以是字符串或数字。
• title 属性：设置统计数值的标题，通常用于说明该数值的含义。
• suffix 属性：设置数值的后缀，比如 "元"、"次" 等。
• 

2. Statistic 属性

参数	说明	类型	可选值	默认值
value	数值内容	string | number	—	—
decimal-separator	设置小数点	string	—	.
formatter	自定义数值展示	v-slot |({value}) => VNode	—	—
group-separator	设置千分位标识符	string	—	,
precision	数值精度	number	—	—
prefix	设置数值的前缀	string | v-slot	—	—
suffix	设置数值的后缀	string | v-slot	—	—
title	数值的标题	string | v-slot	—	—
value-style	设置数值的样式	object	—	—
rate	设置倍率	number	—	1000

• value：展示的核心数值内容，可以是任何需要高亮展示的数字。
• decimal-separator：自定义小数点符号，默认为 "."。
• formatter：自定义数值展示方式，支持插槽或函数形式。
• group-separator：设置千分位标识符，用于改善大数值的可读性，默认为 ","。
• precision：控制数值的精度，即小数点后的位数。
• prefix：为数值添加前缀，如货币符号 "¥"。
• suffix：为数值添加后缀，如单位 "元"。
• title：为数值添加标题，用于说明该数值的用途或含义。
• value-style：自定义数值的样式，传入一个样式对象。
• rate：设置数值的倍率，默认为 1000，用于控制数值展示的缩放。

3. Statistic 方法

方法名	说明	参数	回调参数
suspend	暂停倒计时	(value:boolean)	(value: Date)

通过调用 suspend 方法，你可以暂停倒计时，并在需要时恢复倒计时。

4. Statistic 插槽

Statistic 组件提供了多个插槽，用于自定义数值的展示样式和内容：

插槽名	说明
prefix	数值的前缀
suffix	数值的后缀
formatter	自定义数值内容
title	数值的标题

5. 插槽使用示例

自定义前缀和后缀

可以通过 prefix 和 suffix 插槽，自定义数值的前缀和后缀内容。

<template>
  <el-statistic title="总销售额" :value="123456789">
    <template #prefix>
      <span>¥</span>
    </template>
    <template #suffix>
      <span>元</span>
    </template>
  </el-statistic>
</template>

自定义数值格式

通过 formatter 插槽，使用函数或插槽内容自定义数值的格式展示。

<template>
  <el-statistic :value="value" title="年增长率">
    <template #formatter="{ value }">
      <span>{{ (value * 100).toFixed(2) }}%</span>
    </template>
  </el-statistic>
</template>

<script>
export default {
  data() {
    return {
      value: 0.235
    };
  }
};
</script>

6. Countdown 计时功能

Element UI 的 Statistic 组件不仅可以用于展示统计数值，还提供了强大的倒计时功能，通过 Countdown 组件来实现。这在很多场景中都非常实用，比如商品限时抢购、活动倒计时等。

Countdown 功能通过 Statistic 组件的 time-indices 属性来启用。value 属性需要设置为一个未来的时间点，倒计时就会从当前时间开始倒计时到这个时间点。

<template>
  <el-statistic
    :value="deadline"
    time-indices
    title="🎉商品降价🎉"
    format="HH:mm:ss"
    @finish="handleFinish"
  >
  </el-statistic>
</template>

• value 属性：指定一个未来的时间点作为倒计时的结束时间。
• format 属性：设置倒计时的显示格式，比如 HH:mm:ss 表示以小时:分钟:秒的格式显示。
• time-indices 属性：启用倒计时功能。
• @finish 事件：倒计时结束时触发，通常用于执行一些后续操作，如通知用户活动开始等。

Statistic.Countdown 属性

参数	说明	类型	可选值	默认值
time-indices	是否开启倒计时功能	boolean	true / false	false
value	倒计时的目标时间	string	—	—
format	格式化倒计时展示	string	—	'HH:mm:ss'

Statistic.Countdown 事件

事件名称	说明	回调参数
finish	倒计时完成时触发	(value: boolean)

1. 商品抢购倒计时

<template>
  <el-statistic
    :value="deadline"
    time-indices
    title="🎉商品降价🎉"
    format="HH:mm:ss"
    @finish="handleFinish"
  >
    <template #suffix>
      抢购即将开始
    </template>
  </el-statistic>
</template>

<script>
export default {
  data() {
    return {
      deadline: Date.now() + 1000 * 60 * 60 * 8, // 8小时后
    };
  },
  methods: {
    handleFinish() {
      this.$message.success("倒计时结束，活动开始！");
    },
  },
};
</script>

2. 动态添加倒计时时间

在倒计时过程中，可以动态添加时间。例如，在倒计时结束前点击按钮可以增加倒计时。

<template>
  <el-statistic
    :value="deadline"
    time-indices
    title="时间游戏"
    format="HH:mm:ss"
    @finish="handleFinish"
  >
    <template #suffix>
      <el-button type="primary" size="mini" @click="addTime">增加10秒</el-button>
    </template>
  </el-statistic>
</template>

<script>
export default {
  data() {
    return {
      deadline: Date.now() + 1000 * 60 * 30, // 30分钟
    };
  },
  methods: {
    handleFinish() {
      this.$message.success("时间已到");
    },
    addTime() {
      this.deadline += 1000 * 10; // 增加10秒
    },
  },
};
</script>

3. 自定义格式的倒计时

你可以使用 format 属性来自定义倒计时的显示格式，例如显示倒计时的天数、小时、分钟和秒。

<template>
  <el-statistic
    format="DD天HH小时mm分钟ss秒"
    :value="deadline"
    time-indices
    title="距离立冬还有："
  >
  </el-statistic>
</template>

<script>
export default {
  data() {
    return {
      deadline: new Date("2024-11-07").getTime(), // 指定未来时间
    };
  },
};
</script>

4. 倒计时暂停与继续

通过调用 suspend 方法，可以在倒计时过程中暂停或继续倒计时。

<template>
  <el-card shadow="hover" style="width: 100%;">
    <div slot="header" class="clearfix">
      <span>距离明日：</span>
      <el-button
        style="float: right; padding: 3px 0"
        type="text"
        @click="toggleCountdown"
      >
        {{ stop ? "继续" : "暂停" }}
      </el-button>
    </div>
    <el-statistic
      ref="statistic"
      format="HH:mm:ss"
      :value="deadline"
      title="距离明日："
      time-indices
      @finish="handleFinish"
    >
    </el-statistic>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      deadline: Date.now() + 1000 * 60 * 60 * 24, // 24小时倒计时
      stop: false,
    };
  },
  methods: {
    handleFinish() {
      this.$message.success("倒计时结束");
    },
    toggleCountdown() {
      this.$refs.statistic.suspend(this.stop);
      this.stop = !this.stop;
    },
  },
};
</script>

5. 统计数值组件常用示例

1. 基本的统计数值展示

<el-statistic title="总销售额" :value="123456789" suffix="元"></el-statistic>

2. 使用千分位分隔符和小数点

<el-statistic title="总利润" :value="123456789.567" group-separator="," decimal-separator="." precision="2" prefix="¥"></el-statistic>

3. 自定义数值展示格式

<el-statistic title="年增长率" :value="0.235">
  <template #formatter="{ value }">
    <span>{{ (value * 100).toFixed(2) }}%</span>
  </template>
</el-statistic>