NEZ-3477 feat: 图表大化页面支持调整图表和legend的显示比例

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

@@ -230,11 +230,6 @@
   border: none;
   .nz-chart__component {
     position: relative;
-    &.nz-chart__component--bottom {
-      .legend-container {
-        max-height: 135px;
-      }
-    }
   }
 }
 .chart__canvas {
@@ -272,11 +267,6 @@
     }
     &.nz-chart__component--bottom {
       flex-direction: column;
-      .legend-container {
-        width: 100%;
-        max-height: 80px;
-        min-height: 25px;
-      }
     }
     &.nz-chart__component--right {
       flex-direction: row;
@@ -287,11 +277,6 @@
     &.nz-chart__component--right, &.nz-chart__component--left {
       .legend-container {
         flex-direction: column;
-        padding-top: 25px;
-        width: unset;
-        max-width: 50%;
-        max-height: unset;
-        min-height: unset;
       }
     }
     .legend-box{
@@ -403,7 +388,6 @@
   font-size: 12px;
   text-align: left;
   line-height: 18px;
-  padding: 0 10px 3px 10px;
   box-sizing: border-box;
 
   .legend-item {
@@ -1152,3 +1136,67 @@
 .panel-chart:hover .uplot-toolbox {
   display: block;
 }
+
+.legend-wrap{
+  padding: 5px 10px 5px 10px;
+  box-sizing: border-box;
+  .legend-resize{
+    flex-shrink: 0;
+    background-color: $--border-color-light;
+    &:hover{
+      background: $--color-primary;
+    }
+  }
+}
+
+.nz-chart__component--bottom{
+  .legend-wrap{
+    min-height: 38px;
+    max-height: 72px;
+    display: flex;
+    flex-direction: column;
+    .legend-resize{
+      margin-bottom: 5px;
+      cursor: ns-resize;
+      width: 100%;
+      height: 2px;
+    }
+  }
+}
+.panel-chart--fullscreen{
+  .nz-chart__component--bottom{
+    .legend-wrap{
+      max-height: 80px;
+    }
+  }
+}
+
+.nz-chart__component--left{
+  .legend-wrap{
+    padding-top: 20px;
+    max-width: 50%;
+    display: flex;
+    flex-direction: row-reverse;
+    .legend-resize{
+      margin-left: 5px;
+      cursor: ew-resize;
+      width: 2px;
+      height: 100%;
+    }
+  } 
+}
+
+.nz-chart__component--right{
+  .legend-wrap{
+    padding-top: 15px;
+    max-width: 50%;
+    display: flex;
+    .legend-resize{
+      margin-right: 5px;
+      cursor: ew-resize;
+      width: 2px;
+      height: 100%;
+    }
+  }
+}
+

nezha-fronted/src/assets/css/components/common/alert/alertMessageInfo.scss

@@ -432,9 +432,6 @@
               .integration-dashboard{
                 box-sizing: border-box;
                 height: 100%;
-                .nz-chart__component.nz-chart__component--bottom .legend-container {
-                  max-height: 60px;
-                }
                 .dashboard-container{
                   height: 100%;
                   .table-list{

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

@@ -1,4 +1,6 @@
 <template>
+  <div class="legend-wrap" ref="legendDom">
+    <div v-if="isFullscreen" class="legend-resize" @mousedown="legendResize"></div>
     <div ref="legendArea" class='legend-container'>
       <!-- 带统计的是table形式 -->
       <template v-if="isStatistics">
@@ -88,6 +90,7 @@
         </div>
       </template>
     </div>
+  </div>
 </template>
 
 <script>
@@ -129,6 +132,74 @@ export default {
     }
   },
   methods: {
+    legendResize (e) {
+      const placement = this.$lodash.get(this.chartInfo, 'param.legend.placement', 'bottom')
+      if (placement === 'bottom') {
+        this.verticalResize(e)
+      } else {
+        this.horizontalResize(e, placement)
+      }
+    },
+    verticalResize (e) {
+      const legendDom = this.$refs.legendDom
+      // 得到点击时dom的初始高度
+      const chartTotalHeight = this.$parent.$el.offsetHeight
+      const legendInitialHeight = legendDom.offsetHeight
+      // 点击时鼠标的Y轴位置
+      const mouseInitialY = e.clientY
+
+      document.onmousemove = (e) => {
+        e.preventDefault()
+        // 得到鼠标拖动的距离
+        const mouseMoveY = e.clientY - mouseInitialY
+
+        legendDom.style.maxHeight = 'unset'
+        legendDom.style.height = legendInitialHeight - mouseMoveY + 'px'
+
+        // 最大 最小高度限制
+        if (parseInt(legendDom.style.height) >= chartTotalHeight - 100) {
+          legendDom.style.height = chartTotalHeight - 100 + 'px'
+        }
+        if (parseInt(legendDom.style.height) <= 38) {
+          legendDom.style.height = 38 + 'px'
+        }
+
+        this.$parent.resize()
+      }
+      document.onmouseup = () => {
+        document.onmousemove = null
+      }
+    },
+    horizontalResize (e, placement) {
+      const legendDom = this.$refs.legendDom
+      // 得到点击时dom的初始宽度
+      const chartTotalWidth = this.$parent.$el.offsetWidth
+      const legendInitialWidth = legendDom.offsetWidth
+      // 点击时鼠标的X轴位置
+      const mouseInitialX = e.clientX
+
+      document.onmousemove = (e) => {
+        e.preventDefault()
+        // 得到鼠标拖动的距离
+        const mouseMoveX = e.clientX - mouseInitialX
+
+        legendDom.style.maxWidth = 'unset'
+        legendDom.style.width = placement === 'right' ? (legendInitialWidth - mouseMoveX + 'px') : (legendInitialWidth + mouseMoveX + 'px')
+
+        // 最大 最小宽度限制
+        if (parseInt(legendDom.style.width) >= chartTotalWidth - 100) {
+          legendDom.style.width = chartTotalWidth - 100 + 'px'
+        }
+        if (parseInt(legendDom.style.width) <= 50) {
+          legendDom.style.width = 50 + 'px'
+        }
+
+        this.$parent.resize()
+      }
+      document.onmouseup = () => {
+        document.onmousemove = null
+      }
+    },
     clickLegend (legendName, index) {
       /* 点击legend
           * 1.当前如果是全高亮状态，则全部置灰，只留被点击的legend高亮