From 48a6b14537927864f9b3463ae0cfc8b81e7ad5b1 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: Sat, 25 Jun 2022 20:34:50 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E7=8E=AF=E5=BD=A2?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E4=B8=8D=E4=BC=9A=E8=87=AA=E5=8A=A8=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Charts/Pies/PieCircle/index.vue           | 66 +++++++++----------
 1 file changed, 32 insertions(+), 34 deletions(-)

diff --git a/src/packages/components/Charts/Pies/PieCircle/index.vue b/src/packages/components/Charts/Pies/PieCircle/index.vue
index a4bf95da..0a552d0c 100644
--- a/src/packages/components/Charts/Pies/PieCircle/index.vue
+++ b/src/packages/components/Charts/Pies/PieCircle/index.vue
@@ -1,9 +1,9 @@
 <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">
-import {computed, PropType, reactive, watch} from 'vue'
+import { PropType, reactive, watch } from 'vue'
 import VChart from 'vue-echarts'
 import { use } from 'echarts/core'
 import { CanvasRenderer } from 'echarts/renderers'
@@ -12,14 +12,7 @@ import { mergeTheme } from '@/packages/public/chart'
 import config, { includes } from './config'
 import { useChartDataFetch } from '@/hooks'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { isPreview } from '@/utils'
-import {
-  DatasetComponent,
-  GridComponent,
-  TooltipComponent,
-  LegendComponent,
-  TitleComponent,
-} from 'echarts/components'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, TitleComponent } from 'echarts/components'
 
 const props = defineProps({
   themeSetting: {
@@ -36,36 +29,41 @@ const props = defineProps({
   }
 })
 
-use([
-  DatasetComponent,
-  CanvasRenderer,
-  PieChart,
-  GridComponent,
-  TooltipComponent,
-  LegendComponent,
-  TitleComponent
-])
+use([DatasetComponent, CanvasRenderer, PieChart, GridComponent, TooltipComponent, LegendComponent, TitleComponent])
 
 const option = reactive({
   value: {}
 })
 
+const dataHandle = (newData: any) => {
+  const d = parseFloat(`${newData}`) * 100
+  let config = props.chartConfig.option
+  config.title.text = d.toFixed(2) + '%'
+  config.series[0].data[0].value[0] = d
+  config.series[0].data[1].value[0] = 100 - d
+  option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+  option.value = props.chartConfig.option
+}
+
+// 配置时
 watch(
-    () => props.chartConfig.option.dataset,
-    (newData) => {
-      // console.log('update:'+newData)
-      const d = parseFloat(`${newData}`) * 100
-      let config = props.chartConfig.option
-      config.title.text = d.toFixed(2) + "%"
-      config.series[0].data[0].value[0] = d
-      config.series[0].data[1].value[0] = 100 - d
-      option.value = mergeTheme(config, props.themeSetting, includes)
-      option.value = config
-    },
-    {
-      immediate: true,
-    }
+  () => props.chartConfig.option.dataset,
+  newData => {
+    dataHandle(newData)
+  },
+  {
+    immediate: true
+  }
 )
 
-const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+// 预览时
+useChartDataFetch(props.chartConfig, useChartEditStore, (resData: number) => {
+  let d = parseFloat(`${resData}`) * 100
+  // @ts-ignore
+  option.value.title.text = d.toFixed(2) + '%'
+  // @ts-ignore
+  option.value.series[0].data[0].value[0] = d
+  // @ts-ignore
+  option.value.series[0].data[1].value[0] = 100 - d
+})
 </script>