perf: 优化

src/layouts/default.vue

@@ -28,6 +28,7 @@
     .layout-container {
         width: 100vw;
         height: 100vh;
+        min-width: 1200px;
         background-color: @color-white-dark;
     }
     .layout-default {

src/views/home/index.vue

@@ -238,6 +238,14 @@
     const handleRate = (num) => new Number(Math.abs(num || 0)).toFixed(2) + '%';
 
     const handleRoute = (route) => router.push(route);
+    const charts = ref({});
+    window.addEventListener('resize', () =>
+        setTimeout(() => {
+            Object.entries(unref(charts)).forEach((entry) => {
+                entry[1].resize();
+            });
+        }, 100)
+    );
     const handleChart = (
         selector,
         name,
@@ -245,8 +253,9 @@
         formatter = (params) =>
             `${params[0].axisValue}<br/><span style="color:${params[0].color};font-size:20px;margin-right:5px;">●</span>${params[0].seriesName}<b style="margin-left:10px;">${params[0].value}</b>`
     ) => {
-        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: [
@@ -266,7 +275,7 @@
                 left: '0',
                 right: '0',
                 bottom: '30px',
-                top: '30px',
+                top: '60px',
                 containLabel: true,
             },
             xAxis: {
@@ -381,6 +390,10 @@
                         cursor: pointer;
                         display: flex;
                         justify-content: space-between;
+                        &:nth-of-type(4),
+                        &:nth-of-type(5) {
+                            margin-top: 10px;
+                        }
                         &:hover {
                             color: var(--el-color-primary);
                         }
@@ -478,10 +491,14 @@
                 }
                 .right {
                     flex: 1;
+                    position: relative;
                     .header {
                         margin-bottom: @layout-space;
                         justify-content: flex-end;
                         align-items: center;
+                        position: absolute;
+                        top: -20px;
+                        right: 0;
                     }
                     .chart {
                         width: 100%;