el-statistic详解

el-statistic 是 Element Plus 框架中的统计组件，用于展示统计数据，如数字、进度条等。它常用于仪表盘、数据看板等场景。

el-statistic 属性详解

1. value:

   • 类型: Number | String
   • 用途: 统计数值。
   • 默认值: 0

2. title:

   • 类型: String
   • 用途: 统计标题。
   • 默认值: —

3. precision:

   • 类型: Number
   • 用途: 数值的小数位数。
   • 默认值: 0

4. group-separator:

   • 类型: String
   • 用途: 数字分隔符。
   • 默认值: ,

5. prefix:

   • 类型: String
   • 用途: 数值前缀。
   • 默认值: —

6. suffix:

   • 类型: String
   • 用途: 数值后缀。
   • 默认值: —

7. format:

   • 类型: Function
   • 用途: 自定义数值格式化函数。
   • 默认值: —

8. loading:

   • 类型: Boolean
   • 用途: 是否显示加载状态。
   • 默认值: false

9. value-style:

   • 类型: Object
   • 用途: 数值的样式。
   • 默认值: {}

el-statistic 插槽详解

1. title:

   • 插槽名称: title
   • 用途: 自定义标题内容。

2. prefix:

   • 插槽名称: prefix
   • 用途: 自定义数值前缀内容。

3. suffix:

   • 插槽名称: suffix
   • 用途: 自定义数值后缀内容。

完整示例代码

<template>
  <div>
    <h2>Statistic 统计组件示例</h2>

    <!-- 基本用法 -->
    <el-statistic title="总销售额" :value="123456789" />

    <!-- 自定义小数位数 -->
    <el-statistic title="平均价格" :value="1234.5678" :precision="2" />

    <!-- 自定义前缀和后缀 -->
    <el-statistic title="库存数量" :value="10000" prefix="库存:" suffix="件" />

    <!-- 自定义数值格式化 -->
    <el-statistic title="用户数" :value="123456" :formatter="formatValue" />

    <!-- 加载状态 -->
    <el-statistic title="订单数" :value="12345" :loading="true" />

    <!-- 自定义样式 -->
    <el-statistic title="总收入" :value="987654321" :value-style="{ color: 'red', fontSize: '24px' }" />
  </div>
</template>

代码解释

1. 基本用法:

   • 使用 el-statistic 组件并设置 title 和 value 属性。

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

2. 自定义小数位数:

   • 使用 precision 属性设置数值的小数位数。

   • 
     <el-statistic title="平均价格" :value="1234.5678" :precision="2" />
     

3. 自定义前缀和后缀:

   • 使用 prefix 和 suffix 属性设置数值的前缀和后缀。

   • <el-statistic title="库存数量" :value="10000" prefix="库存:" suffix="件" />
     

4. 自定义数值格式化:

   • 使用 formatter 属性设置数值格式化函数。

   • <el-statistic title="用户数" :value="123456" :formatter="formatValue" />
     

5. 加载状态:

   • 使用 loading 属性设置加载状态。

   • <el-statistic title="订单数" :value="12345" :loading="true" />
     

6. 自定义样式:

   • 使用 value-style 属性设置数值的样式。

   • <el-statistic title="总收入" :value="987654321" :value-style="{ color: 'red', fontSize: '24px' }" />
     

自定义数值格式化函数

• 定义 formatValue 函数，用于格式化数值。

  • const formatValue = (value) => {
      return `用户数: ${value.toLocaleString()}`
    }
    

自定义样式

• 自定义统计组件样式:

  • 使用 <style scoped> 自定义统计组件的样式。

  • .el-statistic {
      margin-bottom: 20px;
    }