From 68e8c86d4048390370cdf2621a732b2f38a03fef Mon Sep 17 00:00:00 2001
From: yang <30883395+webvs2@users.noreply.github.com>
Date: Mon, 14 Aug 2023 17:59:47 +0800
Subject: [PATCH] Statistic :fix doc; Optimized  code; (#22384)

* [statistic]: doc conflict modification

* [statistic]:doc Modify text

* [statistic]:Optimized code
---
 examples/docs/en-US/statistic.md | 102 ++++++++++++++++++++++--------
 examples/docs/es/statistic.md    | 105 ++++++++++++++++++++++---------
 examples/docs/fr-FR/statistic.md | 102 ++++++++++++++++++++++--------
 examples/docs/zh-CN/statistic.md | 101 ++++++++++++++++++++++-------
 examples/nav.config.json         |  24 +++----
 packages/statistic/src/main.vue  |  47 +++++++-------
 6 files changed, 338 insertions(+), 143 deletions(-)

diff --git a/examples/docs/en-US/statistic.md b/examples/docs/en-US/statistic.md
index 1d25019a2..11e25af62 100644
--- a/examples/docs/en-US/statistic.md
+++ b/examples/docs/en-US/statistic.md
@@ -8,25 +8,39 @@ Countdown mode
 
 The component provides a thousandth place display, but you can use rate to set the 10,000th place, and so on
 :::demo
+
 ```html
 <template>
   <div>
     <el-row :gutter="20">
       <el-col :span="6">
         <div>
-          <el-statistic group-separator="," :precision="2" :value="value2" :title="title"></el-statistic>
+          <el-statistic
+            group-separator=","
+            :precision="2"
+            :value="value2"
+            :title="title"
+          ></el-statistic>
         </div>
       </el-col>
       <el-col :span="6">
         <div>
           <el-statistic title="Gender Distribution">
-            <template slot="formatter"> 456/2 </template>
+            <template slot="formatter">
+              456/2
+            </template>
           </el-statistic>
         </div>
       </el-col>
       <el-col :span="6">
         <div>
-          <el-statistic group-separator="," :precision="2" decimal-separator="." :value="value1" :title="title">
+          <el-statistic
+            group-separator=","
+            :precision="2"
+            decimal-separator="."
+            :value="value1"
+            :title="title"
+          >
             <template slot="prefix">
               <i class="el-icon-s-flag" style="color: red"></i>
             </template>
@@ -41,7 +55,11 @@ The component provides a thousandth place display, but you can use rate to set t
           <el-statistic :value="like ? 521 : 520" title="Feedback">
             <template slot="suffix">
               <span @click="like = !like" class="like">
-                <i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
+                <i
+                  class="el-icon-star-on"
+                  style="color:red"
+                  v-show="!!like"
+                ></i>
                 <i class="el-icon-star-off" v-show="!like"></i>
               </span>
             </template>
@@ -59,7 +77,7 @@ The component provides a thousandth place display, but you can use rate to set t
         like: true,
         value1: 4154.564,
         value2: 2222,
-        title: 'Growth this year',
+        title: "Growth this year",
       };
     },
   };
@@ -75,7 +93,7 @@ The component provides a thousandth place display, but you can use rate to set t
 
 :::
 
-### 倒计时
+### Count down
 
 :::warning
 Suspend is tentative, it ** just pauses the countdown, not the time, because value points to a future time node **
@@ -83,34 +101,62 @@ Suspend is tentative, it ** just pauses the countdown, not the time, because val
 If you need to add time to the original, please note that the overall time (the amount of time added and the original time) must be a ** future ** time node, otherwise it is still the end of the countdown
 :::
 :::demo Providing a future time via 'value' will enable the countdown function
+
 ```html
 <template>
   <div>
     <el-row :gutter="20">
       <el-col :span="14">
-        <div style="width: 100%; display: inline-block; ">
-          <el-statistic :value="deadline2" time-indices title="商品降价">
-            <template slot="suffix"> The rush is about to begin </template>
-          </el-statistic>
-        </div>
-        <div style="width: 100%; display: inline-block; margin-top: 50px; ">
-          <el-statistic @finish="hilarity" :value="deadline3" time-indices title="The Value of Time">
-            <template slot="suffix">
-              <el-button type="primary " size="small" @click="add">add 10 second</el-button>
-            </template>
-          </el-statistic>
-        </div>
+        <el-card shadow="hover" style="width: 100%; ">
+          <div style="width: 100%; display: inline-block; ">
+            <el-statistic
+              :value="deadline2"
+              time-indices
+              title="🎉Price reduction of goods🎉"
+            >
+              <template slot="suffix">
+               panic purchase
+              </template>
+            </el-statistic>
+          </div>
+        </el-card>
+        <el-card shadow="hover" style="width: 100%;margin-top: 20px; ">
+          <div style="width: 100%; display: inline-block;">
+            <el-statistic
+              @finish="hilarity"
+              :value="deadline3"
+              time-indices
+              title="The Value of Time"
+            >
+              <template slot="suffix">
+                <el-button type="primary " size="small" @click="add"
+                  >add 10s</el-button
+                >
+              </template>
+            </el-statistic>
+          </div>
+        </el-card>
       </el-col>
       <el-col :span="10">
         <el-card shadow="hover" style="width: 100%;">
           <div slot="header" class="clearfix">
-            <span>文嘉《明日歌》</span>
-            <el-button style="float: right; padding: 3px 0" type="text" @click="clickFn">暂停</el-button>
+            <span style="font-size: 14px;">Henry·Wadsworth·Longfellow</span>
+            <el-button
+              style="float: right; padding: 3px 0"
+              type="text"
+              @click="clickFn"
+              >suspend</el-button
+            >
+          </div>
+          <div style="font-size: 16px;text-align: left;">
+            Don't sigh in the past, it is no longer back
+          </div>
+          <div style="font-size: 16px;text-align: left;margin-top: 15px;">
+            Be wise to improve the present
+          </div>
+          <div style="font-size: 16px;text-align: left;margin-top: 15px;">
+            To not worry not afraid of the firm will into the complicated future
           </div>
-          <div style="font-size: 18px;text-align: center; ">明日复明日</div>
-          <div style="font-size: 18px;text-align: center;">明日何其多</div>
-          <div style="font-size: 18px;text-align: center;">我生待明日</div>
-          <div style="font-size: 18px;text-align: center;">万事成蹉跎</div>
           <div style="margin-top: 40px;"></div>
           <el-statistic
             ref="statistic"
@@ -140,8 +186,9 @@ If you need to add time to the original, please note that the overall time (the
     methods: {
       hilarity() {
         this.$notify({
-          title: 'Prompt',
-          message: "Time is up, do you know that an inch of gold can't buy an inch of time?",
+          title: "Prompt",
+          message:
+            "Time is up, do you know that an inch of gold can't buy an inch of time?",
           duration: 0,
         });
       },
@@ -156,6 +203,7 @@ If you need to add time to the original, please note that the overall time (the
   };
 </script>
 ```
+
 :::
 
 ### Statistic Attributes
@@ -166,7 +214,7 @@ If you need to add time to the original, please note that the overall time (the
 | decimal-separator | Setting the decimal point      | string                      | -               | .       |
 | formatter         | Custom numerical presentation  | v-slot \|({value}) => VNode | -               | -       |
 | group-separator   | Sets the thousandth identifier | string                      | -               | ,       |
-| precision         | numerical precision            | number                      | -               | 0       |
+| precision         | numerical precision            | number                      | -               | -       |
 | prefix            | Sets the prefix of a number    | string \| v-slot            | -               | -       |
 | suffix            | Sets the suffix of a number    | string \| v-slot            | -               | -       |
 | title             | Numeric titles                 | string \| v-slot            | -               | -       |
diff --git a/examples/docs/es/statistic.md b/examples/docs/es/statistic.md
index 07be86f99..4e5962a98 100644
--- a/examples/docs/es/statistic.md
+++ b/examples/docs/es/statistic.md
@@ -8,25 +8,39 @@ Countdown mode
 
 The component provides a thousandth place display, but you can use rate to set the 10,000th place, and so on
 :::demo
+
 ```html
 <template>
   <div>
     <el-row :gutter="20">
       <el-col :span="6">
         <div>
-          <el-statistic group-separator="," :precision="2" :value="value2" :title="title"></el-statistic>
+          <el-statistic
+            group-separator=","
+            :precision="2"
+            :value="value2"
+            :title="title"
+          ></el-statistic>
         </div>
       </el-col>
       <el-col :span="6">
         <div>
           <el-statistic title="Gender Distribution">
-            <template slot="formatter"> 456/2 </template>
+            <template slot="formatter">
+              456/2
+            </template>
           </el-statistic>
         </div>
       </el-col>
       <el-col :span="6">
         <div>
-          <el-statistic group-separator="," :precision="2" decimal-separator="." :value="value1" :title="title">
+          <el-statistic
+            group-separator=","
+            :precision="2"
+            decimal-separator="."
+            :value="value1"
+            :title="title"
+          >
             <template slot="prefix">
               <i class="el-icon-s-flag" style="color: red"></i>
             </template>
@@ -41,7 +55,11 @@ The component provides a thousandth place display, but you can use rate to set t
           <el-statistic :value="like ? 521 : 520" title="Feedback">
             <template slot="suffix">
               <span @click="like = !like" class="like">
-                <i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
+                <i
+                  class="el-icon-star-on"
+                  style="color:red"
+                  v-show="!!like"
+                ></i>
                 <i class="el-icon-star-off" v-show="!like"></i>
               </span>
             </template>
@@ -59,7 +77,7 @@ The component provides a thousandth place display, but you can use rate to set t
         like: true,
         value1: 4154.564,
         value2: 2222,
-        title: 'Growth this year',
+        title: "Growth this year",
       };
     },
   };
@@ -72,44 +90,73 @@ The component provides a thousandth place display, but you can use rate to set t
   }
 </style>
 ```
+
 :::
 
-### 倒计时
+### Count down
 
 :::warning
 Suspend is tentative, it ** just pauses the countdown, not the time, because value points to a future time node **
 
-If you need to add time to the original, please note that the overall time (the amount of time added and the original time) must be a ** future ** time node, otherwise it is still the end of the countdown
+If you need to add time to the original, please note that the overall time (the amount of time added and the original time) must be a **future** time node, otherwise it is still the end of the countdown
 :::
 :::demo Providing a future time via 'value' will enable the countdown function
+
 ```html
 <template>
   <div>
     <el-row :gutter="20">
       <el-col :span="14">
-        <div style="width: 100%; display: inline-block; ">
-          <el-statistic :value="deadline2" time-indices title="商品降价">
-            <template slot="suffix"> The rush is about to begin </template>
-          </el-statistic>
-        </div>
-        <div style="width: 100%; display: inline-block; margin-top: 50px; ">
-          <el-statistic @finish="hilarity" :value="deadline3" time-indices title="The Value of Time">
-            <template slot="suffix">
-              <el-button type="primary " size="small" @click="add">add 10 second</el-button>
-            </template>
-          </el-statistic>
-        </div>
+        <el-card shadow="hover" style="width: 100%; ">
+          <div style="width: 100%; display: inline-block; ">
+            <el-statistic
+              :value="deadline2"
+              time-indices
+              title="🎉Price reduction of goods🎉"
+            >
+              <template slot="suffix">
+                panic purchase
+              </template>
+            </el-statistic>
+          </div>
+        </el-card>
+        <el-card shadow="hover" style="width: 100%;margin-top: 20px; ">
+          <div style="width: 100%; display: inline-block;">
+            <el-statistic
+              @finish="hilarity"
+              :value="deadline3"
+              time-indices
+              title="The Value of Time"
+            >
+              <template slot="suffix">
+                <el-button type="primary " size="small" @click="add"
+                  >add 10s</el-button
+                >
+              </template>
+            </el-statistic>
+          </div>
+        </el-card>
       </el-col>
       <el-col :span="10">
         <el-card shadow="hover" style="width: 100%;">
           <div slot="header" class="clearfix">
-            <span>文嘉《明日歌》</span>
-            <el-button style="float: right; padding: 3px 0" type="text" @click="clickFn">暂停</el-button>
+            <span style="font-size: 14px;">Henry·Wadsworth·Longfellow</span>
+            <el-button
+              style="float: right; padding: 3px 0"
+              type="text"
+              @click="clickFn"
+              >suspend</el-button
+            >
+          </div>
+          <div style="font-size: 16px;text-align: left;">
+            Don't sigh in the past, it is no longer back
+          </div>
+          <div style="font-size: 16px;text-align: left;margin-top: 15px;">
+            Be wise to improve the present
+          </div>
+          <div style="font-size: 16px;text-align: left;margin-top: 15px;">
+            To not worry not afraid of the firm will into the complicated future
           </div>
-          <div style="font-size: 18px;text-align: center; ">明日复明日</div>
-          <div style="font-size: 18px;text-align: center;">明日何其多</div>
-          <div style="font-size: 18px;text-align: center;">我生待明日</div>
-          <div style="font-size: 18px;text-align: center;">万事成蹉跎</div>
           <div style="margin-top: 40px;"></div>
           <el-statistic
             ref="statistic"
@@ -139,8 +186,9 @@ If you need to add time to the original, please note that the overall time (the
     methods: {
       hilarity() {
         this.$notify({
-          title: 'Prompt',
-          message: "Time is up, do you know that an inch of gold can't buy an inch of time?",
+          title: "Prompt",
+          message:
+            "Time is up, do you know that an inch of gold can't buy an inch of time?",
           duration: 0,
         });
       },
@@ -155,6 +203,7 @@ If you need to add time to the original, please note that the overall time (the
   };
 </script>
 ```
+
 :::
 
 ### Statistic Attributes
@@ -165,7 +214,7 @@ If you need to add time to the original, please note that the overall time (the
 | decimal-separator | Setting the decimal point      | string                      | -               | .       |
 | formatter         | Custom numerical presentation  | v-slot \|({value}) => VNode | -               | -       |
 | group-separator   | Sets the thousandth identifier | string                      | -               | ,       |
-| precision         | numerical precision            | number                      | -               | 0       |
+| precision         | numerical precision            | number                      | -               | -       |
 | prefix            | Sets the prefix of a number    | string \| v-slot            | -               | -       |
 | suffix            | Sets the suffix of a number    | string \| v-slot            | -               | -       |
 | title             | Numeric titles                 | string \| v-slot            | -               | -       |
diff --git a/examples/docs/fr-FR/statistic.md b/examples/docs/fr-FR/statistic.md
index 1d25019a2..4f2f06c09 100644
--- a/examples/docs/fr-FR/statistic.md
+++ b/examples/docs/fr-FR/statistic.md
@@ -8,25 +8,39 @@ Countdown mode
 
 The component provides a thousandth place display, but you can use rate to set the 10,000th place, and so on
 :::demo
+
 ```html
 <template>
   <div>
     <el-row :gutter="20">
       <el-col :span="6">
         <div>
-          <el-statistic group-separator="," :precision="2" :value="value2" :title="title"></el-statistic>
+          <el-statistic
+            group-separator=","
+            :precision="2"
+            :value="value2"
+            :title="title"
+          ></el-statistic>
         </div>
       </el-col>
       <el-col :span="6">
         <div>
           <el-statistic title="Gender Distribution">
-            <template slot="formatter"> 456/2 </template>
+            <template slot="formatter">
+              456/2
+            </template>
           </el-statistic>
         </div>
       </el-col>
       <el-col :span="6">
         <div>
-          <el-statistic group-separator="," :precision="2" decimal-separator="." :value="value1" :title="title">
+          <el-statistic
+            group-separator=","
+            :precision="2"
+            decimal-separator="."
+            :value="value1"
+            :title="title"
+          >
             <template slot="prefix">
               <i class="el-icon-s-flag" style="color: red"></i>
             </template>
@@ -41,7 +55,11 @@ The component provides a thousandth place display, but you can use rate to set t
           <el-statistic :value="like ? 521 : 520" title="Feedback">
             <template slot="suffix">
               <span @click="like = !like" class="like">
-                <i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
+                <i
+                  class="el-icon-star-on"
+                  style="color:red"
+                  v-show="!!like"
+                ></i>
                 <i class="el-icon-star-off" v-show="!like"></i>
               </span>
             </template>
@@ -59,7 +77,7 @@ The component provides a thousandth place display, but you can use rate to set t
         like: true,
         value1: 4154.564,
         value2: 2222,
-        title: 'Growth this year',
+        title: "Growth this year",
       };
     },
   };
@@ -75,7 +93,7 @@ The component provides a thousandth place display, but you can use rate to set t
 
 :::
 
-### 倒计时
+### Count down
 
 :::warning
 Suspend is tentative, it ** just pauses the countdown, not the time, because value points to a future time node **
@@ -83,34 +101,62 @@ Suspend is tentative, it ** just pauses the countdown, not the time, because val
 If you need to add time to the original, please note that the overall time (the amount of time added and the original time) must be a ** future ** time node, otherwise it is still the end of the countdown
 :::
 :::demo Providing a future time via 'value' will enable the countdown function
+
 ```html
 <template>
   <div>
     <el-row :gutter="20">
       <el-col :span="14">
-        <div style="width: 100%; display: inline-block; ">
-          <el-statistic :value="deadline2" time-indices title="商品降价">
-            <template slot="suffix"> The rush is about to begin </template>
-          </el-statistic>
-        </div>
-        <div style="width: 100%; display: inline-block; margin-top: 50px; ">
-          <el-statistic @finish="hilarity" :value="deadline3" time-indices title="The Value of Time">
-            <template slot="suffix">
-              <el-button type="primary " size="small" @click="add">add 10 second</el-button>
-            </template>
-          </el-statistic>
-        </div>
+        <el-card shadow="hover" style="width: 100%; ">
+          <div style="width: 100%; display: inline-block; ">
+            <el-statistic
+              :value="deadline2"
+              time-indices
+              title="🎉Price reduction of goods🎉"
+            >
+              <template slot="suffix">
+                panic purchase
+              </template>
+            </el-statistic>
+          </div>
+        </el-card>
+        <el-card shadow="hover" style="width: 100%;margin-top: 20px; ">
+          <div style="width: 100%; display: inline-block;">
+            <el-statistic
+              @finish="hilarity"
+              :value="deadline3"
+              time-indices
+              title="The Value of Time"
+            >
+              <template slot="suffix">
+                <el-button type="primary " size="small" @click="add"
+                  >add 10s</el-button
+                >
+              </template>
+            </el-statistic>
+          </div>
+        </el-card>
       </el-col>
       <el-col :span="10">
         <el-card shadow="hover" style="width: 100%;">
           <div slot="header" class="clearfix">
-            <span>文嘉《明日歌》</span>
-            <el-button style="float: right; padding: 3px 0" type="text" @click="clickFn">暂停</el-button>
+            <span style="font-size: 14px;">Henry·Wadsworth·Longfellow</span>
+            <el-button
+              style="float: right; padding: 3px 0"
+              type="text"
+              @click="clickFn"
+              >suspend</el-button
+            >
+          </div>
+          <div style="font-size: 16px;text-align: left;">
+            Don't sigh in the past, it is no longer back
+          </div>
+          <div style="font-size: 16px;text-align: left;margin-top: 15px;">
+            Be wise to improve the present
+          </div>
+          <div style="font-size: 16px;text-align: left;margin-top: 15px;">
+            To not worry not afraid of the firm will into the complicated future
           </div>
-          <div style="font-size: 18px;text-align: center; ">明日复明日</div>
-          <div style="font-size: 18px;text-align: center;">明日何其多</div>
-          <div style="font-size: 18px;text-align: center;">我生待明日</div>
-          <div style="font-size: 18px;text-align: center;">万事成蹉跎</div>
           <div style="margin-top: 40px;"></div>
           <el-statistic
             ref="statistic"
@@ -140,8 +186,9 @@ If you need to add time to the original, please note that the overall time (the
     methods: {
       hilarity() {
         this.$notify({
-          title: 'Prompt',
-          message: "Time is up, do you know that an inch of gold can't buy an inch of time?",
+          title: "Prompt",
+          message:
+            "Time is up, do you know that an inch of gold can't buy an inch of time?",
           duration: 0,
         });
       },
@@ -156,6 +203,7 @@ If you need to add time to the original, please note that the overall time (the
   };
 </script>
 ```
+
 :::
 
 ### Statistic Attributes
@@ -166,7 +214,7 @@ If you need to add time to the original, please note that the overall time (the
 | decimal-separator | Setting the decimal point      | string                      | -               | .       |
 | formatter         | Custom numerical presentation  | v-slot \|({value}) => VNode | -               | -       |
 | group-separator   | Sets the thousandth identifier | string                      | -               | ,       |
-| precision         | numerical precision            | number                      | -               | 0       |
+| precision         | numerical precision            | number                      | -               | -       |
 | prefix            | Sets the prefix of a number    | string \| v-slot            | -               | -       |
 | suffix            | Sets the suffix of a number    | string \| v-slot            | -               | -       |
 | title             | Numeric titles                 | string \| v-slot            | -               | -       |
diff --git a/examples/docs/zh-CN/statistic.md b/examples/docs/zh-CN/statistic.md
index b1feb0c49..f3a495a55 100644
--- a/examples/docs/zh-CN/statistic.md
+++ b/examples/docs/zh-CN/statistic.md
@@ -8,25 +8,39 @@
 
 组件提供千分位的展示，不过可以通过 rate 来设置相应万分位等
 :::demo
+
 ```html
 <template>
   <div>
     <el-row :gutter="20">
       <el-col :span="6">
         <div>
-          <el-statistic group-separator="," :precision="2" :value="value2" :title="title"></el-statistic>
+          <el-statistic
+            group-separator=","
+            :precision="2"
+            :value="value2"
+            :title="title"
+          ></el-statistic>
         </div>
       </el-col>
       <el-col :span="6">
         <div>
           <el-statistic title="男女比">
-            <template slot="formatter"> 456/2 </template>
+            <template slot="formatter">
+              456/2
+            </template>
           </el-statistic>
         </div>
       </el-col>
       <el-col :span="6">
         <div>
-          <el-statistic group-separator="," :precision="2" decimal-separator="." :value="value1" :title="title">
+          <el-statistic
+            group-separator=","
+            :precision="2"
+            decimal-separator="."
+            :value="value1"
+            :title="title"
+          >
             <template slot="prefix">
               <i class="el-icon-s-flag" style="color: red"></i>
             </template>
@@ -41,7 +55,11 @@
           <el-statistic :value="like ? 521 : 520" title="Feedback">
             <template slot="suffix">
               <span @click="like = !like" class="like">
-                <i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
+                <i
+                  class="el-icon-star-on"
+                  style="color:red"
+                  v-show="!!like"
+                ></i>
                 <i class="el-icon-star-off" v-show="!like"></i>
               </span>
             </template>
@@ -58,8 +76,8 @@
       return {
         like: true,
         value1: 4154.564,
-        value2: 2222,
-        title: '今年的增长',
+        value2: 1314,
+        title: "增长人数",
       };
     },
   };
@@ -72,6 +90,7 @@
   }
 </style>
 ```
+
 :::
 
 ### 倒计时
@@ -80,35 +99,67 @@
 如果需要在原基础上添加时间，请注意：整体的时间（添加的时间量和原定时间）必须是**未来**的时间节点，否则依旧是倒计时结束
 :::
 :::demo 通过 `value` 提供未来的时间，将开启倒计时功能
+
 ```html
 <template>
   <div>
     <el-row :gutter="20">
       <el-col :span="14">
-        <div style="width: 100%; display: inline-block; ">
-          <el-statistic :value="deadline2" time-indices title="商品降价">
-            <template slot="suffix"> 抢购即将开始 </template>
-          </el-statistic>
-        </div>
-        <div style="width: 100%; display: inline-block; margin-top: 50px; ">
-          <el-statistic @finish="hilarity" :value="deadline3" time-indices title="添加时间">
-            <template slot="suffix">
-              <el-button type="primary " size="small" @click="add">add 10 second</el-button>
-            </template>
-          </el-statistic>
-        </div>
+        <el-card shadow="hover" style="width: 100%;">
+          <div style="width: 100%; display: inline-block; ">
+            <el-statistic :value="deadline2" time-indices title="🎉商品降价🎉">
+              <template slot="suffix">
+                抢购即将开始
+              </template>
+            </el-statistic>
+          </div>
+        </el-card>
+        <el-card shadow="hover" style="width: 100%;margin-top: 20px; ">
+          <div style="width: 100%; display: inline-block; ">
+            <el-statistic
+              @finish="hilarity"
+              :value="deadline3"
+              time-indices
+              title="时间游戏"
+            >
+              <template slot="suffix">
+                <el-button type="primary " size="mini" @click="add"
+                  >add 10s</el-button
+                >
+              </template>
+            </el-statistic>
+          </div>
+        </el-card>
+        <el-card shadow="hover" style="width: 100%;margin-top: 20px; ">
+          <div style="width: 100%; display: inline-block;">
+            <el-statistic
+              format="DD天HH小时mm分钟"
+              :value="deadline5"
+              time-indices
+              title="🚩距离立夏还有："
+            >
+            </el-statistic>
+          </div>
+        </el-card>
       </el-col>
       <el-col :span="10">
         <el-card shadow="hover" style="width: 100%;">
           <div slot="header" class="clearfix">
             <span>文嘉《明日歌》</span>
-            <el-button style="float: right; padding: 3px 0" type="text" @click="clickFn">暂停</el-button>
+            <el-button
+              style="float: right; padding: 3px 0"
+              type="text"
+              @click="clickFn"
+              >暂停</el-button
+            >
+          </div>
+          <div style="font-size: 18px;text-align: center; margin-top: 35px;">
+            明日复明日
           </div>
-          <div style="font-size: 18px;text-align: center; ">明日复明日</div>
           <div style="font-size: 18px;text-align: center;">明日何其多</div>
           <div style="font-size: 18px;text-align: center;">我生待明日</div>
           <div style="font-size: 18px;text-align: center;">万事成蹉跎</div>
-          <div style="margin-top: 40px;"></div>
+          <div style="margin-top: 35px;"></div>
           <el-statistic
             ref="statistic"
             @finish="hilarity"
@@ -131,14 +182,15 @@
         deadline2: Date.now() + 1000 * 60 * 60 * 8,
         deadline3: Date.now() + 1000 * 60 * 30,
         deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),
+        deadline5: new Date("2023-05-06"),
         stop: true,
       };
     },
     methods: {
       hilarity() {
         this.$notify({
-          title: '提示',
-          message: '时间已到，你可知寸金难买寸光阴？',
+          title: "提示",
+          message: "时间已到",
           duration: 0,
         });
       },
@@ -153,6 +205,7 @@
   };
 </script>
 ```
+
 :::
 
 ### Statistic Attributes
@@ -163,7 +216,7 @@
 | decimal-separator | 设置小数点       | string                      | —      | .      |
 | formatter         | 自定义数值展示   | v-slot \|({value}) => VNode | —      | —      |
 | group-separator   | 设置千分位标识符 | string                      | —      | ,      |
-| precision         | 数值精度         | number                      | —      | 0      |
+| precision         | 数值精度         | number                      | —      | —      |
 | prefix            | 设置数值的前缀   | string \| v-slot            | —      | —      |
 | suffix            | 设置数值的后缀   | string \| v-slot            | —      | —      |
 | title             | 数值的标题       | string \| v-slot            | —      | —      |
diff --git a/examples/nav.config.json b/examples/nav.config.json
index f648024cd..bd42684a5 100644
--- a/examples/nav.config.json
+++ b/examples/nav.config.json
@@ -506,6 +506,10 @@
             {
               "path": "/result",
               "title": "Result"
+            },
+            {
+              "path": "/statistic",
+              "title": "Statistic"
             }
           ]
         },
@@ -625,10 +629,6 @@
             {
               "path": "/drawer",
               "title": "Drawer"
-            },
-            {
-              "path": "/statistic",
-              "title": "Statistic"
             }
           ]
         }
@@ -824,6 +824,10 @@
             {
               "path": "/result",
               "title": "Result"
+            },
+            {
+              "path": "/statistic",
+              "title": "Statistic"
             }
           ]
         },
@@ -943,10 +947,6 @@
             {
               "path": "/drawer",
               "title": "Drawer"
-            },
-            {
-              "path": "/statistic",
-              "title": "Statistic"
             }
           ]
         }
@@ -1142,6 +1142,10 @@
             {
               "path": "/result",
               "title": "Result"
+            },
+            {
+              "path": "/statistic",
+              "title": "Statistic"
             }
           ]
         },
@@ -1261,10 +1265,6 @@
             {
               "path": "/drawer",
               "title": "Drawer"
-            },
-            {
-              "path": "/statistic",
-              "title": "Statistic"
             }
           ]
         }
diff --git a/packages/statistic/src/main.vue b/packages/statistic/src/main.vue
index f8e0691b9..25525b744 100644
--- a/packages/statistic/src/main.vue
+++ b/packages/statistic/src/main.vue
@@ -50,7 +50,7 @@ export default {
       default: null
     },
     value: {
-      type: [String, Number],
+      type: [String, Number, Date],
       default: ''
     },
     prefix: {
@@ -90,43 +90,40 @@ export default {
   watch: {
     value: function() {
       this.branch();
+    },
+    groupSeparator() {
+      this.dispose();
+    },
+    mulriple() {
+      this.dispose();
     }
   },
   methods: {
     branch() {
       let { timeIndices, countDown, dispose} = this;
-      timeIndices ? countDown() : dispose();
+      if (timeIndices) {
+        countDown(this.value.valueOf() || this.value);
+      } else {
+        dispose();
+      }
     },
     magnification(num, mulriple = 1000, groupSeparator = ',') {
       // magnification factor
-      const level = String(mulriple).length - 1;
-      const reg = new RegExp(`\\d{1,${level}}(?=(\\d{${level}})+$)`, 'g');
-      const result = String(num)
-        .replace(reg, '$&,')
-        .split(',')
-        .join(groupSeparator);
-      return result;
+      const level = String(mulriple).length ;
+      return num.replace(new RegExp(`(\\d)(?=(\\d{${level - 1}})+$)`, 'g'), `$1${groupSeparator}`);
     },
     dispose() {
-      let { value, precision, groupSeparator, rate } = this;
+      let { value, rate, groupSeparator } = this;
       if (!isNumber(value)) return false;
-      let [integer, decimal] = String(value).split('.');
-      if (precision) {
-        decimal = `${decimal || ''}${(1)
-          .toFixed(precision)
-          .replace('.', '')
-          .slice(1)}`;
-        decimal = decimal.slice(0, precision);
+      if (this.precision) {
+        value = value.toFixed(this.precision);
       }
-      let result = 0;
+      let [integer, decimal] = String(value).split('.');
       // 1000 multiplying power
       if (groupSeparator) {
         integer = this.magnification(integer, rate, groupSeparator);
       }
-
-      result = [integer, decimal].join(
-        decimal ? this.decimalSeparator : ''
-      );
+      let result = `${integer}${decimal ? this.decimalSeparator + decimal : ''}`;
       this.disposeValue = result;
       return result;
     },
@@ -188,12 +185,12 @@ export default {
       }
       return result;
     },
-    countDown() {
-      let {REFRESH_INTERVAL, timeTask, diffDate, formatTimeStr, stopTime, suspend} = this;
+    countDown(timeVlaue) {
+      let {REFRESH_INTERVAL, timeTask, diffDate, formatTimeStr, stopTime, suspend } = this;
       if (timeTask) return;
       let than = this;
       this.timeTask = setInterval(()=> {
-        let diffTiem = diffDate(than.value, Date.now());
+        let diffTiem = diffDate(timeVlaue, Date.now());
         than.disposeValue = formatTimeStr(diffTiem);
         stopTime(diffTiem);
       }, REFRESH_INTERVAL);