From bcd1dfd7bd4038404d41bd844192dc1b53ebfadd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Tue, 14 Jun 2022 12:31:46 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E6=96=B0=E5=A2=9E=E6=95=B0?=
 =?UTF-8?q?=E5=AD=97=E6=BB=9A=E5=8A=A8=E7=BB=84=E4=BB=B6=E5=8A=A8=E6=80=81?=
 =?UTF-8?q?=E8=8E=B7=E5=8F=96=E6=95=B0=E6=8D=AE=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Decorates/Mores/Number/index.vue          | 44 ++++++++++++++-----
 1 file changed, 32 insertions(+), 12 deletions(-)

diff --git a/src/packages/components/Decorates/Mores/Number/index.vue b/src/packages/components/Decorates/Mores/Number/index.vue
index ccf30bd3..806ec4e1 100644
--- a/src/packages/components/Decorates/Mores/Number/index.vue
+++ b/src/packages/components/Decorates/Mores/Number/index.vue
@@ -6,13 +6,8 @@
       </span>
     </template>
     <span :style="`color:${numberColor};font-size:${numberSize}px`">
-      <n-number-animation
-        :from="from"
-        :to="to"
-        :duration="dur * 1000"
-        :show-separator="showSeparator"
-        :precision="precision"
-      ></n-number-animation>
+      <n-number-animation :from="option.from" :to="option.to" :duration="dur * 1000" :show-separator="showSeparator"
+        :precision="precision"></n-number-animation>
     </span>
     <template #suffix>
       <span :style="`color:${suffixColor};font-size:${numberSize}px`">
@@ -23,8 +18,10 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, toRefs } from 'vue'
+import { PropType, toRefs, ref, reactive, watch } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartDataFetch } from '@/hooks'
 
 const props = defineProps({
   chartConfig: {
@@ -32,21 +29,44 @@ const props = defineProps({
     required: true,
   },
 })
-
+const option = reactive({
+  from: 0,
+  to: 0,
+})
 const { w, h } = toRefs(props.chartConfig.attr)
-const {
+let {
   dur,
   showSeparator,
   prefixText,
   prefixColor,
   suffixText,
   suffixColor,
-  from,
-  to,
   precision,
   numberSize,
   numberColor,
 } = toRefs(props.chartConfig.option)
+
+const updateNumber = (newData: number) => {
+  // 原来的目标值作为新的数字动画的起始值
+  option.from = option.to
+  option.to = newData
+}
+
+watch(
+  () => props.chartConfig.option.from,
+  () => {
+    option.from = props.chartConfig.option.from
+  }, { immediate: true }
+)
+
+watch(
+  () => props.chartConfig.option.to,
+  () => {
+    option.to = props.chartConfig.option.to
+  }, { immediate: true }
+)
+
+useChartDataFetch(props.chartConfig, useChartEditStore, updateNumber)
 </script>
 <style lang="scss" scoped>
 @include go('decorates-number') {