Merge branch 'feat-im-0607-xwk' into msb_test

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));
+        let chart = charts.value[selector];
-        window.addEventListener('resize', () => nextTick(() => chart.resize()));
+        chart?.dispose();
+        chart = charts.value[selector] = echarts.init(document.querySelector(selector));
         const option = {
             gradientColor: ['#1DE7FF', '#249AFF', '#6F41FA', '#6F41FA'],
             visualMap: [
@@ -88,37 +97,35 @@
             grid: {
                 left: '0',
                 right: '0',
-                top: '5%',
+                bottom: '30px',
-                bottom: '0',
+                top: '60px',
                 containLabel: true,
             },
-            xAxis: [
+            xAxis: {
-                {
+                data: data.map((item) => item.label),
-                    data: data.map((item) => item.label),
+            },
-                },
+            yAxis: {
-            ],
+                minInterval: 1,
-            yAxis: [{}],
+            },
-            series: [
+            series: {
-                {
+                type: 'line',
-                    type: 'line',
+                name,
-                    name,
+                showSymbol: false,
-                    showSymbol: false,
+                smooth: true,
-                    smooth: true,
+                areaStyle: {
-                    areaStyle: {
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        {
-                            {
+                            offset: 0,
-                                offset: 0,
+                            color: 'rgba(29, 231, 255, 0.3)',
-                                color: 'rgba(29, 231, 255, 0.3)',
+                        },
-                            },
+                        {
-                            {
+                            offset: 1,
-                                offset: 1,
+                            color: 'rgba(29, 231, 255, 0)',
-                                color: 'rgba(29, 231, 255, 0)',
+                        },
-                            },
+                    ]),
-                        ]),
-                    },
-                    data: data.map((item) => item.value),
                 },
-            ],
+                data: data.map((item) => item.value),
+            },
         };
         chart.setOption(option);
     };