chore: add new component statistics (ElemeFE#22159)

* statistic：新增statistic组件，用于数值展示和倒计时

Co-authored-by: yang <[email protected]>

README.md

@@ -1,5 +1,6 @@
 <p align="center">
   <img src="https://cdn.rawgit.com/ElemeFE/element/dev/element_logo.svg">
+  1212
 </p>
 
 <p align="center">

components.json

@@ -80,6 +80,7 @@
   "cascader-panel": "./packages/cascader-panel/index.js",
   "avatar": "./packages/avatar/index.js",
   "drawer": "./packages/drawer/index.js",
+  "statistic": "./packages/statistic/index.js"
   "popconfirm": "./packages/popconfirm/index.js",
   "skeleton": "./packages/skeleton/index.js",
   "skeleton-item": "./packages/skeleton-item/index.js",

examples/docs/en-US/statistic.md

@@ -0,0 +1,218 @@
+## Statistic  
+
+Used to highlight a certain number or group of numbers, such as showing a numerical value, such as a dollar amount, ranking, etc.
+
+
+
+Countdown mode
+
+
+### Basic usage
+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 groupSeparator="," :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>
+
+            </el-statistic>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <div>
+            <el-statistic groupSeparator="," :precision="2" decimalSeparator="." :value="value1" :title="title">
+              <template slot="prefix">
+                <i class="el-icon-s-flag" style="color: red"></i>
+              </template>
+              <template slot="suffix">
+                <i class="el-icon-s-flag" style="color: blue"></i>
+              </template>
+            </el-statistic>
+          </div>
+
+    </el-col>
+    <el-col :span="6">
+      <div>
+        <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-off"  v-show="!like"></i>
+            </span> </template>
+        </el-statistic>
+      </div>
+    </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      like: true,
+      value1: 4154.564,
+      value2: 2222,
+      title: "Growth this year",
+      input: "Hello Element UI!",
+    };
+  },
+};
+</script>
+<style lang="scss" >
+.like {
+  cursor: pointer;
+  font-size: 25px;
+  display: inline-block;
+}
+</style>
+```
+:::
+
+
+### 倒计时
+:::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
+:::
+:::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"  timeIndices 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"   timeIndices 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-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>
+  </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" @finish="hilarity" :value="deadline4" title="Distance to Tomorrow:" timeIndices > </el-statistic>
+</el-card>
+  </el-col>
+</el-row>
+
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      format:'HH小时:mm:ss:SSS',
+      deadline: Date.now() + 1000 * 60 * 60 * 24 * 2,
+      deadline2: Date.now() + 1000 * 60 * 60 * 8,
+      deadline3: Date.now() + 1000 *  60 *30,
+        deadline4: Date.now() + (new Date().setHours(23,59,59)-Date.now()) ,
+    };
+  },
+  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?",
+          duration: 0
+        });
+    },
+        clickFn(){
+       this.$refs.statistic.suspend( this.stop)
+         this.stop=!this.stop
+    },
+    add(){
+      this.deadline3= this.deadline3+ 1000 * 10
+    }
+  }
+};
+</script>
+<style lang="scss" >
+.like {
+  cursor: pointer;
+  font-size: 25px;
+  display: inline-block;
+}
+</style>
+```
+:::
+
+
+
+
+### Statistic Attributes
+
+| Attribute          | Description            | Type            | Accepted Values                 | Default   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| value            | Numerical content                 | string \| number    | -          | -       |
+| decimalSeparator | Setting the decimal point            | string                  | -      | .       |
+| formatter        | Custom numerical presentation| v-slot \|({value}) => VNode | -   | -      |
+| groupSeparator   | Sets the thousandth identifier              | string           | -             | ,       |
+| precision        | numerical precision      | number                | -        | 0      |
+| 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   | -           | -       |
+| valueStyle       | Styles numeric values          | style             | -            | -       |
+| rate       | Set the ratio          | number             | -            | 1000       |
+
+
+### Statistic Slots
+| Name | Description |
+|------|--------|
+| prefix | Numeric prefix |
+| suffix | Suffixes for numeric values |
+| formatter | Numerical content |
+| title | Numeric titles |
+
+
+### Statistic.Countdown  Attributes
+
+| Attribute          | Description            | Type            | Options                 | Default   |
+|-------------  |---------------- |---------------- |---------------------- |-------- |
+| timeIndices       | Whether to enable the countdown function     | boolean     | true\|false                        | false      |
+| value         | Required value, enter the bound value   | string  | — | — |
+| format         | Formatting the countdown display   | string  | — | 'HH:mm:ss' |
+### Statistic.Countdown Events
+| Method | Description | Parameters |
+|---------|--------|---------|
+| change | Enable in the 'countdown' function | (value:  Date) |
+| finish | Launched after the 'countdown' is complete | (value: boolean) |
+
+### Statistic Methods
+| Method | Description | Parameters |CallBack|
+| ---- | ---- | ---- |---- |
+| suspend | Pause the countdown|(value:boolean) |(value:  Date) |
+
+