fix: 修复切换路由 分析图表不显示的问题

src/components/statistical/stastistical-chart.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script setup>
-import { computed, defineExpose, defineProps, defineEmits, onMounted, ref, watchEffect } from 'vue';
+import { computed, defineExpose, defineProps, defineEmits, onMounted, ref, watchEffect, watch } from 'vue';
 import { useStore } from 'vuex';
 import * as echarts from 'echarts/core';
 import { DataZoomComponent, GridComponent, LegendComponent, ToolboxComponent, TooltipComponent } from 'echarts/components';
@@ -59,10 +59,22 @@ onMounted(() => {
   });
 });
 
-watchEffect(() => {
-  if (!realtimeData.value) return;
-  const { data } = realtimeData.value;
-  if (!data || !data.length || !isMounted.value) return;
+// watchEffect(() => {
+//   if (!realtimeData.value) return;
+//   const { data } = realtimeData.value;
+//   if (!data || !data.length || !isMounted.value) return;
+//   initChart(data);
+// });
+
+watch([() => realtimeData.value, () => isMounted.value], ([v1, v2]) => {
+  if (!v1) {
+    noData.value = true;
+    return;
+  }
+  noData.value = false;
+  const { data } = v1;
+  if (!data || !data.length || !v2) return;
+
   initChart(data);
 });
 
@@ -71,7 +83,7 @@ function initChart(data) {
   const chartDom = document.getElementById('realtimeContainer');
   const canvasHeight = document.documentElement.clientHeight - props.searchHeight - 150;
   chartDom.style.height = `${canvasHeight}px`;
-  // myChart && myChart.dispose();
+  myChart && myChart.dispose();
   myChart = echarts.init(chartDom);
   render(data, defaultSelectedLegend.value);