diff --git a/nezha-fronted/src/components/charts/chart-single-stat.vue b/nezha-fronted/src/components/charts/chart-single-stat.vue
index 5679cb2a5..d1c775c61 100644
--- a/nezha-fronted/src/components/charts/chart-single-stat.vue
+++ b/nezha-fronted/src/components/charts/chart-single-stat.vue
@@ -424,7 +424,7 @@ export default {
               if(this.mapping&&!this.mapping.color){
                 this.mapping.color={bac:'#fff',text:'#000'}
               }
-              this.serieSingleStat = mapping?mapping.text:chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
+              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);
             }
@@ -460,7 +460,7 @@ export default {
               if(this.mapping&&!this.mapping.color){
                 this.mapping.color={bac:'#fff',text:'#000'}
               }
-              this.serieSingleStat = mapping?mapping.text:chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
+              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);
             }
diff --git a/nezha-fronted/src/components/charts/chart-table.vue b/nezha-fronted/src/components/charts/chart-table.vue
index a429d635e..edb8e4ca4 100644
--- a/nezha-fronted/src/components/charts/chart-table.vue
+++ b/nezha-fronted/src/components/charts/chart-table.vue
@@ -52,7 +52,7 @@
         <div class="mt-10 table-container" v-cloak v-show="firstShow">
           <el-table class="nz-table" :id="'tableContainer'+chartIndex" ref="tableContainer" :height="tableHeight"
                     :data="seriesItem" border tooltip-effect="light" v-cloak v-scrollBar:el-table
-                    @sort-change="tableDataSort">
+                    @sort-change="tableDataSort" >
             <el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" min-width="100"
                              :sort-orders="['ascending', 'descending']" :sortable="'custom'"></el-table-column>
             <el-table-column sortable prop="element" :show-overflow-tooltip="true"
@@ -65,7 +65,7 @@
             <el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" min-width="90"
                              :resizable="false" :sort-orders="['ascending', 'descending']" :sortable="'custom'">
               <template slot-scope="scope">
-                {{ scope.row.value}}
+                <div :style="{color:mapping?mapping.color.text:'#000',background:mapping?mapping.color.bac:'#fff',margin: '10px 0'}">{{ scope.row.value}}</div>
               </template>
             </el-table-column>
           </el-table>
@@ -97,7 +97,7 @@
             <el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" min-width="90"
                              :resizable="false" :sort-orders="['ascending', 'descending']" :sortable="'custom'">
               <template slot-scope="scope">
-                {{ scope.row.value}}
+                <div :style="{color:mapping?mapping.color.text:'#000',background:mapping?mapping.color.bac:'#fff',margin: '10px 0'}">{{ scope.row.value}}</div>
               </template>
             </el-table-column>
           </el-table>
@@ -210,7 +210,8 @@
           }],
         searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
         oldSearchTime: [],
-        ps: null
+        ps: null,
+        mapping:{},
       };
     },
     created() {
@@ -395,7 +396,8 @@
             }else{
               mapping=mappings.find(t=>{return t.from <= value&& t.to >= value});
             }
-            item.value = mapping?mapping.text:chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(value,null,2);
+            this.mapping=mapping;
+            item.value = mapping?mapping.text.replace('{{value}}', item.value):chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(value,null,2);
           }
           return item;
         }));
diff --git a/nezha-fronted/src/components/common/language/cn.js b/nezha-fronted/src/components/common/language/cn.js
index 858171ecb..7a6e3752d 100644
--- a/nezha-fronted/src/components/common/language/cn.js
+++ b/nezha-fronted/src/components/common/language/cn.js
@@ -182,6 +182,9 @@ const cn = {
         unit: "单位",
         legend: "图例",
         legendTip: "使用名称或表达式控制时间序列的名称。例如{{hostname}将替换为标签主机名的标签值。",
+        valueMappingTip: '使用{{value}}可以显示原值\n'+
+          '例如：total alive: {{value}}\n'+
+          '结果为：total alive: 100',
         option: "操作",
         alertParam:{
           param:'参数',
diff --git a/nezha-fronted/src/components/common/language/en.js b/nezha-fronted/src/components/common/language/en.js
index 4b685d9ee..92cdac40a 100644
--- a/nezha-fronted/src/components/common/language/en.js
+++ b/nezha-fronted/src/components/common/language/en.js
@@ -145,6 +145,9 @@ const en = {
         legend:'Legend',
         statistics:'Statistics',
         legendTip:'Controls the name of the time series, using name or pattern. For example {{hostname}} will be replaced with label value for the label hostname.',
+        valueMappingTip: 'Use {{value}} to display the original value\n'+
+          'For example: Total Alive: {{value}}\n'+
+          'The result is: Total Alive: 100',
         sync: 'Sync to assets',
         last:'Last',
         threshold:'Threshold',
diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue
index 66e8c20e2..5144f11a0 100644
--- a/nezha-fronted/src/components/page/dashboard/chartBox.vue
+++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue
@@ -329,7 +329,13 @@
           </el-row>
           <!--value mapping start-->
           <div  class="right-box-sub-title" v-if="editChart.type == 'singleStat'||editChart.type == 'table'">
-            <span>{{$t('dashboard.panel.chartForm.valMapping.name')}}</span>
+            <span>
+              {{$t('dashboard.panel.chartForm.valMapping.name')}}
+              <el-popover  placement="top" width="275" trigger="hover">
+                <div style="white-space: pre-wrap;">{{$t('dashboard.panel.chartForm.valueMappingTip')}}</div>
+                <i slot="reference" class="nz-icon nz-icon-info-normal" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;" @mouseover="rz"></i>
+              </el-popover>
+            </span>
             <span  class="float-right" @click="addMapping"><i style="font-size: 16px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i></span>
           </div>
           <div style="margin-bottom: 20px; width: 100%" v-if="editChart.type == 'singleStat'||editChart.type == 'table'"></div>
@@ -1628,7 +1634,7 @@
         deep: true,
         immediate: true,
         handler(n) {
-          //console.log(n);
+          console.log(n,(n.param&&n.param.valueMapping)&&(n.type === 'singleStat' || n.type === 'table'));
           if((n.param&&n.param.valueMapping)&&(n.type === 'singleStat' || n.type === 'table')){
             n.param.valueMapping.mapping.forEach(item=>{
               this.showPicker.push({bac:false,text:false})