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

组件概述

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组件提供以下核心方法处理数据展示逻辑：

1. dispose()：处理数值格式化，支持千分位分隔和精度控制
2. magnification()：实现数字按指定基数分组显示
3. countDown()：时间倒计时功能实现
4. formatTimeStr()：时间格式化处理
5. 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
  ];
  // 时间格式化处理逻辑...
}

样式定制

Statistic组件的样式定义遵循Element UI的主题系统，主要CSS类包括：

• .el-statistic：组件容器
• .el-statistic .head：标题区域
• .el-statistic .title：标题文本
• .el-statistic .con：数值内容区域
• .el-statistic .prefix：前缀
• .el-statistic .number：数值
• .el-statistic .suffix：后缀

可以通过覆盖这些类来自定义组件样式，或使用valueStyle属性直接设置数值样式。

注意事项

1. 当使用time-indices属性时，value应传入时间戳（毫秒）
2. precision属性仅对数字类型value有效
3. 组件销毁前会自动停止计时，避免内存泄漏
4. 使用group-separator时，建议同时设置rate属性控制分组基数

总结

Element UI的Statistic组件提供了灵活的数据展示解决方案，通过简单配置即可实现专业的数字统计展示效果。无论是常规数字、带单位的计量数据还是时间倒计时，Statistic组件都能满足各种数据可视化需求。其核心优势在于：

1. 丰富的格式化选项，支持数字和时间展示
2. 简洁的API设计，易于集成和使用
3. 灵活的样式定制能力
4. 优化的性能表现，避免不必要的计算

如需进一步扩展功能，可以通过插槽自定义内容展示，或结合其他Element UI组件构建更复杂的数据看板。