diff --git a/nezha-fronted/src/components/charts/chartPreview.vue b/nezha-fronted/src/components/charts/chartPreview.vue
index e9c0436af..72b7f575c 100644
--- a/nezha-fronted/src/components/charts/chartPreview.vue
+++ b/nezha-fronted/src/components/charts/chartPreview.vue
@@ -123,7 +123,7 @@
           <div class="line-area" ref="singleStatArea"  id="singleStatArea"  style="margin-top:0px; text-align:center;
       vertical-align: middle;
       display:table-cell;
-      font-size:30px;">
+      font-size:30px;" :style="{color:mapping&&mapping.color?mapping.color.text:'#000',background:mapping&&mapping.color?mapping.color.bac:'#fff'}">
             {{serieSingleStat}}
             <div class="chart-no-data" v-show="noData">No Data</div>
           </div>
@@ -143,7 +143,7 @@
           </el-table-column>
           <el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" width="90">
             <template slot-scope="scope">
-              {{scope.row.value}}
+              <div :style="{color:mapping&&mapping.color?mapping.color.text:'#000',background:mapping&&mapping.color?mapping.color.bac:'#fff',margin: '10px 0'}">{{ scope.row.value}}</div>
             </template>
           </el-table-column>
         </el-table>
@@ -252,6 +252,7 @@
         pageHeight:40,
         hasLegendOptions:false,
         screenLegendOptions:[],
+        mapping:{},
       };
     },
     computed: {
@@ -553,7 +554,7 @@
                     this.setData(_chartItem, series, legend);
                   }else if(chartItem.type ==='singleStat'){
                     if(Number(singleStatRlt)){
-                      let singleStatTmp =parseFloat(Number(singleStatRlt).toFixed(2));
+                      let singleStatTmp =parseFloat(Number(singleStatRlt).toFixed(2));//parseFloat ：如果没有小数点，或者小数点后都是零，parseFloat() 会返回整数。
                       if(chartItem.param.valueMapping && chartItem.param.valueMapping.type){
                         let type=chartItem.param.valueMapping.type;
                         let mappings=chartItem.param.valueMapping.mapping?chartItem.param.valueMapping.mapping:[];
@@ -563,7 +564,12 @@
                         }else{
                           mapping=mappings.find(item=>{return item.from <= singleStatTmp&& item.to >= singleStatTmp});
                         }
-                        this.serieSingleStat = mapping?mapping.text:chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
+                        this.mapping=mapping;
+                        if(this.mapping&&!this.mapping.color){
+                          this.mapping.color={bac:'#fff',text:'#000'}
+                        }
+                        console.log(mapping)
+                        this.serieSingleStat = mapping?mapping.text.replace('{{value}}', singleStatTmp):chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
                       }else{
                         this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
                       }
@@ -1042,8 +1048,8 @@
             }else{
               mapping=mappings.find(t=>{return t.from <= value&& t.to >= value});
             }
-            item.value = mapping?mapping.text:this.unit.compute(value,null,2);
-            console.log('value',value,'mapping',mapping)
+            this.mapping=mapping;
+            item.value = mapping?mapping.text.replace('{{value}}', item.value):this.unit.compute(value,null,2);
           }
           return item;
         })