perf: 图表优化

src/views/im/home/index.vue

@@ -68,9 +68,18 @@
     };
     watch(systemId, handleLoadOnline);
 
+    const charts = ref({});
+    window.addEventListener('resize', () =>
+        setTimeout(() => {
+            Object.entries(unref(charts)).forEach((entry) => {
+                entry[1].resize();
+            });
+        }, 100)
+    );
     const handleChart = (selector, name, data) => {
-        const chart = echarts.init(document.querySelector(selector));
-        window.addEventListener('resize', () => nextTick(() => chart.resize()));
+        let chart = charts.value[selector];
+        chart?.dispose();
+        chart = charts.value[selector] = echarts.init(document.querySelector(selector));
         const option = {
             gradientColor: ['#1DE7FF', '#249AFF', '#6F41FA', '#6F41FA'],
             visualMap: [
@@ -88,18 +97,17 @@
             grid: {
                 left: '0',
                 right: '0',
-                top: '5%',
-                bottom: '0',
+                bottom: '30px',
+                top: '60px',
                 containLabel: true,
             },
-            xAxis: [
-                {
+            xAxis: {
                 data: data.map((item) => item.label),
             },
-            ],
-            yAxis: [{}],
-            series: [
-                {
+            yAxis: {
+                minInterval: 1,
+            },
+            series: {
                 type: 'line',
                 name,
                 showSymbol: false,
@@ -118,7 +126,6 @@
                 },
                 data: data.map((item) => item.value),
             },
-            ],
         };
         chart.setOption(option);
     };