fix: legend 调整比例增加图标、样式修改

nezha-fronted/src/assets/css/components/chart/chart.scss

@@ -513,8 +513,10 @@
     }
     .legend--table-cell {
       display: table-cell;
-      padding: 1px 5px;
+      padding: 0px 5px;
       box-sizing: border-box;
+      line-height: 20px;
+      vertical-align: middle;
       .legend--table-box{
         display: flex;
         align-items: center;
@@ -1201,10 +1203,24 @@
   padding: 5px 10px 5px 10px;
   box-sizing: border-box;
   .legend-resize{
+    position: relative;
     flex-shrink: 0;
-    background-color: $--border-color-light;
+    .legend-resize-line{
-    &:hover{
+      background-color: $--border-color-light;
-      background: $--color-primary;
+      position: absolute;
+      margin: auto;
+    }
+    &:hover .legend-resize-line{
+      background-color: $--color-primary;
+    }
+    .nz-icon{
+      font-size: 16px;
+      color: $--color-text-regular;
+      width: 16px;
+      height: 2px;
+      line-height: 0;
+      position: absolute;
+      margin: auto;
     }
   }
   &:hover .legendSelect {
@@ -1218,14 +1234,24 @@
 .nz-chart__component--bottom{
   .legend-wrap{
     min-height: 38px;
-    max-height: 92px;
+    max-height: 90px;
     display: flex;
     flex-direction: column;
     .legend-resize{
-      margin-bottom: 5px;
       cursor: ns-resize;
       width: 100%;
-      height: 2px;
+      height: 8px;
+      .legend-resize-line{
+        width: 100%;
+        height: 2px;
+        top: 0;
+        bottom: 0;
+      }
+      .nz-icon{
+        top: -2px;
+        left: 0;
+        right: 0;
+      }
     }
     .legend-list{
       flex-wrap: wrap;
@@ -1235,7 +1261,7 @@
 .panel-chart--fullscreen{
   .nz-chart__component--bottom{
     .legend-wrap{
-      max-height: 100px;
+      max-height: 238px;
     }
   }
 }
@@ -1247,10 +1273,21 @@
     display: flex;
     flex-direction: row-reverse;
     .legend-resize{
-      margin-left: 5px;
       cursor: ew-resize;
-      width: 2px;
+      width: 8px;
       height: 100%;
+      .legend-resize-line{
+        width: 2px;
+        height: 100%;
+        left: 0;
+        right: 0;
+      }
+      .nz-icon{
+        transform: rotate(90deg);
+        top: 0;
+        bottom: 0;
+        right: -10px;
+      }
     }
     .legend-list{
       flex: 1;
@@ -1262,13 +1299,24 @@
 .nz-chart__component--right{
   .legend-wrap{
     padding-top: 15px;
-    max-width: 50%;
+    max-width: 30%;
     display: flex;
     .legend-resize{
-      margin-right: 5px;
       cursor: ew-resize;
-      width: 2px;
+      width: 8px;
       height: 100%;
+      .legend-resize-line{
+        width: 2px;
+        height: 100%;
+        left: 0;
+        right: 0;
+      }
+      .nz-icon{
+        transform: rotate(90deg);
+        top: 0;
+        bottom: 0;
+        left: -10px;
+      }
     }
     .legend-list{
       flex: 1;

nezha-fronted/src/assets/css/font/iconfont.json

@@ -5,6 +5,27 @@
   "css_prefix_text": "nz-icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "1570796",
+      "name": "四个圆点",
+      "font_class": "sigeyuandian",
+      "unicode": "e6c1",
+      "unicode_decimal": 59073
+    },
+    {
+      "icon_id": "20104483",
+      "name": "反选",
+      "font_class": "fanxuan",
+      "unicode": "e612",
+      "unicode_decimal": 58898
+    },
+    {
+      "icon_id": "20104507",
+      "name": "全选",
+      "font_class": "quanxuan",
+      "unicode": "e617",
+      "unicode_decimal": 58903
+    },
     {
       "icon_id": "9010685",
       "name": "堆叠柱状图",

nezha-fronted/src/components/chart/chart/legend.vue

@@ -1,6 +1,9 @@
 <template>
-  <div class="legend-wrap" ref="legendDom">
+  <div class="legend-wrap" :class="{'isStatistics':isStatistics}" ref="legendDom">
-    <div v-if="isFullscreen" class="legend-resize" @mousedown="legendResize"></div>
+    <div v-if="isFullscreen" class="legend-resize" @mousedown="legendResize">
+      <div class="legend-resize-line"></div>
+      <i class="nz-icon nz-icon-sigeyuandian"></i>
+    </div>
     <div ref="legendArea" class='legend-container'>
       <!-- 带统计的是table形式 -->
       <template v-if="isStatistics">
@@ -8,7 +11,7 @@
           <div class="legend--table-row table-header">
             <div class="legend--table-cell legendSelect">
               <span @click="legendAll" :title="$t('dashboard.legendAll')">{{$t('dashboard.legendAll')}}</span><!--
-           --><span @click="legendInvert" :title="$t('dashboard.legendInvert')" :class="{'legendSelect-disabled':isGrey.every(item=>!item),}">{{$t('dashboard.legendInvert')}}</span>
+           --><span @click="legendInvert" :title="$t('dashboard.legendInvert')" :class="{'legendSelect-disabled':isGrey.every(item=>!item)}">{{$t('dashboard.legendInvert')}}</span>
             </div>
             <div v-for="statistics in chartInfo.param.legend.values" :key="statistics" class="legend--table-cell">
               <span v-if="statisticsList.find(key=>key.value === statistics)" :title="$t(statisticsList.find(key=>key.value === statistics).label)">{{$t(statisticsList.find(key=>key.value === statistics).label)}}</span>
@@ -71,7 +74,7 @@
       <template v-else>
         <div class="legend-item legendSelect">
           <span @click="legendAll" :title="$t('dashboard.legendAll')">{{$t('dashboard.legendAll')}}</span><!--
-       --><span @click="legendInvert" :title="$t('dashboard.legendInvert')" :class="{'legendSelect-disabled':isGrey.every(item=>!item),}">{{$t('dashboard.legendInvert')}}</span>
+       --><span @click="legendInvert" :title="$t('dashboard.legendInvert')" :class="{'legendSelect-disabled':isGrey.every(item=>!item)}">{{$t('dashboard.legendInvert')}}</span>
         </div>
         <!-- 左y轴legend -->
         <div class="legend-list">

nezha-fronted/src/components/chart/chart/uplot/chartTimeSeries.vue

@@ -267,7 +267,7 @@ export default {
             }
           })
         ],
-        padding: [15, 15, 0, 15],
+        padding: [15, 15, 10, 15],
         // padding: [15, this.autoPadRight, 15, 15],
         legend: {
           show: false