From 61ac2fe752f812e33aa9a07ae8fa1eca4d727c47 Mon Sep 17 00:00:00 2001
From: wzc520pyfm <69044080+wzc520pyfm@users.noreply.github.com>
Date: Tue, 26 Dec 2023 19:25:00 +0800
Subject: [PATCH] docs(components): [statistic] add transition example (#14959)

---
 docs/en-US/component/statistic.md |  2 +-
 docs/examples/statistic/basic.vue | 10 +++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/docs/en-US/component/statistic.md b/docs/en-US/component/statistic.md
index 910ffe6c9b..948001bfe7 100644
--- a/docs/en-US/component/statistic.md
+++ b/docs/en-US/component/statistic.md
@@ -9,7 +9,7 @@ Display statistics.
 
 ## Basic usage
 
-:::demo To highlight a number or a group of numbers, such as statistical value, amount, and ranking, you can add elements such as icon and unit before and after the number and title.
+:::demo To highlight a number or a group of numbers, such as statistical value, amount, and ranking, you can add elements such as icon and unit before and after the number and title. And use [vueuse](https://vueuse.org/core/useTransition/) to add animated transitions to value.
 
 statistic/basic
 
diff --git a/docs/examples/statistic/basic.vue b/docs/examples/statistic/basic.vue
index 1725114acc..6244612542 100644
--- a/docs/examples/statistic/basic.vue
+++ b/docs/examples/statistic/basic.vue
@@ -17,7 +17,7 @@
       </el-statistic>
     </el-col>
     <el-col :span="6">
-      <el-statistic title="Total Transactions" :value="172000" />
+      <el-statistic title="Total Transactions" :value="outputValue" />
     </el-col>
     <el-col :span="6">
       <el-statistic title="Feedback number" :value="562">
@@ -32,7 +32,15 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue'
+import { useTransition } from '@vueuse/core'
 import { ChatLineRound, Male } from '@element-plus/icons-vue'
+
+const source = ref(0)
+const outputValue = useTransition(source, {
+  duration: 1500,
+})
+source.value = 172000
 </script>
 
 <style scoped>