fix：修改仪表板 legend显示的位置

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

@@ -445,6 +445,7 @@
   box-sizing: border-box;
   .chart-gauge-item{
     display: flex;
+    position: relative;
     justify-content: center;
     align-items: center;
     font-size: 30px;
@@ -454,6 +455,25 @@
     padding: 2px;
     overflow: hidden;
     color: $--color-text-regular;
+    flex-direction: column;
+  }
+  .chart-gauge-content {
+    flex: 1;
+    width: 100%;
+  }
+  .chart-gauge-legend{
+    position: absolute;
+    bottom: 28%;
+    height: 24px;
+    line-height: 24px;
+    font-size: 16px;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0 10px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: center;
   }
 }
 .chart-diagram{

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

@@ -3,32 +3,18 @@
     <div
       v-for="(item,index) in gaugeData" :key="index"
       class="chart-gauge-item"
-      :id="isFullscreen?('chart-gauge-screen-' + chartInfo.id + '-' + index):('chart-gauge-' + chartInfo.id + '-' + index)"
       :style="{height:item.height+'px',width:item.width + 'px'}"
     >
-<!--      :style="{background:item.mapping ? item.mapping.color.bac : false,height:item.height+'px',width:item.width + 'px'}"-->
+      <div
-<!--      <span v-if="chartInfo.param.text==='all'">-->
+        :id="isFullscreen?('chart-gauge-screen-' + chartInfo.id + '-' + index):('chart-gauge-' + chartInfo.id + '-' + index)"
-<!--        <span v-if="item.mapping" :style="{color:item.mapping.color.text}">-->
+        class="chart-gauge-content"
-<!--          {{item.legend}}<br/><span>{{handleDisplay(item.mapping.display, { ...item.label, value: item.showValue })}}</span>-->
+      ></div>
-<!--        </span>-->
+      <div
-<!--        <span v-else>{{item.legend}}<br/><span>{{item.showValue}}</span></span>-->
+        v-if="item.height > 48 && chartInfo.param &&( chartInfo.param.text === 'legend' || chartInfo.param.text === 'all' )"
-<!--      </span>-->
+        class="chart-gauge-legend"
-<!--      <span v-if="chartInfo.param.text==='legend'">-->
+      >
-<!--        <span v-if="item.mapping" :style="{color:item.mapping.color.text}">-->
+        {{item.alias}}
-<!--           {{item.legend}}<br/><span>{{handleDisplay(item.mapping.display, { ...item.label, value: item.showValue })}}</span>-->
+      </div>
-<!--        </span>-->
-<!--        <span v-else>{{item.legend}}</span>-->
-<!--      </span>-->
-<!--      <span v-if="chartInfo.param.text==='value'|| !chartInfo.param.text">-->
-<!--        <span v-if="item.mapping" :style="{color:item.mapping.color.text}">-->
-<!--          {{handleDisplay(item.mapping.display, { ...item.label, value: item.showValue })}}-->
-<!--        </span>-->
-<!--        <span v-else>{{item.showValue}}</span>-->
-<!--      </span>-->
-<!--      <span v-if="chartInfo.param.text==='none'">-->
-<!--        ' '-->
-<!--      </span>-->
-
     </div>
   </div>
 </template>
@@ -184,18 +170,10 @@ export default {
               showValue = self.handleDisplay(item.mapping.display, { ...item.label, value: showValue })
             }
             let str = ''
-            if (this.chartInfo.param.text === 'all') {
+            if (this.chartInfo.param.text === 'all' || this.chartInfo.param.text === 'value' || !this.chartInfo.param.text) {
-              str += showValue
-              str += '\n'
-              str += item.alias
-            }
-            if (this.chartInfo.param.text === 'value' || !this.chartInfo.param.text) {
               str += showValue
             }
-            if (this.chartInfo.param.text === 'legend') {
+            if (this.chartInfo.param.text === 'none' || this.chartInfo.param.text === 'legend') {
-              str += item.alias
-            }
-            if (this.chartInfo.param.text === 'none') {
               str += ''
             }
             str += ''

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

@@ -103,7 +103,7 @@ export default {
             const showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(value, null, -1, 2)
             const mapping = this.selectMapping(value, chartInfo.param.valueMapping, chartInfo.param.enable && this.chartInfo.param.enable.valueMapping)
             // eslint-disable-next-line vue/no-mutating-props
-            mapping && (this.chartOption.color[colorIndex] = mapping.color.bac)
+            this.chartOption.color && mapping && (this.chartOption.color[colorIndex] = mapping.color.bac)
             s.data.push({
               value: value,
               realValue: value,

nezha-fronted/src/components/chart/chart/tools.js

@@ -46,7 +46,9 @@ export function getOption (type) {
       chartOption = lodash.cloneDeep(chartGaugeOption)
       break
     }
-    default: break
+    default:
+      chartOption = {}
+      break
   }
   return chartOption
 }

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

@@ -423,7 +423,7 @@ export default {
       immediate: true,
       deep: true,
       handler (n) {
-        console.log(n)
+        // console.log(n)
       }
     }
   },

nezha-fronted/src/components/page/dashboard/panel.vue

@@ -80,8 +80,8 @@
           </template>
         </div>
         <div id="tableList" class="table-list" style='overflow-y: unset'>
-          <div id="dashboardScrollbar" class="table-list-box">
+          <div class="table-list-box">
-            <div class="box-content" v-loading="chartListLoading"  ref="dashboardScrollbar" style='overflow-y: auto'>
+            <div  id="dashboardScrollbar" class="box-content" v-loading="chartListLoading"  ref="dashboardScrollbar" style='overflow-y: auto'>
               <chart-list
                 ref="chartList"
                 name="panel"