fix: echarts切换页面时动画效果 https://gitee.com/dapppp/ruoyi-plus-vben5/issues/IANPQN

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 = {

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;

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,
     });
   }