Element UI统计数字：Statistic数据展示组件

2026-02-05 04:51:03作者：柏廷章Berta

组件概述

Statistic（统计数字）是Element UI提供的用于展示统计数据的功能型组件，通过动画过渡效果增强数据可视化表现力。该组件支持数字格式化、时间倒计时、自定义前缀后缀等功能，适用于数据看板、仪表盘等场景。组件源码位于packages/statistic/src/main.vue，注册名称为ElStatistic。

组件结构解析

模板结构

Statistic组件采用三层结构设计，包含标题区、数值区和辅助元素区：

<template>
  <div class="el-statistic">
    <div class="head" v-if="title||$slots.title">
      <slot name="title">
        <span class="title">{{ title }}</span>
      </slot>
    </div>
    <div class="con">
      <span class="prefix" v-if="prefix||$slots.prefix">
        <slot name="prefix">{{ prefix }}</slot>
      </span>
      <span class="number" :style="valueStyle">
        <slot name="formatter"> {{ disposeValue }}</slot>
      </span>
      <span class="suffix" v-if="suffix||$slots.suffix">
        <slot name="suffix">{{ suffix }}</slot>
      </span>
    </div>
  </div>
</template>

核心属性

属性名	类型	默认值	说明
value	[String, Number, Date]	''	数值内容
title	[String, Number]	''	标题文本
prefix	String	''	数值前缀
suffix	String	''	数值后缀
precision	Number	null	数值精度
groupSeparator	String	''	千分位分隔符
decimalSeparator	String	'.'	小数点分隔符
timeIndices	Boolean	false	是否启用时间模式
format	String	'HH:mm:ss:SSS'	时间格式
rate	Number	1000	数字分组基数
valueStyle	Object	{}	数值样式

功能方法

Statistic组件提供以下核心方法处理数据展示逻辑：

dispose()：处理数值格式化，支持千分位分隔和精度控制
magnification()：实现数字按指定基数分组显示
countDown()：时间倒计时功能实现
formatTimeStr()：时间格式化处理
suspend()：暂停/恢复计时功能

基础使用示例

标准数字展示

<el-statistic
  title="用户总数"
  :value="123456"
  :precision="0"
  group-separator=","
  suffix="人"
></el-statistic>

带前缀的统计数字

<el-statistic
  title="销售额"
  :value="9876543.21"
  :precision="2"
  prefix="¥"
  group-separator=","
></el-statistic>

时间倒计时功能

<el-statistic
  title="活动剩余时间"
  :value="new Date('2023-12-31 23:59:59').getTime()"
  time-indices
  format="DD天HH时mm分ss秒"
></el-statistic>

高级特性

自定义数值样式

通过valueStyle属性自定义数值显示样式：

<el-statistic
  title="今日成交量"
  :value="567"
  suffix="单"
  :value-style="{ color: '#409EFF', fontSize: '24px', fontWeight: 'bold' }"
></el-statistic>

插槽用法

使用插槽自定义标题和数值展示：

<el-statistic :value="89">
  <template slot="title">
    <span style="color: #67C23A;">完成率</span>
  </template>
  <template slot="formatter">
    <span style="color: #F56C6C;">{{ disposeValue }}%</span>
  </template>
</el-statistic>

组件源码解析

数值格式化实现

核心代码位于packages/statistic/src/main.vue的dispose()方法：

dispose() {
  let { value, rate, groupSeparator } = this;
  if (!isNumber(value)) return false;
  if (this.precision) {
    value = value.toFixed(this.precision);
  }
  let [integer, decimal] = String(value).split('.');
  // 1000 multiplying power
  if (groupSeparator) {
    integer = this.magnification(integer, rate, groupSeparator);
  }
  let result = `${integer}${decimal ? this.decimalSeparator + decimal : ''}`;
  this.disposeValue = result;
  return result;
}

数字分组算法

magnification()方法实现数字按指定基数分组：

magnification(num, mulriple = 1000, groupSeparator = ',') {
  // magnification factor
  const level = String(mulriple).length ;
  return num.replace(new RegExp(`(\\d)(?=(\\d{${level - 1}})+$)`, 'g'), `$1${groupSeparator}`);
}

时间格式化逻辑

formatTimeStr()方法处理时间格式转换：

formatTimeStr: function(time) {
  let {format} = this;
  const escapeRegex = /\[[^\]]*]/g;
  const keepList = (format.match(escapeRegex) || []).map(str => str.slice(1, -1));
  const timeUnits = [
    ['Y', 1000 * 60 * 60 * 24 * 365], // years
    ['M', 1000 * 60 * 60 * 24 * 30], // months
    ['D', 1000 * 60 * 60 * 24], // days
    ['H', 1000 * 60 * 60], // hours
    ['m', 1000 * 60], // minutes
    ['s', 1000], // seconds
    ['S', 1] // million seconds
  ];
  // 时间格式化处理逻辑...
}