From ed2c6daad113e2ecdbeb593eb8bda6a4b88a5071 Mon Sep 17 00:00:00 2001
From: erkelost <1256029807@qq.com>
Date: Wed, 22 Dec 2021 16:37:49 +0800
Subject: [PATCH 1/5] =?UTF-8?q?fix(color-picker):=20'=E4=BC=98=E5=8C=96pal?=
 =?UTF-8?q?ette=E6=8B=96=E6=8B=BD=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/color-palette/color-palette.tsx |  2 +-
 .../devui/color-picker/src/utils/domDragger.ts     | 14 ++++++++------
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/devui-vue/devui/color-picker/src/components/color-palette/color-palette.tsx b/packages/devui-vue/devui/color-picker/src/components/color-palette/color-palette.tsx
index 1bd6e577eb..882d8f8746 100644
--- a/packages/devui-vue/devui/color-picker/src/components/color-palette/color-palette.tsx
+++ b/packages/devui-vue/devui/color-picker/src/components/color-palette/color-palette.tsx
@@ -97,7 +97,7 @@ export default defineComponent({
     onMounted(() => {
       renderCanvas()
       if (paletteInstance && paletteInstance.vnode.el && handlerElement.value) {
-        DOMUtils.triggerDragEvent(handlerElement.value, {
+        DOMUtils.triggerDragEvent(paletteInstance.vnode.el as HTMLElement, {
           drag: (event: Event) => {
             clickTransfrom.value = null
             handleDrag(event as MouseEvent)
diff --git a/packages/devui-vue/devui/color-picker/src/utils/domDragger.ts b/packages/devui-vue/devui/color-picker/src/utils/domDragger.ts
index e39258faf0..5e520c8073 100644
--- a/packages/devui-vue/devui/color-picker/src/utils/domDragger.ts
+++ b/packages/devui-vue/devui/color-picker/src/utils/domDragger.ts
@@ -82,26 +82,28 @@ export class DOMUtils {
     const upFn = (event: Event) => {
       DOMUtils.removeEventListener(document, 'mousemove', moveFn)
       DOMUtils.removeEventListener(document, 'mouseup', upFn)
+      DOMUtils.removeEventListener(document, 'touchmove', moveFn)
+      DOMUtils.removeEventListener(document, 'touchend', upFn)
       document.onselectstart = null
       document.ondragstart = null
 
       isDragging = false
-
       options.end?.(event)
     }
-
-    DOMUtils.addEventListener(element, 'mousedown', (event) => {
+    const downFn = (event: Event) => {
       if (isDragging) return
       document.onselectstart = () => false
       document.ondragstart = () => false
       DOMUtils.addEventListener(document, 'mousemove', moveFn)
       DOMUtils.addEventListener(document, 'mouseup', upFn)
-
+      DOMUtils.addEventListener(document, 'touchmove', moveFn)
+      DOMUtils.addEventListener(document, 'touchend', upFn)
       isDragging = true
 
       options.start?.(event)
-    })
-
+    }
+    DOMUtils.addEventListener(element, 'mousedown', downFn)
+    DOMUtils.addEventListener(element, 'touchstart', downFn)
     return
   }
 

From b2a1cf17979832dd5b9e9a625a02496260f824da Mon Sep 17 00:00:00 2001
From: erkelost <1256029807@qq.com>
Date: Sat, 25 Dec 2021 16:22:10 +0800
Subject: [PATCH 2/5] =?UTF-8?q?docs(colorpicker,=20statistic,=20ripple):?=
 =?UTF-8?q?=20'=E4=BC=98=E5=8C=96=E6=96=87=E6=A1=A3=20'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../docs/components/color-picker/index.md     |  14 +-
 .../devui-vue/docs/components/ripple/index.md |   2 +-
 .../docs/components/statistic/index.md        |  17 +-
 .../en-US/components/color-picker/index.md    | 158 ++++++++++++++++++
 .../docs/en-US/components/ripple/index.md     |   4 +-
 .../docs/en-US/components/statistic/index.md  |   2 +-
 6 files changed, 172 insertions(+), 25 deletions(-)
 create mode 100644 packages/devui-vue/docs/en-US/components/color-picker/index.md

diff --git a/packages/devui-vue/docs/components/color-picker/index.md b/packages/devui-vue/docs/components/color-picker/index.md
index 8e2f49be5f..5b4ba31257 100644
--- a/packages/devui-vue/docs/components/color-picker/index.md
+++ b/packages/devui-vue/docs/components/color-picker/index.md
@@ -109,7 +109,7 @@ export default defineComponent({
 :::
 
 ### 基础面板自定义
-设置可供选择的基础面板颜色样本
+设置可自定义配置的基础面板颜色样本
 :::demo
 
 ```vue
@@ -151,20 +151,10 @@ export default defineComponent({
 d-color-picker 参数
 
 | 参数         | 类型      | 默认   | 说明                                        | 跳转 Demo                   |
-| ------------ | --------- | ------ | ------------------------------------------- | --------------------------- |
+| :---: | :---: | :---: | :---: | :---: |
 | mode         | `String`  | `rgb`  | 切换颜色模式                                | [颜色模式](#颜色模式)       |  |
 | dotSize      | `Number`  | `15`   | 调色板圆点大小                              |                             |  |
 | swatches     | `Array`   |        | 预定义样本面板                              | [色块样本](#基础面板自定义) |  |
 | show-alpha   | `Boolean` | `true` | 是否展示透明度进度条                        | [透明度展示](#颜色透明度)   |  |
 | show-history | `Boolean` | `true` | 是否展示历史颜色                            | [历史颜色展示](#历史颜色)   |  |
 | v-model      | `String`  |        | 绑定颜色Value支持（hex , rgb , hsl , hsv ） |                             |  |
-
-
-
-d-color-picker 事件
-
-| 事件 | 类型 | 说明 | 跳转 Demo |
-| ---- | ---- | ---- | --------- |
-|      |      |      |           |
-|      |      |      |           |
-|      |      |      |           |
diff --git a/packages/devui-vue/docs/components/ripple/index.md b/packages/devui-vue/docs/components/ripple/index.md
index 3bd30f57eb..b5b9f491a0 100644
--- a/packages/devui-vue/docs/components/ripple/index.md
+++ b/packages/devui-vue/docs/components/ripple/index.md
@@ -200,7 +200,7 @@ Card 组件
 ### API
 
 |      参数       |   类型    |    默认     | 说明                              |
-| :-------------: | :-------: | :---------: | :-------------------------------- |
+| :---: | :---: | :---: | :---: |
 |      color      | `string`  | `#00000050` | 可选，默认当前文本颜色            |
 | initial-opacity | `number`  |    `0.1`    | 可选，初始交互效果透明度大小      |
 |  final-opacity  | `number`  |    `0.1`    | 可选，结束交互效果长按透明度大小  |
diff --git a/packages/devui-vue/docs/components/statistic/index.md b/packages/devui-vue/docs/components/statistic/index.md
index f3f020d62e..1fa5cbc798 100644
--- a/packages/devui-vue/docs/components/statistic/index.md
+++ b/packages/devui-vue/docs/components/statistic/index.md
@@ -164,14 +164,14 @@ export default {
 
 ### d-statistic
 
-| 参数               | 类型               | 默认     | 说明             |
-| ------------------ | ------------------ | -------- | ---------------- |
-| title              | `string \| v-slot` | -        | 数值的标题       |
-| extra              | `string \| v-slot` | -        | 额外内容         |
-| value              | `number \| string` | -        | 数值内容         |
-| group-separator    | `string`           | ,        | 设置千分位标识符 |
-| precision          | `number`           | -        | 设置数值精度     |
-| suffix             | `string \| v-slot` | -        | 设置数值的后缀   |
+| 参数 | 类型 | 默认 | 说明 |
+| :---: | :---: | :---: | :---: |
+| title              | `string \| v-slot` | - | 数值的标题 |
+| extra              | `string \| v-slot` | - | 额外内容 |
+| value              | `number \| string` | - | 数值内容 |
+| group-separator    | `string`           | - | 设置千分位标识符 |
+| precision          | `number`           | - | 设置数值精度     |
+| suffix             | `string \| v-slot` | - | 设置数值的后缀   |
 | prefix             | `string \| v-slot` | -        | 设置数值的前缀   |
 | title-style        | `style`            | -        | 标题样式         |
 | content-style      | `style`            | -        | 内容样式         |
@@ -182,4 +182,3 @@ export default {
 | easing             | `string`           | quartOut | 数字动画效果     |
 | start              | `boolean`          | false    | 是否开始动画     |
 
-
diff --git a/packages/devui-vue/docs/en-US/components/color-picker/index.md b/packages/devui-vue/docs/en-US/components/color-picker/index.md
new file mode 100644
index 0000000000..f1761e0487
--- /dev/null
+++ b/packages/devui-vue/docs/en-US/components/color-picker/index.md
@@ -0,0 +1,158 @@
+# ColorPicker 
+
+### When to use
+
+Allows users to use various interactive methods to select colors
+
+### Basic Usage
+
+:::demo
+
+```vue
+<template>
+  <d-color-picker></d-color-picker>
+</template>
+```
+
+:::
+
+### Color transparency
+
+Allows users to dynamically adjust the display alpha mode, which is true by default
+:::demo
+
+```vue
+<template>
+  <d-button btnStyle="common" @click="isShowAlpha">test showAlpha Be {{ show }}</d-button>
+  <d-color-picker v-model="color" :show-alpha="show"></d-color-picker>
+</template>
+
+<script>
+import { defineComponent, watch, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const show = ref(true)
+    const color = ref('rgba(83, 199, 212, 0.72)')
+    const isShowAlpha = () => {
+      show.value = !show.value
+    }
+    return {
+      color,
+      isShowAlpha,
+      show
+    }
+  }
+})
+</script>
+```
+
+:::
+
+### Color mode
+
+Set dynamic output color mode
+:::demo
+
+```vue
+<template>
+  <d-color-picker v-model="color" mode="hex"></d-color-picker>
+</template>
+
+<script>
+import { defineComponent, watch, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const color = ref('#FF6827A1')
+    return {
+      color
+    }
+  }
+})
+</script>
+```
+
+:::
+
+### Historical color
+
+Customize whether to display historical colors. By default, it is true
+:::demo
+
+```vue
+<template>
+  <d-button btnStyle="common" @click="isShowAlpha">test showAlpha Be {{ show }}</d-button>
+  <d-color-picker :show-history="show" v-model="color" mode="hsl"></d-color-picker>
+</template>
+
+<script>
+import { defineComponent, watch, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    let show = ref(true)
+    const isShowAlpha = () => {
+      show.value = !show.value
+    }
+    const color = ref('hsla(353, 1, 0.58, 1)')
+    return {
+      color,
+      isShowAlpha,
+      show
+    }
+  }
+})
+</script>
+```
+
+:::
+
+### Foundation panel customization
+Sets a customizable base panel color swatch
+:::demo
+
+```vue
+<template>
+  <d-color-picker :swatches="colors" v-model="color"></d-color-picker>
+</template>
+
+<script>
+import { defineComponent, watch, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const colors = [
+      '#f44336',
+      '#e91e63',
+      '#9c27b0',
+      '#673ab7',
+      '#3f51b5',
+      '#2196f3',
+      '#03a9f4',
+      '#00bcd4',
+      '#009688',
+      '#4caf50'
+    ]
+    const color = ref('rgba(155, 39, 176, 1)')
+    return {
+      color,
+      colors
+    }
+  }
+})
+</script>
+```
+
+:::
+
+### d-color-picker
+
+| parameter         | type      | default   | introduce                                        | Jump Demo                   |
+| :---: | :---: | :---: | :---: | :---: |
+| mode         | `String`  | `rgb`  | Toggle color mode                                | [mode](#color-mode)       |  |
+| dotSize      | `Number`  | `15`   | Palette dot size                              |                             |  |
+| swatches     | `Array`   |        | Predefined sample panels                              | [swatches](#foundation-panel-customization) |  |
+| show-alpha   | `Boolean` | `true` | Show transparency progress bar                        | [Color transparency](#color-transparency)   |  |
+| show-history | `Boolean` | `true` | Show historical colors                            | [show-history](#historical-color)   |  |
+| v-model      | `String`  |        | Binding color value support（hex , rgb , hsl , hsv ） |                             |  |
diff --git a/packages/devui-vue/docs/en-US/components/ripple/index.md b/packages/devui-vue/docs/en-US/components/ripple/index.md
index dfae7982b3..c8992dce49 100644
--- a/packages/devui-vue/docs/en-US/components/ripple/index.md
+++ b/packages/devui-vue/docs/en-US/components/ripple/index.md
@@ -200,8 +200,8 @@ Card Component
 
 ### API
 
-|      参数       |   类型    |    默认     | 说明                                                                          |
-| :-------------: | :-------: | :---------: | :---------------------------------------------------------------------------- |
+|      parameter       |   type    |    default     | introduce                                                                          |
+| :---: | :---: | :---: | :---: |
 |      color      | `string`  | `#00000050` | Choose Default current text color                                             |
 | initial-opacity | `number`  |    `0.1`    | Choose Initial interaction Opacity size                                       |
 |  final-opacity  | `number`  |    `0.1`    | Choose, end the interactive effect and press the Opacity size for a long time |
diff --git a/packages/devui-vue/docs/en-US/components/statistic/index.md b/packages/devui-vue/docs/en-US/components/statistic/index.md
index e15adb35a3..ba256b4143 100644
--- a/packages/devui-vue/docs/en-US/components/statistic/index.md
+++ b/packages/devui-vue/docs/en-US/components/statistic/index.md
@@ -165,7 +165,7 @@ Prefix and suffix slots
 ### d-statistic
 
 | parameter          | type               | default  | introduce                    |
-| ------------------ | ------------------ | -------- | ---------------------------- |
+| :---: | :---: | :---: | :---: |
 | title              | `string \| v-slot` | -        | Title of value               |
 | extra              | `string \| v-slot` | -        | Extra content                |
 | value              | `number \| string` | -        | Value content                |

From f89e85c348c61842c183c8c8cbb02e36b6588979 Mon Sep 17 00:00:00 2001
From: erkelost <1256029807@qq.com>
Date: Sat, 1 Jan 2022 12:27:26 +0800
Subject: [PATCH 3/5] =?UTF-8?q?fix(statistic):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E6=8F=92=E6=A7=BD=E6=A0=B7=E5=BC=8F=E9=97=AE=E9=A2=98=20ts?=
 =?UTF-8?q?=E6=A0=BC=E5=BC=8F=E6=9A=82=E6=97=B6=E7=A7=BB=E9=99=A4showgroup?=
 =?UTF-8?q?=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui/statistic/src/statistic-types.ts    |   4 +-
 .../devui/statistic/src/statistic.scss        |   2 +
 .../devui/statistic/src/utils/animation.ts    |   6 +-
 .../devui/statistic/src/utils/easing.ts       |  12 +-
 .../docs/components/statistic/index.md        | 125 ++++++++++--------
 .../docs/en-US/components/statistic/index.md  |  34 +++++
 6 files changed, 118 insertions(+), 65 deletions(-)

diff --git a/packages/devui-vue/devui/statistic/src/statistic-types.ts b/packages/devui-vue/devui/statistic/src/statistic-types.ts
index db27965c2a..b70d8d5dc4 100644
--- a/packages/devui-vue/devui/statistic/src/statistic-types.ts
+++ b/packages/devui-vue/devui/statistic/src/statistic-types.ts
@@ -19,11 +19,11 @@ export const statisticProps = {
   },
   groupSeparator: {
     type: String,
-    default: ','
+    default: ''
   },
   showGroupSeparator: {
     type: Boolean,
-    default: false
+    default: true
   },
   titleStyle: {
     type: Object as PropType<CSSProperties>
diff --git a/packages/devui-vue/devui/statistic/src/statistic.scss b/packages/devui-vue/devui/statistic/src/statistic.scss
index 229050af10..ec9a59092d 100644
--- a/packages/devui-vue/devui/statistic/src/statistic.scss
+++ b/packages/devui-vue/devui/statistic/src/statistic.scss
@@ -21,11 +21,13 @@
   &-prefix {
     margin-right: 6px;
     display: flex;
+    align-items: center;
   }
 
   &-suffix {
     margin-left: 6px;
     display: flex;
+    align-items: center;
   }
 
   &--value {
diff --git a/packages/devui-vue/devui/statistic/src/utils/animation.ts b/packages/devui-vue/devui/statistic/src/utils/animation.ts
index 778f51d51b..3b3eb192fa 100644
--- a/packages/devui-vue/devui/statistic/src/utils/animation.ts
+++ b/packages/devui-vue/devui/statistic/src/utils/animation.ts
@@ -72,7 +72,7 @@ export class Tween {
     this.keys = {}
   }
 
-  update() {
+  update(): void {
     this.time = Date.now()
     // delay some time
     if (this.time < this.startTime) {
@@ -107,7 +107,7 @@ export class Tween {
   }
 
   // 递归 重绘
-  start() {
+  start(): void {
     this.startTime = Date.now() + this.delay
     const tick = () => {
       this.update()
@@ -122,7 +122,7 @@ export class Tween {
     tick()
   }
 
-  stop() {
+  stop(): void {
     cancelAnimationFrame(this.timer)
     this.timer = null
   }
diff --git a/packages/devui-vue/devui/statistic/src/utils/easing.ts b/packages/devui-vue/devui/statistic/src/utils/easing.ts
index 6dfa4ca2f8..4b0fb02fdc 100644
--- a/packages/devui-vue/devui/statistic/src/utils/easing.ts
+++ b/packages/devui-vue/devui/statistic/src/utils/easing.ts
@@ -2,15 +2,15 @@
 const pow = Math.pow
 const sqrt = Math.sqrt
 
-export const easeOutCubic = function (x: number) {
+export const easeOutCubic = function (x: number): number {
   return 1 - pow(1 - x, 3)
 }
-export const linear = (x) => x
-export const easeOutExpo = function (x: number) {
+export const linear = (x: number): number => x
+export const easeOutExpo = function (x: number): number {
   return x === 1 ? 1 : 1 - pow(2, -10 * x)
 }
 
-export const easeInOutExpo = function (x: number) {
+export const easeInOutExpo = function (x: number): number {
   return x === 0
     ? 0
     : x === 1
@@ -19,9 +19,9 @@ export const easeInOutExpo = function (x: number) {
     ? pow(2, 20 * x - 10) / 2
     : (2 - pow(2, -20 * x + 10)) / 2
 }
-export const easeInExpo = function (x: number) {
+export const easeInExpo = function (x: number): number {
   return x === 0 ? 0 : pow(2, 10 * x - 10)
 }
-export const easeInOutCirc = function (x: number) {
+export const easeInOutCirc = function (x: number): number {
   return x < 0.5 ? (1 - sqrt(1 - pow(2 * x, 2))) / 2 : (sqrt(1 - pow(-2 * x + 2, 2)) + 1) / 2
 }
diff --git a/packages/devui-vue/docs/components/statistic/index.md b/packages/devui-vue/docs/components/statistic/index.md
index 1fa5cbc798..019467ccbb 100644
--- a/packages/devui-vue/docs/components/statistic/index.md
+++ b/packages/devui-vue/docs/components/statistic/index.md
@@ -14,14 +14,14 @@
     <d-col :span="12">
       <d-statistic
         title="Users Sales"
-        :value="5201314"
-        style="position: absolute">
-      </d-statistic>
-        
+        group-separator=","
+        :value="5201314" />
     </d-col>
     <d-col :span="12">
-      <d-statistic title="Account Weekly Sales (CNY)" :value="999999" 
-       />
+      <d-statistic
+        title="Account Weekly Sales (CNY)"
+        group-separator="."
+        :value="999999" />
     </d-col>
   </d-cow>
 </template>
@@ -39,13 +39,7 @@
   <d-row :gutter="16">
     <d-col :span="12">
       <d-card>
-        <d-statistic
-          title="Growth Rate"
-          :value="68.28"
-          :precision="3"
-          suffix="%"
-          :content-style="{ color: '#3f8600' }"
-        >
+        <d-statistic title="Growth Rate" :value="68.28" :precision="3" suffix="%">
           <template #prefix>
             <d-icon name="experice-new" />
           </template>
@@ -54,13 +48,7 @@
     </d-col>
     <d-col :span="12">
       <d-card>
-        <d-statistic
-          title="Decline Rate"
-          :value="38.3"
-          suffix="%"
-          class="demo-class"
-          :content-style="{ color: '#cf1322' }"
-        >
+        <d-statistic title="Decline Rate" :value="38.3" suffix="%">
           <template #prefix>
             <d-icon name="bold" />
           </template>
@@ -87,30 +75,28 @@
           title="Animation Growth Rate"
           :value="88.265"
           suffix="%"
-          :content-style="{ color: '#3f8600' }"
           :value-from="0"
           :start="start"
           :animation-duration="5000"
           animation
-        >
-        </d-statistic>
+        ></d-statistic>
       </d-card>
     </d-col>
     <d-col :span="12">
       <d-card>
         <d-statistic
           title="Animation Decline Rate"
-          value="53.333"
-          :precision="0"
-          suffix="%"
-          class="demo-class"
-          :content-style="{ color: '#cf1322' }"
+          value="53"
+          :precision="3"
           :value-from="0"
           :start="controlStart"
           animation
         >
+          <template #suffix>
+            <span>%</span>
+            <d-button @click="controlStart = true">Start</d-button>
+          </template>
         </d-statistic>
-        <d-button @click="controlStart = true">Start</d-button>
       </d-card>
     </d-col>
   </d-row>
@@ -120,10 +106,10 @@ export default {
   data() {
     return {
       start: true,
-      controlStart: false,
-    };
-  },
-};
+      controlStart: false
+    }
+  }
+}
 </script>
 ```
 
@@ -144,9 +130,7 @@ export default {
         :showGroupSeparator="true"
         style="margin-right: 50px"
       >
-        <template #suffix>
-          %
-        </template>
+        <template #suffix>%</template>
       </d-statistic>
     </d-col>
     <d-col :span="12">
@@ -162,23 +146,56 @@ export default {
 
 :::
 
-### d-statistic
+### 自定义样式
+
+提供自定义属性方便添加样式
+:::demo
 
-| 参数 | 类型 | 默认 | 说明 |
-| :---: | :---: | :---: | :---: |
-| title              | `string \| v-slot` | - | 数值的标题 |
-| extra              | `string \| v-slot` | - | 额外内容 |
-| value              | `number \| string` | - | 数值内容 |
-| group-separator    | `string`           | - | 设置千分位标识符 |
-| precision          | `number`           | - | 设置数值精度     |
-| suffix             | `string \| v-slot` | - | 设置数值的后缀   |
-| prefix             | `string \| v-slot` | -        | 设置数值的前缀   |
-| title-style        | `style`            | -        | 标题样式         |
-| content-style      | `style`            | -        | 内容样式         |
-| animation-duration | `number`           | 2000     | 动画持续时间     |
-| delay              | `number`           | 0        | 延迟进行动画时间 |
-| value-from         | `number`           | 0        | 动画初始值       |
-| animation          | `boolean`          | false    | 是否开启动画     |
-| easing             | `string`           | quartOut | 数字动画效果     |
-| start              | `boolean`          | false    | 是否开始动画     |
+```vue
+<template>
+  <d-row :gutter="16">
+    <d-col :span="12">
+      <d-statistic
+        title="Custom Style"
+        :value="88"
+        :content-style="{ color: '#fba' }"
+        :title-style="{ color: '#abf' }"
+      >
+        <template #suffix>%</template>
+      </d-statistic>
+    </d-col>
+    <d-col :span="12">
+      <d-statistic
+        title="Scale"
+        :value="5000"
+        group-separator="."
+        :precision="3"
+        prefix="$"
+        :content-style="{ fontSize: '30px', color: 'red'}"
+      >
+    </d-col>
+  </d-row>
+</template>
+```
+
+:::
+
+### d-statistic
 
+|        参数        |        类型        |   默认   |       说明       |
+| :----------------: | :----------------: | :------: | :--------------: |
+|       title        | `string \| v-slot` |    -     |    数值的标题    |
+|       extra        | `string \| v-slot` |    -     |     额外内容     |
+|       value        | `number \| string` |    -     |     数值内容     |
+|  group-separator   |      `string`      |    -     | 设置千分位标识符 |
+|     precision      |      `number`      |    -     |   设置数值精度   |
+|       suffix       | `string \| v-slot` |    -     |  设置数值的后缀  |
+|       prefix       | `string \| v-slot` |    -     |  设置数值的前缀  |
+|    title-style     |      `style`       |    -     |     标题样式     |
+|   content-style    |      `style`       |    -     |     内容样式     |
+| animation-duration |      `number`      |   2000   |   动画持续时间   |
+|       delay        |      `number`      |    0     | 延迟进行动画时间 |
+|     value-from     |      `number`      |    0     |    动画初始值    |
+|     animation      |     `boolean`      |  false   |   是否开启动画   |
+|       easing       |      `string`      | quartOut |   数字动画效果   |
+|       start        |     `boolean`      |  false   |   是否开始动画   |
diff --git a/packages/devui-vue/docs/en-US/components/statistic/index.md b/packages/devui-vue/docs/en-US/components/statistic/index.md
index ba256b4143..ffd2f99628 100644
--- a/packages/devui-vue/docs/en-US/components/statistic/index.md
+++ b/packages/devui-vue/docs/en-US/components/statistic/index.md
@@ -162,6 +162,40 @@ Prefix and suffix slots
 
 :::
 
+### Custom Style
+
+Provide custom attributes to facilitate adding styles
+:::demo
+
+```vue
+<template>
+  <d-row :gutter="16">
+    <d-col :span="12">
+      <d-statistic
+        title="Custom Style"
+        :value="88"
+        :content-style="{ color: '#fba' }"
+        :title-style="{ color: '#abf' }"
+      >
+        <template #suffix>%</template>
+      </d-statistic>
+    </d-col>
+    <d-col :span="12">
+      <d-statistic
+        title="Scale"
+        :value="5000"
+        group-separator="."
+        :precision="3"
+        prefix="$"
+        :content-style="{ fontSize: '30px', color: 'red'}"
+      >
+    </d-col>
+  </d-row>
+</template>
+```
+
+:::
+
 ### d-statistic
 
 | parameter          | type               | default  | introduce                    |

From 0836b89b64be307ea91b2af703a18279fc13f25e Mon Sep 17 00:00:00 2001
From: erkelost <1256029807@qq.com>
Date: Thu, 6 Jan 2022 11:55:24 +0800
Subject: [PATCH 4/5] =?UTF-8?q?docs(statistic):=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E6=96=87=E6=A1=A3=E6=98=BE=E7=A4=BA=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../docs/components/statistic/index.md        |  3 +-
 .../docs/en-US/components/statistic/index.md  | 28 ++++++++-----------
 2 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/packages/devui-vue/docs/components/statistic/index.md b/packages/devui-vue/docs/components/statistic/index.md
index 71b1cac86f..4ae329547d 100644
--- a/packages/devui-vue/docs/components/statistic/index.md
+++ b/packages/devui-vue/docs/components/statistic/index.md
@@ -148,7 +148,6 @@ export default {
 
 ### 自定义样式
 
-<<<<<<< HEAD
 提供自定义属性方便添加样式
 :::demo
 
@@ -172,7 +171,7 @@ export default {
         group-separator="."
         :precision="3"
         prefix="$"
-        :content-style="{ fontSize: '30px', color: 'red'}"
+        :content-style="{ fontSize: '30px', color: '#5e7ce0'}"
       >
     </d-col>
   </d-row>
diff --git a/packages/devui-vue/docs/en-US/components/statistic/index.md b/packages/devui-vue/docs/en-US/components/statistic/index.md
index ffd2f99628..5dbd83d870 100644
--- a/packages/devui-vue/docs/en-US/components/statistic/index.md
+++ b/packages/devui-vue/docs/en-US/components/statistic/index.md
@@ -44,7 +44,6 @@ Display statistics in cards.
           :value="68.28"
           :precision="3"
           suffix="%"
-          :content-style="{ color: '#3f8600' }"
         >
           <template #prefix>
             <d-icon name="experice-new" />
@@ -59,7 +58,6 @@ Display statistics in cards.
           :value="38.3"
           suffix="%"
           class="demo-class"
-          :content-style="{ color: '#cf1322' }"
         >
           <template #prefix>
             <d-icon name="bold" />
@@ -87,30 +85,28 @@ We can start numerical animation by setting the animation attribute. You can sta
           title="Animation Growth Rate"
           :value="88.265"
           suffix="%"
-          :content-style="{ color: '#3f8600' }"
           :value-from="0"
           :start="start"
           :animation-duration="5000"
           animation
-        >
-        </d-statistic>
+        ></d-statistic>
       </d-card>
     </d-col>
     <d-col :span="12">
       <d-card>
         <d-statistic
           title="Animation Decline Rate"
-          value="53.333"
-          :precision="0"
-          suffix="%"
-          class="demo-class"
-          :content-style="{ color: '#cf1322' }"
+          value="53"
+          :precision="3"
           :value-from="0"
           :start="controlStart"
           animation
         >
+          <template #suffix>
+            <span>%</span>
+            <d-button @click="controlStart = true">Start</d-button>
+          </template>
         </d-statistic>
-        <d-button @click="controlStart = true">Start</d-button>
       </d-card>
     </d-col>
   </d-row>
@@ -120,10 +116,10 @@ export default {
   data() {
     return {
       start: true,
-      controlStart: false,
-    };
-  },
-};
+      controlStart: false
+    }
+  }
+}
 </script>
 ```
 
@@ -187,7 +183,7 @@ Provide custom attributes to facilitate adding styles
         group-separator="."
         :precision="3"
         prefix="$"
-        :content-style="{ fontSize: '30px', color: 'red'}"
+        :content-style="{ fontSize: '30px', color: '#5e7ce0'}"
       >
     </d-col>
   </d-row>

From 66f8eff8d078bd54f73017fe338c8ba7ee0a3703 Mon Sep 17 00:00:00 2001
From: erkelost <1256029807@qq.com>
Date: Tue, 18 Jan 2022 22:22:43 +0800
Subject: [PATCH 5/5] =?UTF-8?q?refactor(statistic):=20=E9=87=8D=E6=9E=84St?=
 =?UTF-8?q?atistic=20Api=20Demo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui/statistic/src/statistic-types.ts    |  21 +--
 .../devui/statistic/src/statistic.scss        |   2 -
 .../devui/statistic/src/statistic.tsx         |  16 +-
 .../devui/statistic/src/utils/animation.ts    |   1 -
 .../devui/statistic/src/utils/separator.ts    |  22 +--
 .../docs/components/statistic/index.md        | 139 ++++++++--------
 .../docs/en-US/components/statistic/index.md  | 148 +++++++++---------
 7 files changed, 160 insertions(+), 189 deletions(-)

diff --git a/packages/devui-vue/devui/statistic/src/statistic-types.ts b/packages/devui-vue/devui/statistic/src/statistic-types.ts
index b70d8d5dc4..d183ec80ca 100644
--- a/packages/devui-vue/devui/statistic/src/statistic-types.ts
+++ b/packages/devui-vue/devui/statistic/src/statistic-types.ts
@@ -1,5 +1,5 @@
 import type { PropType, ExtractPropTypes, CSSProperties } from 'vue'
-import type { easingType } from './utils/animation'
+// import type { easingType } from './utils/animation'
 export const statisticProps = {
   title: {
     type: String,
@@ -21,14 +21,7 @@ export const statisticProps = {
     type: String,
     default: ''
   },
-  showGroupSeparator: {
-    type: Boolean,
-    default: true
-  },
-  titleStyle: {
-    type: Object as PropType<CSSProperties>
-  },
-  contentStyle: {
+  valueStyle: {
     type: Object as PropType<CSSProperties>
   },
   animationDuration: {
@@ -44,19 +37,11 @@ export const statisticProps = {
   },
   start: {
     type: Boolean,
-    default: false
+    default: true
   },
   extra: {
     type: String,
     default: ''
-  },
-  easing: {
-    type: String as PropType<easingType>,
-    default: 'easeOutCubic'
-  },
-  delay: {
-    type: Number,
-    default: 0
   }
 } as const
 
diff --git a/packages/devui-vue/devui/statistic/src/statistic.scss b/packages/devui-vue/devui/statistic/src/statistic.scss
index ec9a59092d..a9d365492e 100644
--- a/packages/devui-vue/devui/statistic/src/statistic.scss
+++ b/packages/devui-vue/devui/statistic/src/statistic.scss
@@ -8,10 +8,8 @@
 
   &-title {
     margin-bottom: 4px;
-    opacity: 0.7;
     font-size: 14px;
   }
-
   &-content {
     font-size: 24px;
     display: flex;
diff --git a/packages/devui-vue/devui/statistic/src/statistic.tsx b/packages/devui-vue/devui/statistic/src/statistic.tsx
index 4de3a798fa..25f36c499a 100644
--- a/packages/devui-vue/devui/statistic/src/statistic.tsx
+++ b/packages/devui-vue/devui/statistic/src/statistic.tsx
@@ -24,9 +24,9 @@ export default defineComponent({
           to: {
             value: to
           },
-          delay: props.delay,
+          delay: 0,
           duration: props.animationDuration,
-          easing: props.easing,
+          easing: 'easeOutCubic',
           onUpdate: (keys: any) => {
             innerValue.value = keys.value
           },
@@ -37,14 +37,12 @@ export default defineComponent({
         tween.value.start()
       }
     }
-
     const statisticValue = computed(() => {
       return analysisValueType(
         innerValue.value,
         props.value,
         props.groupSeparator,
-        props.precision,
-        props.showGroupSeparator
+        props.precision
       )
     })
     onMounted(() => {
@@ -52,7 +50,7 @@ export default defineComponent({
         animation()
       }
     })
-
+    // 我们可以手动控制animation
     watch(
       () => props.start,
       (value) => {
@@ -67,7 +65,7 @@ export default defineComponent({
           <div class='devui-statistic-title' style={props.titleStyle}>
             {ctx.slots.title?.() || props.title}
           </div>
-          <div class='devui-statistic-content' style={props.contentStyle}>
+          <div class='devui-statistic-content' style={props.valueStyle}>
             {props.prefix || ctx.slots.prefix?.() ? (
               <span class='devui-statistic-prefix'>{ctx.slots.prefix?.() || props.prefix}</span>
             ) : null}
@@ -76,7 +74,9 @@ export default defineComponent({
               <span class='devui-statistic-suffix'>{ctx.slots.suffix?.() || props.suffix}</span>
             ) : null}
           </div>
-          {ctx.slots.extra?.() || props.extra}
+          {props.extra || ctx.slots.extra?.() ? (
+            <div class='devui-statistic-extra'> {ctx.slots.extra?.() || props.extra}</div>
+          ) : null}
         </div>
       )
     }
diff --git a/packages/devui-vue/devui/statistic/src/utils/animation.ts b/packages/devui-vue/devui/statistic/src/utils/animation.ts
index 3b3eb192fa..9ab7230108 100644
--- a/packages/devui-vue/devui/statistic/src/utils/animation.ts
+++ b/packages/devui-vue/devui/statistic/src/utils/animation.ts
@@ -112,7 +112,6 @@ export class Tween {
     const tick = () => {
       this.update()
       this.timer = requestAnimationFrame(tick)
-
       if (this.finished) {
         // 在判断 update中 结束后 停止 重绘
         cancelAnimationFrame(this.timer)
diff --git a/packages/devui-vue/devui/statistic/src/utils/separator.ts b/packages/devui-vue/devui/statistic/src/utils/separator.ts
index 91178bccbc..17143eda8a 100644
--- a/packages/devui-vue/devui/statistic/src/utils/separator.ts
+++ b/packages/devui-vue/devui/statistic/src/utils/separator.ts
@@ -3,12 +3,11 @@ export type valueType = string | number
 export const separator = (
   SeparatorString: string, // value
   groupSeparator: string, // 千分位分隔符
-  showGroupSeparator: boolean // 是否展示千分位分隔符
 ): string => {
   const res = SeparatorString.replace(/\d+/, function (n) {
     // 先提取整数部分
     return n.replace(/(\d)(?=(\d{3})+$)/g, function ($1) {
-      return $1 + `${showGroupSeparator ? groupSeparator : ''}`
+      return $1 + `${groupSeparator}`
     })
   })
   return res
@@ -23,8 +22,7 @@ export const analysisValueType = (
   value: valueType, // 动态value 值
   propsValue: valueType, // 用户传入value
   groupSeparator: string, // 千位分隔符
-  splitPrecisionNumber: number, // 分割精度, 小数点
-  showGroupSeparator: boolean // 是否展示千分位分隔符
+  splitPrecisionNumber: number // 分割精度, 小数点
 ): string => {
   const fixedNumber =
     propsValue.toString().indexOf('.') !== -1
@@ -33,20 +31,12 @@ export const analysisValueType = (
   if (typeof value === 'number') {
     if (isHasDot(value)) {
       return splitPrecisionNumber
-        ? separator(
-            value.toFixed(splitPrecisionNumber).toString(),
-            groupSeparator,
-            showGroupSeparator
-          )
-        : separator(value.toFixed(fixedNumber).toString(), groupSeparator, showGroupSeparator)
+        ? separator(value.toFixed(splitPrecisionNumber).toString(), groupSeparator)
+        : separator(value.toFixed(fixedNumber).toString(), groupSeparator)
     } else {
       return splitPrecisionNumber
-        ? separator(
-            value.toFixed(splitPrecisionNumber).toString(),
-            groupSeparator,
-            showGroupSeparator
-          )
-        : separator(value.toString(), groupSeparator, showGroupSeparator)
+        ? separator(value.toFixed(splitPrecisionNumber).toString(), groupSeparator)
+        : separator(value.toString(), groupSeparator)
     }
   } else {
     return value
diff --git a/packages/devui-vue/docs/components/statistic/index.md b/packages/devui-vue/docs/components/statistic/index.md
index 4ae329547d..73f41d010e 100644
--- a/packages/devui-vue/docs/components/statistic/index.md
+++ b/packages/devui-vue/docs/components/statistic/index.md
@@ -15,13 +15,15 @@
       <d-statistic
         title="Users Sales"
         group-separator=","
-        :value="5201314" />
+        :value="5201314">
+      </d-statistic>
     </d-col>
     <d-col :span="12">
       <d-statistic
         title="Account Weekly Sales (CNY)"
         group-separator="."
-        :value="999999" />
+        :value="999999">
+      </d-statistic>
     </d-col>
   </d-cow>
 </template>
@@ -29,38 +31,6 @@
 
 :::
 
-### 在卡片中使用
-
-在卡片中展示统计数值。
-:::demo
-
-```vue
-<template>
-  <d-row :gutter="16">
-    <d-col :span="12">
-      <d-card>
-        <d-statistic title="Growth Rate" :value="68.28" :precision="3" suffix="%">
-          <template #prefix>
-            <d-icon name="experice-new" />
-          </template>
-        </d-statistic>
-      </d-card>
-    </d-col>
-    <d-col :span="12">
-      <d-card>
-        <d-statistic title="Decline Rate" :value="38.3" suffix="%">
-          <template #prefix>
-            <d-icon name="bold" />
-          </template>
-        </d-statistic>
-      </d-card>
-    </d-col>
-  </d-row>
-</template>
-```
-
-:::
-
 ### 数值动画
 
 我们可以通过设置 animation 属性 开启数值动画。可以在页面加载时开始动画,也可以手动控制
@@ -117,7 +87,7 @@ export default {
 
 ### 插槽的使用
 
-前缀和后缀插槽
+前缀插槽， 后缀插槽， 额外插槽
 :::demo
 
 ```vue
@@ -125,18 +95,53 @@ export default {
   <d-row :gutter="16">
     <d-col :span="12">
       <d-statistic
-        title="Active User Number"
-        :value="1128"
-        :showGroupSeparator="true"
+        :value="336969"
         style="margin-right: 50px"
+        group-separator=","
+        :value-style="{ fontWeight: 'bold', fontSize: '30px' }"
+        animation
       >
-        <template #suffix>%</template>
+        <template #title>
+          <span :style="{marginRight: '10px' }">文章阅读数</span>
+          <d-icon name="help" />
+        </template>
+        <template #extra>
+          <span :style="{ fontSize: '13px', marginRight: '10px' }">较前日</span>
+          <d-icon color="#F56C6C" name="arrow-down" />
+          <d-statistic
+            style="display: inline-block;"
+            group-separator=","
+            :value-style="{ fontSize: '15px', color: '#F56C6C', letterSpacing: '2px' }"
+            value="1399"
+            animation
+          />
+        </template>
       </d-statistic>
     </d-col>
     <d-col :span="12">
-      <d-statistic title="Scale" value="93">
-        <template #suffix>
-          <span>/ 100</span>
+      <d-statistic
+        :value="5565566"
+        style="margin-right: 50px"
+        group-separator=","
+        :value-style="{ fontWeight: 'bold', fontSize: '30px' }"
+        animation
+        :animation-duration="5000"
+      >
+        <template #title>
+          <span :style="{marginRight: '10px' }">文章点赞数</span>
+          <d-icon name="help" />
+        </template>
+        <template #extra>
+          <span :style="{ fontSize: '13px', marginRight: '10px' }">较前日</span>
+          <d-icon color="#67C23A" name="arrow-up" />
+          <d-statistic
+            style="display: inline-block;"
+            :value-style="{ fontSize: '15px', color: '#67C23A', letterSpacing: '2px' }"
+            value="6669"
+            animation
+            group-separator=","
+            :animation-duration="5000"
+          />
         </template>
       </d-statistic>
     </d-col>
@@ -146,33 +151,37 @@ export default {
 
 :::
 
-### 自定义样式
+### 在卡片中使用
 
-提供自定义属性方便添加样式
+在卡片中展示统计数值。
 :::demo
 
 ```vue
 <template>
   <d-row :gutter="16">
     <d-col :span="12">
-      <d-statistic
-        title="Custom Style"
-        :value="88"
-        :content-style="{ color: '#fba' }"
-        :title-style="{ color: '#abf' }"
-      >
-        <template #suffix>%</template>
-      </d-statistic>
+      <d-card>
+        <d-statistic
+          :value-style="{ color: '#fba' }"
+          title="Growth Rate"
+          :value="68.28"
+          :precision="3"
+          suffix="%"
+        >
+          <template #prefix>
+            <d-icon name="experice-new" />
+          </template>
+        </d-statistic>
+      </d-card>
     </d-col>
     <d-col :span="12">
-      <d-statistic
-        title="Scale"
-        :value="5000"
-        group-separator="."
-        :precision="3"
-        prefix="$"
-        :content-style="{ fontSize: '30px', color: '#5e7ce0'}"
-      >
+      <d-card>
+        <d-statistic :value-style="{ color: '#abf' }" title="Decline Rate" :value="38.3" suffix="%">
+          <template #prefix>
+            <d-icon name="bold" />
+          </template>
+        </d-statistic>
+      </d-card>
     </d-col>
   </d-row>
 </template>
@@ -185,18 +194,14 @@ export default {
 |        参数        |        类型        |   默认   |       说明       |
 | :----------------: | :----------------: | :------: | :--------------: |
 |       title        | `string \| v-slot` |    -     |    数值的标题    |
-|       extra        | `string \| v-slot` |    -     |     额外内容     |
 |       value        | `number \| string` |    -     |     数值内容     |
 |  group-separator   |      `string`      |    -     | 设置千分位标识符 |
 |     precision      |      `number`      |    -     |   设置数值精度   |
 |       suffix       | `string \| v-slot` |    -     |  设置数值的后缀  |
 |       prefix       | `string \| v-slot` |    -     |  设置数值的前缀  |
-|    title-style     |      `style`       |    -     |     标题样式     |
-|   content-style    |      `style`       |    -     |     内容样式     |
+|       extra        | `string \| v-slot` |    -     |     额外内容     |
+|    value-style     |      `style`       |    -     |     内容样式     |
 | animation-duration |      `number`      |   2000   |   动画持续时间   |
-|       delay        |      `number`      |    0     | 延迟进行动画时间 |
 |     value-from     |      `number`      |    0     |    动画初始值    |
 |     animation      |     `boolean`      |  false   |   是否开启动画   |
-|       easing       |      `string`      | quartOut |   数字动画效果   |
-|       start        |     `boolean`      |  false   |   是否开始动画   |
-
+|       start        |     `boolean`      |  true   |   是否开始动画   |
diff --git a/packages/devui-vue/docs/en-US/components/statistic/index.md b/packages/devui-vue/docs/en-US/components/statistic/index.md
index 5dbd83d870..26422c59f7 100644
--- a/packages/devui-vue/docs/en-US/components/statistic/index.md
+++ b/packages/devui-vue/docs/en-US/components/statistic/index.md
@@ -14,14 +14,16 @@ Used when it is necessary to display statistical data with description
     <d-col :span="12">
       <d-statistic
         title="Users Sales"
-        :value="5201314"
-        style="position: absolute">
+        group-separator=","
+        :value="5201314">
       </d-statistic>
-        
     </d-col>
     <d-col :span="12">
-      <d-statistic title="Account Weekly Sales (CNY)" :value="999999" 
-       />
+      <d-statistic
+        title="Account Weekly Sales (CNY)"
+        group-separator="."
+        :value="999999">
+      </d-statistic>
     </d-col>
   </d-cow>
 </template>
@@ -29,48 +31,6 @@ Used when it is necessary to display statistical data with description
 
 :::
 
-### Use in card
-
-Display statistics in cards.
-:::demo
-
-```vue
-<template>
-  <d-row :gutter="16">
-    <d-col :span="12">
-      <d-card>
-        <d-statistic
-          title="Growth Rate"
-          :value="68.28"
-          :precision="3"
-          suffix="%"
-        >
-          <template #prefix>
-            <d-icon name="experice-new" />
-          </template>
-        </d-statistic>
-      </d-card>
-    </d-col>
-    <d-col :span="12">
-      <d-card>
-        <d-statistic
-          title="Decline Rate"
-          :value="38.3"
-          suffix="%"
-          class="demo-class"
-        >
-          <template #prefix>
-            <d-icon name="bold" />
-          </template>
-        </d-statistic>
-      </d-card>
-    </d-col>
-  </d-row>
-</template>
-```
-
-:::
-
 ### Numerical animation
 
 We can start numerical animation by setting the animation attribute. You can start the animation when the page loads, or you can control it manually
@@ -127,7 +87,7 @@ export default {
 
 ### Use of slots
 
-Prefix and suffix slots
+Prefix slot, suffix slot, extra slot
 :::demo
 
 ```vue
@@ -135,20 +95,53 @@ Prefix and suffix slots
   <d-row :gutter="16">
     <d-col :span="12">
       <d-statistic
-        title="Active User Number"
-        :value="1128"
-        :showGroupSeparator="true"
+        :value="336969"
         style="margin-right: 50px"
+        group-separator=","
+        :value-style="{ fontWeight: 'bold', fontSize: '30px' }"
+        animation
       >
-        <template #suffix>
-          %
+        <template #title>
+          <span :style="{marginRight: '10px' }">Number of articles read</span>
+          <d-icon name="help" />
+        </template>
+        <template #extra>
+          <span :style="{ fontSize: '13px', marginRight: '10px' }">Compared before yesterday</span>
+          <d-icon color="#F56C6C" name="arrow-down" />
+          <d-statistic
+            style="display: inline-block;"
+            group-separator=","
+            :value-style="{ fontSize: '15px', color: '#F56C6C', letterSpacing: '2px' }"
+            value="1399"
+            animation
+          />
         </template>
       </d-statistic>
     </d-col>
     <d-col :span="12">
-      <d-statistic title="Scale" value="93">
-        <template #suffix>
-          <span>/ 100</span>
+      <d-statistic
+        :value="5565566"
+        style="margin-right: 50px"
+        group-separator=","
+        :value-style="{ fontWeight: 'bold', fontSize: '30px' }"
+        animation
+        :animation-duration="5000"
+      >
+        <template #title>
+          <span :style="{marginRight: '10px' }">Number of article likes</span>
+          <d-icon name="help" />
+        </template>
+        <template #extra>
+          <span :style="{ fontSize: '13px', marginRight: '10px' }">Compared before yesterday</span>
+          <d-icon color="#67C23A" name="arrow-up" />
+          <d-statistic
+            style="display: inline-block;"
+            :value-style="{ fontSize: '15px', color: '#67C23A', letterSpacing: '2px' }"
+            value="6669"
+            animation
+            group-separator=","
+            :animation-duration="5000"
+          />
         </template>
       </d-statistic>
     </d-col>
@@ -158,33 +151,37 @@ Prefix and suffix slots
 
 :::
 
-### Custom Style
+### Use in card
 
-Provide custom attributes to facilitate adding styles
+Display statistics in cards.
 :::demo
 
 ```vue
 <template>
   <d-row :gutter="16">
     <d-col :span="12">
-      <d-statistic
-        title="Custom Style"
-        :value="88"
-        :content-style="{ color: '#fba' }"
-        :title-style="{ color: '#abf' }"
-      >
-        <template #suffix>%</template>
-      </d-statistic>
+      <d-card>
+        <d-statistic
+          :value-style="{ color: '#fba' }"
+          title="Growth Rate"
+          :value="68.28"
+          :precision="3"
+          suffix="%"
+        >
+          <template #prefix>
+            <d-icon name="experice-new" />
+          </template>
+        </d-statistic>
+      </d-card>
     </d-col>
     <d-col :span="12">
-      <d-statistic
-        title="Scale"
-        :value="5000"
-        group-separator="."
-        :precision="3"
-        prefix="$"
-        :content-style="{ fontSize: '30px', color: '#5e7ce0'}"
-      >
+      <d-card>
+        <d-statistic :value-style="{ color: '#abf' }" title="Decline Rate" :value="38.3" suffix="%">
+          <template #prefix>
+            <d-icon name="bold" />
+          </template>
+        </d-statistic>
+      </d-card>
     </d-col>
   </d-row>
 </template>
@@ -203,11 +200,8 @@ Provide custom attributes to facilitate adding styles
 | precision          | `number`           | -        | Set numeric precision        |
 | suffix             | `string \| v-slot` | -        | Sets the suffix of the value |
 | prefix             | `string \| v-slot` | -        | Sets the prefix of the value |
-| title-style        | `style`            | -        | Title Style                  |
 | content-style      | `style`            | -        | Content style                |
 | animation-duration | `number`           | 2000     | Animation duration           |
-| delay              | `number`           | 0        | Delay animation time         |
 | value-from         | `number`           | 0        | Animation initial value      |
 | animation          | `boolean`          | false    | Turn on animation            |
-| easing             | `string`           | quartOut | Digital animation effect     |
 | start              | `boolean`          | false    | Start animation              |