Statistic 统计数值

展示统计数值。

何时使用

  • 当需要突出某个或某组数字时
  • 当需要展示带描述的统计类数据时使用

代码演示

Statistic 统计数值 - 图1

基本

简单展示

  1. <template>
  2. <div>
  3. <a-statistic title="Active Users" :value="112893" style="margin-right: 50px" />
  4. <a-statistic title="Account Balance (CNY)" :precision="2" :value="112893" />
  5. </div>
  6. </template>

Statistic 统计数值 - 图2

单位

通过前缀和后缀添加单位。

  1. <template>
  2. <a-row :gutter="16">
  3. <a-col :span="12">
  4. <a-statistic title="Feedback" :value="1128" style="margin-right: 50px">
  5. <template v-slot:suffix>
  6. <a-icon type="like" />
  7. </template>
  8. </a-statistic>
  9. </a-col>
  10. <a-col :span="12">
  11. <a-statistic title="Unmerged" :value="93" valueClass="demo-class">
  12. <template v-slot:suffix>
  13. <span> / 100</span>
  14. </template>
  15. </a-statistic>
  16. </a-col>
  17. </a-row>
  18. </template>

Statistic 统计数值 - 图3

在卡片中使用

在卡片中展示统计数值。

  1. <template>
  2. <div style="background: #ECECEC; padding: 30px">
  3. <a-row :gutter="16">
  4. <a-col :span="12">
  5. <a-card>
  6. <a-statistic
  7. title="Feedback"
  8. :value="11.28"
  9. :precision="2"
  10. suffix="%"
  11. :valueStyle="{color: '#3f8600'}"
  12. style="margin-right: 50px"
  13. >
  14. <template v-slot:prefix>
  15. <a-icon type="arrow-up" />
  16. </template>
  17. </a-statistic>
  18. </a-card>
  19. </a-col>
  20. <a-col :span="12">
  21. <a-card>
  22. <a-statistic
  23. title="Idle"
  24. :value="9.3"
  25. :precision="2"
  26. suffix="%"
  27. valueClass="demo-class"
  28. :valueStyle="{ color: '#cf1322' }"
  29. >
  30. <template v-slot:prefix>
  31. <a-icon type="arrow-down" />
  32. </template>
  33. </a-statistic>
  34. </a-card>
  35. </a-col>
  36. </a-row>
  37. </div>
  38. </template>

Statistic 统计数值 - 图4

倒计时

倒计时组件。

  1. <template>
  2. <a-row :gutter="16">
  3. <a-col :span="12">
  4. <a-statistic-countdown
  5. title="Countdown"
  6. :value="deadline"
  7. @finish="onFinish"
  8. style="margin-right: 50px"
  9. />
  10. </a-col>
  11. <a-col :span="12">
  12. <a-statistic-countdown
  13. title="Million Seconds"
  14. :value="deadline"
  15. format="HH:mm:ss:SSS"
  16. style="margin-right: 50px"
  17. />
  18. </a-col>
  19. <a-col :span="24" style="margin-top: 32px;">
  20. <a-statistic-countdown title="Day Level" :value="deadline" format="D 天 H 时 m 分 s 秒" />
  21. </a-col>
  22. </a-row>
  23. </template>
  24. <script>
  25. export default {
  26. data() {
  27. return {
  28. deadline: Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30,
  29. };
  30. },
  31. methods: {
  32. onFinish() {
  33. console.log('over');
  34. },
  35. },
  36. };
  37. </script>

API

Statistic

参数说明类型默认值
decimalSeparator设置小数点string.
formatter自定义数值展示v-slot | ({h, value}) => VNode-
groupSeparator设置千分位标识符string,
precision数值精度number-
prefix设置数值的前缀string | v-slot-
suffix设置数值的后缀string | v-slot-
title数值的标题string | v-slot-
value数值内容string | number-
valueStyle设置数值的样式style-

Statistic.Countdown

参数说明类型默认值
format格式化倒计时展示,参考 momentstring'HH:mm:ss'
prefix设置数值的前缀string | v-slot-
suffix设置数值的后缀string | v-slot-
title数值的标题string | v-slot-
value数值内容number | moment-
valueStyle设置数值的样式style-

Statistic.Countdown 事件

事件名称说明回调参数
finish倒计时完成时触发() => void