diff --git a/nezha-fronted/src/assets/css/components/chart/chart.scss b/nezha-fronted/src/assets/css/components/chart/chart.scss
index 95fee67ac..e2ad6da59 100644
--- a/nezha-fronted/src/assets/css/components/chart/chart.scss
+++ b/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{
diff --git a/nezha-fronted/src/components/chart/chart/chartGauge.vue b/nezha-fronted/src/components/chart/chart/chartGauge.vue
index 92e6984f0..67e046d7a 100644
--- a/nezha-fronted/src/components/chart/chart/chartGauge.vue
+++ b/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'}"-->
-<!--      <span v-if="chartInfo.param.text==='all'">-->
-<!--        <span v-if="item.mapping" :style="{color:item.mapping.color.text}">-->
-<!--          {{item.legend}}<br/><span>{{handleDisplay(item.mapping.display, { ...item.label, value: item.showValue })}}</span>-->
-<!--        </span>-->
-<!--        <span v-else>{{item.legend}}<br/><span>{{item.showValue}}</span></span>-->
-<!--      </span>-->
-<!--      <span v-if="chartInfo.param.text==='legend'">-->
-<!--        <span v-if="item.mapping" :style="{color:item.mapping.color.text}">-->
-<!--           {{item.legend}}<br/><span>{{handleDisplay(item.mapping.display, { ...item.label, value: item.showValue })}}</span>-->
-<!--        </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
+        :id="isFullscreen?('chart-gauge-screen-' + chartInfo.id + '-' + index):('chart-gauge-' + chartInfo.id + '-' + index)"
+        class="chart-gauge-content"
+      ></div>
+      <div
+        v-if="item.height > 48 && chartInfo.param &&( chartInfo.param.text === 'legend' || chartInfo.param.text === 'all' )"
+        class="chart-gauge-legend"
+      >
+        {{item.alias}}
+      </div>
     </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') {
-              str += showValue
-              str += '\n'
-              str += item.alias
-            }
-            if (this.chartInfo.param.text === 'value' || !this.chartInfo.param.text) {
+            if (this.chartInfo.param.text === 'all' || this.chartInfo.param.text === 'value' || !this.chartInfo.param.text) {
               str += showValue
             }
-            if (this.chartInfo.param.text === 'legend') {
-              str += item.alias
-            }
-            if (this.chartInfo.param.text === 'none') {
+            if (this.chartInfo.param.text === 'none' || this.chartInfo.param.text === 'legend') {
               str += ''
             }
             str += ''
diff --git a/nezha-fronted/src/components/chart/chart/chartTreemap.vue b/nezha-fronted/src/components/chart/chart/chartTreemap.vue
index b486a6534..c2b9fc7fb 100644
--- a/nezha-fronted/src/components/chart/chart/chartTreemap.vue
+++ b/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,
diff --git a/nezha-fronted/src/components/chart/chart/tools.js b/nezha-fronted/src/components/chart/chart/tools.js
index 3163bd560..b82cbcec2 100644
--- a/nezha-fronted/src/components/chart/chart/tools.js
+++ b/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
 }
diff --git a/nezha-fronted/src/components/chart/panelChart.vue b/nezha-fronted/src/components/chart/panelChart.vue
index a14296485..e0ab0160d 100644
--- a/nezha-fronted/src/components/chart/panelChart.vue
+++ b/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)
       }
     }
   },
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index a10df2199..83604cec9 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/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="box-content" v-loading="chartListLoading"  ref="dashboardScrollbar" style='overflow-y: auto'>
+          <div class="table-list-box">
+            <div  id="dashboardScrollbar" class="box-content" v-loading="chartListLoading"  ref="dashboardScrollbar" style='overflow-y: auto'>
               <chart-list
                 ref="chartList"
                 name="panel"