NEZ-3478 fix: 调整legend全选反选样式rel-24.01.29

2 files changed, 27 insertions, 8 deletions

diff --git a/nezha-fronted/src/assets/css/components/chart/chart.scss b/nezha-fronted/src/assets/css/components/chart/chart.scss
index 313d39d07..38769a5d4 100644
--- a/nezha-fronted/src/assets/css/components/chart/chart.scss
+++ b/nezha-fronted/src/assets/css/components/chart/chart.scss
@@ -377,10 +377,10 @@
   }
 }
 .legend-container {
+  overflow-y: auto;
   flex: 1;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
   font-size: 12px;
   text-align: left;
   line-height: 18px;
@@ -441,11 +441,18 @@
   }
 
   .legendSelect{
+    padding-left: 0 !important;
     width: 100%;
     cursor: unset;
     overflow: unset;
     span{
-      font-weight: bold;
+      visibility: hidden;
+      padding: 0px 6px;
+      height: 16px;
+      line-height: 16px;
+      text-align: center;
+      border: 1px solid $--border-color-base;
+      font-size: 12px;
       cursor: pointer;
       &:first-of-type{
         margin-right: 6px;
@@ -456,6 +463,12 @@
         color: $--color-text-secondary !important;
       }
     }
+    &.legend-item{
+      flex-shrink: 0;
+      height: 20px;
+      display: flex;
+      align-items: center;
+    }
   }
 
   // 表格类型
@@ -1194,12 +1207,18 @@
       background: $--color-primary;
     }
   }
+  &:hover .legendSelect {
+    span{
+      visibility: visible;
+    }
+  }
+  
 }
 
 .nz-chart__component--bottom{
   .legend-wrap{
     min-height: 38px;
-    max-height: 72px;
+    max-height: 92px;
     display: flex;
     flex-direction: column;
     .legend-resize{
@@ -1216,7 +1235,7 @@
 .panel-chart--fullscreen{
   .nz-chart__component--bottom{
     .legend-wrap{
-      max-height: 80px;
+      max-height: 100px;
     }
   }
 }
diff --git a/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeries.vue b/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeries.vue
index e82201217..9834e469d 100644
--- a/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeries.vue
+++ b/nezha-fronted/src/components/chart/chart/uplot/chartTimeSeries.vue
@@ -18,7 +18,6 @@
     </div>
     <chart-legend
       ref="legend"
-      style="flex-shrink: 0"
       v-if="hasLegend"
       :chart-data="chartData"
       :chart-info="chartInfo"
@@ -268,7 +267,7 @@ export default {
             }
           })
         ],
-        padding: [15, 15, 15, 15],
+        padding: [15, 15, 0, 15],
         // padding: [15, this.autoPadRight, 15, 15],
         legend: {
           show: false
@@ -285,13 +284,14 @@ export default {
         axes: [
           {
             scale: 'x',
-            gap: 5,
+            gap: 0,
             stroke: self.color[self.theme].label,
             grid: {
               show: true,
               stroke: self.color[self.theme].grid,
               width: 1
-            }
+            },
+            size: 20
           },
           {
             scale: 'left',