diff --git a/src/views/Charts/Charts.vue b/src/views/Charts/Charts.vue
index deee8953..5831b151 100644
--- a/src/views/Charts/Charts.vue
+++ b/src/views/Charts/Charts.vue
@@ -3,9 +3,7 @@
         <div class="options-container" style="margin-top: 0">
             <span class="header">{{ t('view.charts.header') }}</span>
         </div>
-        <keep-alive>
-            <InstanceActivity />
-        </keep-alive>
+        <InstanceActivity />
         <el-backtop target="#chart" :right="30" :bottom="30"></el-backtop>
     </div>
 </template>
diff --git a/src/views/Charts/components/InstanceActivity.vue b/src/views/Charts/components/InstanceActivity.vue
index 09647225..00f8ef6b 100644
--- a/src/views/Charts/components/InstanceActivity.vue
+++ b/src/views/Charts/components/InstanceActivity.vue
@@ -124,7 +124,7 @@
 </template>
 
 <script setup>
-    import { nextTick, onActivated, onBeforeMount, onDeactivated, onMounted, ref, watch } from 'vue';
+    import { nextTick, onActivated, onBeforeMount, onBeforeUnmount, onDeactivated, onMounted, ref, watch } from 'vue';
     import { ArrowLeft, ArrowRight, InfoFilled, Refresh, Setting, WarningFilled } from '@element-plus/icons-vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
@@ -221,19 +221,19 @@
         }
     );
 
-    onActivated(() => {
-        // first time also call activated
-        if (echartsInstance.value) {
-            reloadData();
-        }
-    });
+    // onActivated(() => {
+    //     // first time also call activated
+    //     if (echartsInstance.value) {
+    //         reloadData();
+    //     }
+    // });
 
-    onDeactivated(() => {
-        // prevent resize animation when switch tab
-        if (resizeObserver.value) {
-            resizeObserver.value.disconnect();
-        }
-    });
+    // onDeactivated(() => {
+    //     // prevent resize animation when switch tab
+    //     if (resizeObserver.value) {
+    //         resizeObserver.value.disconnect();
+    //     }
+    // });
 
     onBeforeMount(() => {
         initializeSettings();
@@ -253,6 +253,13 @@
         }
     });
 
+    onBeforeUnmount(() => {
+        if (resizeObserver.value) {
+            resizeObserver.value.disconnect();
+            resizeObserver.value = null;
+        }
+    });
+
     reloadData = async function () {
         isLoading.value = true;
         try {
diff --git a/src/views/Charts/components/InstanceActivityDetail.vue b/src/views/Charts/components/InstanceActivityDetail.vue
index 0e157447..9618b123 100644
--- a/src/views/Charts/components/InstanceActivityDetail.vue
+++ b/src/views/Charts/components/InstanceActivityDetail.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script setup>
-    import { computed, nextTick, onDeactivated, onMounted, ref, watch } from 'vue';
+    import { computed, nextTick, onBeforeUnmount, onDeactivated, onMounted, ref, watch } from 'vue';
     import { storeToRefs } from 'pinia';
 
     import dayjs from 'dayjs';
@@ -83,9 +83,18 @@
         initEcharts();
     });
 
-    onDeactivated(() => {
-        // prevent switch tab play resize animation
-        resizeObserver.value.disconnect();
+    // onDeactivated(() => {
+    //     // prevent switch tab play resize animation
+    //     if (resizeObserver.value) {
+    //         resizeObserver.value.disconnect();
+    //     }
+    // });
+
+    onBeforeUnmount(() => {
+        if (resizeObserver.value) {
+            resizeObserver.value.disconnect();
+            resizeObserver.value = null;
+        }
     });
 
     function initResizeObserver() {