From 37c29e02cb7e27d058e7ebbd04467a48b4162689 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Sat, 10 Jul 2021 11:07:54 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20statisticslegend=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/charts/StatisticsLegend.vue | 43 +++++++++-------------
 src/components/charts/panel.scss           |  1 -
 2 files changed, 18 insertions(+), 26 deletions(-)

diff --git a/src/components/charts/StatisticsLegend.vue b/src/components/charts/StatisticsLegend.vue
index 4d7edc78..a19e93e1 100644
--- a/src/components/charts/StatisticsLegend.vue
+++ b/src/components/charts/StatisticsLegend.vue
@@ -1,17 +1,15 @@
 <template>
   <div class="chart__legend">
     <div class="chart__table-top">
-      <div class="chart__table-box">
-        <div>Average</div>
-        <div>Maximum</div>
-      </div>
+      <div>Average</div>
+      <div>Maximum</div>
     </div>
     <div class="chart__table-below">
       <div v-for="(item,index) in data" :key="index" class="table-below-box">
         <div class="table__below-color"><div :style="{backgroundColor: getChartColor(index)}"></div></div>
         <div class="table__below-title" :title="item.legend">{{item.legend}}</div>
         <div class="table__below-statistics" :title="item.aggregation.max">{{item.aggregation.max}}</div>
-        <div class="table__below-statistics table__below-statistics-2" :title="item.aggregation.avg">{{item.aggregation.avg}}</div>
+        <div class="table__below-statistics" :title="item.aggregation.avg">{{item.aggregation.avg}}</div>
       </div>
     </div>
   </div>
@@ -45,31 +43,29 @@ export default {
 </script>
 <style lang="scss" scoped>
 .chart__legend {
-  width: 455px;
-  height: 95px;
+  width: calc(100% - 60px);
+  height: 105px;
   border: 1px solid #E7EAED;
-  color:#5f6368;
+  color: #5f6368;
   margin: auto;
 }
 .chart__table-top {
-  width: 455px;
+  width: 100%;
   height: 30px;
-  border-bottom: #E7EAED 0.96px solid;
+  border-bottom: #E7EAED 1px solid;
   display: flex;
-  flex-direction:row-reverse;
-  .chart__table-box {
-    width: 185px;
-    height: 30px;
-    display: flex;
-    align-items: center;
-    font-size: 14px;
-    color: #0091FF;
-    font-weight: 400;
-    justify-content: space-around;
+  justify-content: flex-end;
+  padding-right: 15px;
+
+  div {
+    width: 80px;
+    font-size: 13px;
+    line-height: 28px;
+    color: $--color-primary;
   }
 }
 .chart__table-below {
-  width: 455px;
+  width: 100%;
   height: calc(100% - 30px);
   overflow: auto;
   font-size: 13px;
@@ -106,14 +102,11 @@ export default {
     white-space: nowrap;
   }
   .table__below-statistics {
-    width: 86px;
+    width: 80px;
     flex-shrink: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  .table__below-statistics-2 {
-    width: 70px;
-  }
 }
 </style>
diff --git a/src/components/charts/panel.scss b/src/components/charts/panel.scss
index 0129006a..e214edd9 100644
--- a/src/components/charts/panel.scss
+++ b/src/components/charts/panel.scss
@@ -168,7 +168,6 @@
   }
   &>.cn-chart__tabs {
     padding: 10px 25px 10px 15px;
-    overflow: auto;
 
     .el-tabs__nav-wrap::after {
       height: 1px;