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

src/packages/components/Charts/Mores/Process/index.vue

@@ -3,7 +3,7 @@
     :type="type"
     :height="h"
     :processing="processing"
-    :percentage="dataset"
+    :percentage="option.dataset"
     :indicator-placement="indicatorPlacement"
     :color="color"
     :rail-color="railColor"
@@ -15,16 +15,16 @@
         fontSize: `${indicatorTextSize}px`
       }"
     >
-      {{dataset}} {{unit}}
+      {{option.dataset}} {{unit}}
     </n-text>
   </n-progress>
 </template>
 
 <script setup lang="ts">
-import { PropType, toRefs, watch } from 'vue'
+import { PropType, toRefs, watch, shallowReactive } from 'vue'
 import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import config from './config'
+import config, { option as configOption  } from './config'
 
 const props = defineProps({
   chartConfig: {
@@ -49,5 +49,19 @@ const {
   dataset
 } = toRefs(props.chartConfig.option)
 
-useChartDataFetch(props.chartConfig, useChartEditStore)
+const option = shallowReactive({
+  dataset: configOption.dataset
+})
+
+// 手动更新
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: any) => {
+    option.dataset = newData
+  }
+)
+// 预览更新
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: number) => {
+  option.dataset = newData
+})
 </script>

src/packages/components/Charts/Mores/WaterPolo/index.vue

@@ -1,11 +1,5 @@
 <template>
-  <v-chart
-    ref="vChartRef"
-    :theme="themeColor"
-    :option="option.value"
-    :manual-update="isPreview()"
-    autoresize
-  ></v-chart>
+  <v-chart :theme="themeColor" :option="option.value" autoresize></v-chart>
 </template>
 
 <script setup lang="ts">
@@ -15,7 +9,7 @@ import { use } from 'echarts/core'
 import 'echarts-liquidfill/src/liquidFill.js'
 import { CanvasRenderer } from 'echarts/renderers'
 import { GridComponent } from 'echarts/components'
-import config  from './config'
+import config from './config'
 import { isPreview } from '@/utils'
 import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
@@ -24,16 +18,16 @@ import { useChartDataFetch } from '@/hooks'
 const props = defineProps({
   themeSetting: {
     type: Object,
-    required: true,
+    required: true
   },
   themeColor: {
     type: Object,
-    required: true,
+    required: true
   },
   chartConfig: {
     type: Object as PropType<config>,
-    required: true,
-  },
+    required: true
+  }
 })
 
 use([CanvasRenderer, GridComponent])
@@ -41,7 +35,7 @@ use([CanvasRenderer, GridComponent])
 const chartEditStore = useChartEditStore()
 
 const option = reactive({
-  value: {},
+  value: {}
 })
 
 // 渐变色处理
@@ -53,36 +47,45 @@ watch(
       // 背景颜色
       props.chartConfig.option.series[0].backgroundStyle.color = themeColor[2]
       // 水球颜色
-      props.chartConfig.option.series[0].color[0].colorStops = [  
+      props.chartConfig.option.series[0].color[0].colorStops = [
         {
           offset: 0,
-          color: themeColor[0],
+          color: themeColor[0]
         },
         {
           offset: 1,
-          color: themeColor[1],
-        },
+          color: themeColor[1]
+        }
       ]
     }
     option.value = props.chartConfig.option
   },
   {
-    immediate: true,
+    immediate: true
   }
 )
 
-const updateDataset = (newData: string | number) => {
-  props.chartConfig.option.series[0].data = [parseFloat(`${newData}`).toFixed(2)]
-  option.value = props.chartConfig.option
+// 数据处理
+const dataHandle = (newData: number) => {
+  return parseFloat(newData.toFixed(2))
 }
 
+// 编辑
 watch(
   () => props.chartConfig.option.dataset,
-  newData => updateDataset(newData),
+  newData => {
+    console.log(dataHandle(newData))
+    props.chartConfig.option.series[0].data = [dataHandle(newData)]
+    option.value = props.chartConfig.option
+  },
   {
-    immediate: true,
+    immediate: true
   }
 )
 
-const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+// 预览
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: number) => {
+  // @ts-ignore
+  option.value.series[0].data = [dataHandle(newData)]
+})
 </script>

src/packages/components/Charts/Pies/PieCircle/index.vue

@@ -48,9 +48,7 @@ const dataHandle = (newData: any) => {
 // 配置时
 watch(
   () => props.chartConfig.option.dataset,
-  newData => {
-    dataHandle(newData)
-  },
+  newData => dataHandle(newData),
   {
     immediate: true
   }