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,92 +1,95 @@
 <template>
-  <div ref="legendArea" class='legend-container'>
+  <div class="legend-wrap" ref="legendDom">
-    <!-- 带统计的是table形式 -->
+    <div v-if="isFullscreen" class="legend-resize" @mousedown="legendResize"></div>
-    <template v-if="isStatistics">
+    <div ref="legendArea" class='legend-container'>
-      <div class="legend--table">
+      <!-- 带统计的是table形式 -->
-        <div class="legend--table-row table-header">
+      <template v-if="isStatistics">
-          <div class="legend--table-cell"></div>
+        <div class="legend--table">
-          <div v-for="statistics in chartInfo.param.legend.values" :key="statistics" class="legend--table-cell">
+          <div class="legend--table-row table-header">
-            <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>
+            <div class="legend--table-cell"></div>
-            <span v-else>--</span>
+            <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>
+              <span v-else>--</span>
+            </div>
+          </div>
+          <!-- 左y轴legend -->
+          <div
+            v-for="(item, index) in legends"
+            :key="index"
+            v-show="!isTimeSeries||series[index].yAxisIndex!=1"
+            :class="{'row--inactive': isGrey[index]}"
+            class="legend--table-row"
+            @click="clickLegend(item.name, index)"
+            @mouseenter="hoverLegend(item.name, index,'highlight')"
+            @mouseleave="hoverLegend(item.name, index,'downplay')"
+          >
+            <div :title="item.alias ? item.alias : item.name" class="legend--table-cell">
+              <i v-if="isTimeSeries&&series[index].yAxisIndex==0" :style="{color: item.color}" class="yAxis-icon nz-icon nz-icon-zuozongzhou"></i>
+              <span v-else :style="{background: item.color}" class="legend-shape"></span>
+              <span :title="item.alias ? item.alias : item.name">{{item.alias ? item.alias : item.name}}</span>
+              <i class="nz-icon nz-icon-override" @click.stop="onCopy(item.alias ? item.alias : item.name)" :title="$t('overall.copyText')"></i>
+            </div>
+            <div v-for="(statistics, index) in item.statistics" :key="index" :class="{'legend-item--inactive': isGrey[index]}" class="legend--table-cell">{{(keepTwoDecimalFull(statistics.value))}}</div>
+          </div>
+          <!-- 右y轴legend -->
+          <div
+            v-for="(item, index) in legends"
+            :key="index+'right'"
+            v-show="isTimeSeries&&series[index].yAxisIndex==1"
+            :class="{'row--inactive': isGrey[index]}"
+            class="legend--table-row"
+            @click="clickLegend(item.name, index)"
+            @mouseenter="hoverLegend(item.name, index,'highlight')"
+            @mouseleave="hoverLegend(item.name, index,'downplay')"
+          >
+            <div :title="item.alias ? item.alias : item.name" class="legend--table-cell">
+              <i v-if="isTimeSeries&&series[index].yAxisIndex==1" :style="{color: item.color}" class="yAxis-icon nz-icon nz-icon-youzongzhou"></i>
+              <span v-else :style="{background: item.color}" class="legend-shape"></span>
+              <span :title="item.alias ? item.alias : item.name">{{item.alias ? item.alias : item.name}}</span>
+              <i class="nz-icon nz-icon-override" @click.stop="onCopy(item.alias ? item.alias : item.name)" :title="$t('overall.copyText')"></i>
+            </div>
+            <div v-for="(statistics, index) in item.statistics" :key="index" :class="{'legend-item--inactive': isGrey[index]}" class="legend--table-cell">{{(keepTwoDecimalFull(statistics.value, 'right'))}}</div>
           </div>
         </div>
+      </template>
+      <!-- 否则是普通形式 -->
+      <template v-else>
         <!-- 左y轴legend -->
         <div
           v-for="(item, index) in legends"
           :key="index"
           v-show="!isTimeSeries||series[index].yAxisIndex!=1"
-          :class="{'row--inactive': isGrey[index]}"
+          :class="{'legend-item--inactive': isGrey[index]}"
-          class="legend--table-row"
+          :title="item.alias ? item.alias : item.name"
+          class="legend-item"
           @click="clickLegend(item.name, index)"
           @mouseenter="hoverLegend(item.name, index,'highlight')"
           @mouseleave="hoverLegend(item.name, index,'downplay')"
         >
-          <div :title="item.alias ? item.alias : item.name" class="legend--table-cell">
+          <i v-if="isTimeSeries&&series[index].yAxisIndex==0" :style="{color: item.color}" class="yAxis-icon nz-icon nz-icon-zuozongzhou"></i>
-            <i v-if="isTimeSeries&&series[index].yAxisIndex==0" :style="{color: item.color}" class="yAxis-icon nz-icon nz-icon-zuozongzhou"></i>
+          <span v-else :style="{background: item.color}" class="legend-shape"></span>
-            <span v-else :style="{background: item.color}" class="legend-shape"></span>
+          <span>{{item.alias ? item.alias : item.name.split('-')[0]}}</span>
-            <span :title="item.alias ? item.alias : item.name">{{item.alias ? item.alias : item.name}}</span>
+          <i class="nz-icon nz-icon-override" @click.stop="onCopy(item.alias ? item.alias : item.name.split('-')[0])" :title="$t('overall.copyText')"></i>
-            <i class="nz-icon nz-icon-override" @click.stop="onCopy(item.alias ? item.alias : item.name)" :title="$t('overall.copyText')"></i>
-          </div>
-          <div v-for="(statistics, index) in item.statistics" :key="index" :class="{'legend-item--inactive': isGrey[index]}" class="legend--table-cell">{{(keepTwoDecimalFull(statistics.value))}}</div>
         </div>
         <!-- 右y轴legend -->
         <div
           v-for="(item, index) in legends"
           :key="index+'right'"
           v-show="isTimeSeries&&series[index].yAxisIndex==1"
-          :class="{'row--inactive': isGrey[index]}"
+          :class="{'legend-item--inactive': isGrey[index]}"
-          class="legend--table-row"
+          :title="item.alias ? item.alias : item.name"
+          class="legend-item"
           @click="clickLegend(item.name, index)"
           @mouseenter="hoverLegend(item.name, index,'highlight')"
           @mouseleave="hoverLegend(item.name, index,'downplay')"
         >
-          <div :title="item.alias ? item.alias : item.name" class="legend--table-cell">
+          <i v-if="isTimeSeries&&series[index].yAxisIndex==1" :style="{color: item.color}" class="yAxis-icon nz-icon nz-icon-youzongzhou"></i>
-            <i v-if="isTimeSeries&&series[index].yAxisIndex==1" :style="{color: item.color}" class="yAxis-icon nz-icon nz-icon-youzongzhou"></i>
+          <span v-else :style="{background: item.color}" class="legend-shape"></span>
-            <span v-else :style="{background: item.color}" class="legend-shape"></span>
+          <span>{{item.alias ? item.alias : item.name.split('-')[0]}}</span>
-            <span :title="item.alias ? item.alias : item.name">{{item.alias ? item.alias : item.name}}</span>
+          <i class="nz-icon nz-icon-override" @click.stop="onCopy(item.alias ? item.alias : item.name.split('-')[0])" :title="$t('overall.copyText')"></i>
-            <i class="nz-icon nz-icon-override" @click.stop="onCopy(item.alias ? item.alias : item.name)" :title="$t('overall.copyText')"></i>
-          </div>
-          <div v-for="(statistics, index) in item.statistics" :key="index" :class="{'legend-item--inactive': isGrey[index]}" class="legend--table-cell">{{(keepTwoDecimalFull(statistics.value, 'right'))}}</div>
         </div>
-      </div>
+      </template>
-    </template>
+    </div>
-     <!-- 否则是普通形式 -->
-    <template v-else>
-      <!-- 左y轴legend -->
-      <div
-        v-for="(item, index) in legends"
-        :key="index"
-        v-show="!isTimeSeries||series[index].yAxisIndex!=1"
-        :class="{'legend-item--inactive': isGrey[index]}"
-        :title="item.alias ? item.alias : item.name"
-        class="legend-item"
-        @click="clickLegend(item.name, index)"
-        @mouseenter="hoverLegend(item.name, index,'highlight')"
-        @mouseleave="hoverLegend(item.name, index,'downplay')"
-      >
-        <i v-if="isTimeSeries&&series[index].yAxisIndex==0" :style="{color: item.color}" class="yAxis-icon nz-icon nz-icon-zuozongzhou"></i>
-        <span v-else :style="{background: item.color}" class="legend-shape"></span>
-        <span>{{item.alias ? item.alias : item.name.split('-')[0]}}</span>
-        <i class="nz-icon nz-icon-override" @click.stop="onCopy(item.alias ? item.alias : item.name.split('-')[0])" :title="$t('overall.copyText')"></i>
-      </div>
-      <!-- 右y轴legend -->
-      <div
-        v-for="(item, index) in legends"
-        :key="index+'right'"
-        v-show="isTimeSeries&&series[index].yAxisIndex==1"
-        :class="{'legend-item--inactive': isGrey[index]}"
-        :title="item.alias ? item.alias : item.name"
-        class="legend-item"
-        @click="clickLegend(item.name, index)"
-        @mouseenter="hoverLegend(item.name, index,'highlight')"
-        @mouseleave="hoverLegend(item.name, index,'downplay')"
-      >
-        <i v-if="isTimeSeries&&series[index].yAxisIndex==1" :style="{color: item.color}" class="yAxis-icon nz-icon nz-icon-youzongzhou"></i>
-        <span v-else :style="{background: item.color}" class="legend-shape"></span>
-        <span>{{item.alias ? item.alias : item.name.split('-')[0]}}</span>
-        <i class="nz-icon nz-icon-override" @click.stop="onCopy(item.alias ? item.alias : item.name.split('-')[0])" :title="$t('overall.copyText')"></i>
-      </div>
-    </template>
   </div>
 </template>
 
@@ -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高亮