From e4d64e3f20e74c22ed360fea386d7e6a8a1bfbf8 Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Mon, 2 Sep 2024 15:59:58 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20echarts=E5=88=87=E6=8D=A2=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E6=97=B6=E5=8A=A8=E7=94=BB=E6=95=88=E6=9E=9C=20https:?=
 =?UTF-8?q?//gitee.com/dapppp/ruoyi-plus-vben5/issues/IANPQN?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/monitor/cache/components/CommandChart.vue  |  9 +++++++--
 .../views/monitor/cache/components/MemoryChart.vue   |  6 ++++--
 packages/effects/plugins/src/echarts/use-echarts.ts  | 12 +++++++-----
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/apps/web-antd/src/views/monitor/cache/components/CommandChart.vue b/apps/web-antd/src/views/monitor/cache/components/CommandChart.vue
index 8840fee1..6eb168dd 100644
--- a/apps/web-antd/src/views/monitor/cache/components/CommandChart.vue
+++ b/apps/web-antd/src/views/monitor/cache/components/CommandChart.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { EChartsOption } from 'echarts';
 
-import { defineComponent, onMounted, ref, watch } from 'vue';
+import { defineComponent, onActivated, onMounted, ref, watch } from 'vue';
 
 import {
   EchartsUI,
@@ -21,7 +21,7 @@ export default defineComponent({
     expose({});
 
     const chartRef = ref<EchartsUIType>();
-    const { renderEcharts } = useEcharts(chartRef);
+    const { renderEcharts, resize } = useEcharts(chartRef);
 
     watch(
       () => props.data,
@@ -35,6 +35,11 @@ export default defineComponent({
     onMounted(() => {
       setEchartsOption(props.data);
     });
+    /**
+     * 从其他页面切换回来会有一个奇怪的动画效果 需要调用resize
+     * 该饼图组件需要关闭animation
+     */
+    onActivated(() => resize(false));
 
     function setEchartsOption(data: any[]) {
       const option: EChartsOption = {
diff --git a/apps/web-antd/src/views/monitor/cache/components/MemoryChart.vue b/apps/web-antd/src/views/monitor/cache/components/MemoryChart.vue
index e5fc17ec..c2688870 100644
--- a/apps/web-antd/src/views/monitor/cache/components/MemoryChart.vue
+++ b/apps/web-antd/src/views/monitor/cache/components/MemoryChart.vue
@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { EChartsOption } from 'echarts';
 
-import { defineComponent, onMounted, ref, watch } from 'vue';
+import { defineComponent, onActivated, onMounted, ref, watch } from 'vue';
 
 import {
   EchartsUI,
@@ -21,7 +21,7 @@ export default defineComponent({
     expose({});
 
     const memoryHtmlRef = ref<EchartsUIType>();
-    const { renderEcharts } = useEcharts(memoryHtmlRef);
+    const { renderEcharts, resize } = useEcharts(memoryHtmlRef);
 
     watch(
       () => props.data,
@@ -35,6 +35,8 @@ export default defineComponent({
     onMounted(() => {
       setEchartsOption(props.data);
     });
+    // 从其他页面切换回来会有一个奇怪的动画效果 需要调用resize
+    onActivated(resize);
 
     function getNearestPowerOfTen(num: number) {
       let power = 10;
diff --git a/packages/effects/plugins/src/echarts/use-echarts.ts b/packages/effects/plugins/src/echarts/use-echarts.ts
index d4282cd4..57b175c1 100644
--- a/packages/effects/plugins/src/echarts/use-echarts.ts
+++ b/packages/effects/plugins/src/echarts/use-echarts.ts
@@ -74,12 +74,14 @@ function useEcharts(chartRef: Ref<EchartsUIType>) {
     });
   };
 
-  function resize() {
+  function resize(withAnimation = true) {
     chartInstance?.resize({
-      animation: {
-        duration: 300,
-        easing: 'quadraticIn',
-      },
+      animation: withAnimation
+        ? {
+            duration: 300,
+            easing: 'quadraticIn',
+          }
+        : undefined,
     });
   }