Statistic统计数值 - 图1

Statistic 统计数值

展示统计数值。

何时使用

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

代码演示

Statistic统计数值 - 图2

基本用法

简单展示

  1. <template>
  2. <a-row>
  3. <a-col :span="12">
  4. <a-statistic title="Active Users" :value="112893" style="margin-right: 50px" />
  5. </a-col>
  6. <a-col :span="12">
  7. <a-statistic title="Account Balance (CNY)" :precision="2" :value="112893" />
  8. </a-col>
  9. </a-row>
  10. </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. :value-style="{ color: '#3f8600' }"
  12. style="margin-right: 50px"
  13. >
  14. <template #prefix>
  15. <arrow-up-outlined />
  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. class="demo-class"
  28. :value-style="{ color: '#cf1322' }"
  29. >
  30. <template #prefix>
  31. <arrow-down-outlined />
  32. </template>
  33. </a-statistic>
  34. </a-card>
  35. </a-col>
  36. </a-row>
  37. </div>
  38. </template>
  39. <script lang="ts">
  40. import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons-vue';
  41. import { defineComponent } from 'vue';
  42. export default defineComponent({
  43. components: {
  44. ArrowUpOutlined,
  45. ArrowDownOutlined,
  46. },
  47. });
  48. </script>

Statistic统计数值 - 图4

单位

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

  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 #suffix>
  6. <like-outlined />
  7. </template>
  8. </a-statistic>
  9. </a-col>
  10. <a-col :span="12">
  11. <a-statistic title="Unmerged" :value="93" class="demo-class">
  12. <template #suffix>
  13. <span>/ 100</span>
  14. </template>
  15. </a-statistic>
  16. </a-col>
  17. </a-row>
  18. </template>
  19. <script lang="ts">
  20. import { LikeOutlined } from '@ant-design/icons-vue';
  21. import { defineComponent } from 'vue';
  22. export default defineComponent({
  23. components: {
  24. LikeOutlined,
  25. },
  26. });
  27. </script>

Statistic统计数值 - 图5

倒计时

倒计时组件。

  1. <template>
  2. <a-row :gutter="16">
  3. <a-col :span="12">
  4. <a-statistic-countdown
  5. title="Countdown"
  6. :value="deadline"
  7. style="margin-right: 50px"
  8. @finish="onFinish"
  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 lang="ts">
  25. import { defineComponent } from 'vue';
  26. export default defineComponent({
  27. setup() {
  28. const onFinish = () => {
  29. console.log('finished!');
  30. };
  31. return {
  32. deadline: Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30,
  33. onFinish,
  34. };
  35. },
  36. });
  37. </script>

API

Statistic

参数说明类型默认值
decimalSeparator设置小数点string.
formatter自定义数值展示v-slot | ({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