fix: 解决组件数据无法更新的问题

src/packages/components/Decorates/Mores/Number/config.ts

@@ -4,12 +4,13 @@ import { NumberConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {
-  from: 50000,
-  to: 100000,
+  // 数据说明
+  dataset: 100000,
+  from: 0,
   dur: 3,
   precision: 0,
   showSeparator: true,
-  numberSize: 24,
+  numberSize: 34,
   numberColor: '#4a9ef8',
   prefixText: '￥',
   prefixColor: '#4a9ef8',

src/packages/components/Decorates/Mores/Number/config.vue

@@ -1,13 +1,6 @@
 <template>
   <CollapseItem name="内容" :expanded="true">
     <SettingItemBox name="数值">
-      <SettingItem name="起始值">
-        <n-input-number
-          v-model:value="optionData.from"
-          size="small"
-          :min="0"
-        ></n-input-number>
-      </SettingItem>
       <SettingItem name="终点值">
         <n-input-number
           v-model:value="optionData.to"
@@ -22,12 +15,6 @@
           :min="1"
         ></n-input-number>
       </SettingItem>
-      <SettingItem>
-        <n-space>
-          <n-switch v-model:value="optionData.showSeparator" size="small" />
-          <n-text>展示分割符</n-text>
-        </n-space>
-      </SettingItem>
       <SettingItem name="精度">
         <n-input-number
           v-model:value="optionData.precision"
@@ -35,6 +22,12 @@
           :min="0"
         ></n-input-number>
       </SettingItem>
+      <SettingItem>
+        <n-space>
+          <n-switch v-model:value="optionData.showSeparator" size="small" />
+          <n-text>展示分割符</n-text>
+        </n-space>
+      </SettingItem>
     </SettingItemBox>
 
     <SettingItemBox name="数值">

src/packages/components/Decorates/Mores/Number/index.vue

@@ -6,7 +6,7 @@
       </span>
     </template>
     <span :style="`color:${numberColor};font-size:${numberSize}px`">
-      <n-number-animation :from="option.from" :to="option.to" :duration="dur * 1000" :show-separator="showSeparator"
+      <n-number-animation :from="option.from" :to="option.dataset" :duration="dur * 1000" :show-separator="showSeparator"
         :precision="precision"></n-number-animation>
     </span>
     <template #suffix>
@@ -31,7 +31,7 @@ const props = defineProps({
 })
 const option = reactive({
   from: 0,
-  to: 0,
+  dataset: 0,
 })
 const { w, h } = toRefs(props.chartConfig.attr)
 let {
@@ -48,8 +48,8 @@ let {
 
 const updateNumber = (newData: number) => {
   // 原来的目标值作为新的数字动画的起始值
-  option.from = option.to
-  option.to = newData
+  option.from = option.dataset
+  option.dataset = newData
 }
 
 watch(
@@ -60,14 +60,15 @@ watch(
 )
 
 watch(
-  () => props.chartConfig.option.to,
+  () => props.chartConfig.option.dataset,
   () => {
-    option.to = props.chartConfig.option.to
+    option.dataset = props.chartConfig.option.dataset
   }, { immediate: true }
 )
 
 useChartDataFetch(props.chartConfig, useChartEditStore, updateNumber)
 </script>
+
 <style lang="scss" scoped>
 @include go('decorates-number') {
   display: flex;