From be27a0a99e0876831b7c3573956f92c568171563 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=91=E6=96=87=E5=8F=AF?= <1041367524@qq.com>
Date: Thu, 9 Jun 2022 11:41:45 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/default.vue  |  1 +
 src/views/home/index.vue | 23 ++++++++++++++++++++---
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 2da54df..1dfb112 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -28,6 +28,7 @@
     .layout-container {
         width: 100vw;
         height: 100vh;
+        min-width: 1200px;
         background-color: @color-white-dark;
     }
     .layout-default {
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index a3e6f1d..76787c6 100644
--- a/src/views/home/index.vue
+++ b/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));
-        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: [
@@ -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%;