diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss
index 1d134e51f..7f2318218 100644
--- a/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss
@@ -12,10 +12,17 @@
       border: 1px solid $--border-color-light;
       border-radius: 2px;
       display: flex;
-      padding: 3px 10px 3px 5px;
+      padding: 0;
+      padding-left: 5px;
+      line-height: 30px;
       justify-content: space-between;
       margin-bottom: 10px;
       box-sizing: border-box;
+      height: 32px;
+      .title-content-left{
+        display: inline-flex;
+        align-items: center;
+      }
       .nz-icon-copy {
         padding: 0 4px;
         color: $--color-primary;
@@ -50,7 +57,7 @@
         margin-left: 5px;
       }
       .mapping-display{
-        width: 124px;
+        width: 100px;
         font-size: 14px;
         border: 1px solid $--border-color-light;
         border-radius: 2px 0 0 2px;
@@ -67,5 +74,21 @@
       margin-bottom: 10px;
       padding: 3px 10px;
     }
+    .prev-mapping-box{
+      border: 1px solid $--border-color-light;
+      display: inline-block;
+      min-width: 18px;
+      height: 25px;
+      line-height: 25px;
+      border-radius: 5px;
+      margin-left: 120px;
+      padding: 0 3px;
+      text-align: center;
+    }
+    .element-item {
+      padding: 0;
+      border-bottom: none;
+      margin-bottom: 10px;
+    }
   }
 }
diff --git a/nezha-fronted/src/components/common/rightBox/chart/metricsChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/metricsChartConfig.vue
index 3369d4f84..561454c67 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/metricsChartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/metricsChartConfig.vue
@@ -195,7 +195,22 @@
               <div class="chart-title chart-title-config">
                 <span class="endpoint-title-content">
                   <i class="nz-icon nz-icon-arrow-down" :class="item.show?'':'is-active'" @click="showMapping(index)"></i>
-                  123
+                  <span v-show="!item.show" class="title-content-left">
+                    <span v-if="item.type === 'value'">
+                      {{item.value}}
+                    </span>
+                    <span v-if="item.type === 'range'">
+                      {{item.from}} -> {{item.to}}
+                    </span>
+                    <span v-if="item.type === 'regx'">
+                      {{item.regx}}
+                    </span>
+                     <div :style="{background:item.color.bac}" class="prev-mapping-box">
+                        <span :style="{color:item.color.text}">
+                          {{item.display || "T"}}
+                        </span>
+                      </div>
+                  </span>
                 </span>
                 <span>
                   <span @click="addMapping('')">
@@ -211,18 +226,22 @@
               </div>
               <transition-group appear tag="div" name="el-zoom-in-top">
                 <el-row v-show="item.show" :key="1" class="thresholds-item">
-                  <el-select v-model="item.type" size="small" style="width: 100px" @change="(val)=>{mappingItemChange(index,val)}">
-                    <el-option v-for="item in mappingTypeList" :value="item.value" :label="item.label" :key="item.value"/>
-                  </el-select>
+                  <div>
+                    <el-select v-model="item.type" size="small" style="width: 100px" @change="(val)=>{mappingItemChange(index,val)}">
+                      <el-option v-for="item in mappingTypeList" :value="item.value" :label="item.label" :key="item.value"/>
+                    </el-select>
+                  </div>
                   <el-input-number :controls="false" v-if="item.type === 'value'" size="small" v-model="item.value" placeholder="value"></el-input-number>
                   <el-input-number :controls="false" v-if="item.type === 'range'" size="small" v-model="item.from" placeholder="from"></el-input-number>
                   <el-input-number :controls="false" v-if="item.type === 'range'" size="small" v-model="item.to" placeholder="to" style="margin-left: 10px"></el-input-number>
                   <el-input v-if="item.type === 'regx'" size="small" v-model="item.regx" placeholder="regx"></el-input>
                 </el-row>
                 <el-row v-show="item.show" :key="2" class="thresholds-item" style="position: relative">
-                  <div class='mapping-display'>Display</div>
+                  <div>
+                    <div class='mapping-display'>Display</div>
+                  </div>
                   <el-input v-model="item.display"  style="margin-right: 10px" size="small"/>
-                  <nezhaColor :color-val="item.color" :single="false" :value-arr="[{name:'bac',value:item.color.bac,key:'bac'},{name:'text',value:item.color.text,key:'text'}]" @colorChange="(val,key)=>{colorChange(index,key,val)}"/>
+                  <nezhaColor :color-val="item.color" :single="false" :value-arr="[{name:'bac',value:item.color.bac,key:'bac'},{name:'text',value:item.color.text,key:'text'}]" @colorChange="(val,key)=>{colorChange(val, key, index)}"/>
                 </el-row>
               </transition-group>
             </div>
diff --git a/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js b/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
index 80899cebd..1d908c8b3 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
+++ b/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
@@ -213,6 +213,15 @@ export default {
       if (key === 'thresholds') {
         this.chartConfig.param.thresholds[index].color = val
       }
+      if (key === 'bac') {
+        console.log(this.chartConfig.param.valueMapping.mapping,this.chartConfig.param.valueMapping.mapping[0],this.chartConfig.param.valueMapping.mapping[index])
+        this.chartConfig.param.valueMapping.mapping[index].color.bac = val
+        this.$set(this.chartConfig.param.valueMapping.mapping, index, this.chartConfig.param.valueMapping.mapping[index])
+      }
+      if (key === 'text') {
+        this.chartConfig.param.valueMapping.mapping[index].color.text = val
+        this.$set(this.chartConfig.param.valueMapping.mapping, index, this.chartConfig.param.valueMapping.mapping[index])
+      }
       this.change()
     },
     change () {