diff --git a/nezha-fronted/src/assets/css/common/rightBoxCommon.scss b/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
index 892477f51..f1d3774f6 100644
--- a/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
+++ b/nezha-fronted/src/assets/css/common/rightBoxCommon.scss
@@ -136,6 +136,7 @@
     .form__sub-title {
       display: flex;
       justify-content: space-between;
+      align-items: center;
       padding: 0 10px;
       margin-bottom: 20px;
       line-height: 32px;
diff --git a/nezha-fronted/src/assets/css/components/common/project/L5/CanvasProps.scss b/nezha-fronted/src/assets/css/components/common/project/L5/CanvasProps.scss
index 529cc73db..cb86e03d2 100644
--- a/nezha-fronted/src/assets/css/components/common/project/L5/CanvasProps.scss
+++ b/nezha-fronted/src/assets/css/components/common/project/L5/CanvasProps.scss
@@ -483,11 +483,11 @@
 
 .color-tab {
   position: absolute;
-  top: 43px;
+  top: -28px;
+  width: 100%;
   left: 0;
   height: 28px;
   border-radius: 5px 5px 0 0;
-  width: 312px;
   border: 1px solid #EBEEF5;
   border-bottom: none;
   background-color: $--background-color-empty;
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 4b926ec13..1d134e51f 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
@@ -1,5 +1,10 @@
+.chart-right-box{
+  overflow-y: auto;
+}
 .right-box__container{
   .chart-config{
+    color: $--color-text-regular;
+    font-size: 14px;
     .el-form {
       padding-top: 0px;
     }
@@ -7,9 +12,10 @@
       border: 1px solid $--border-color-light;
       border-radius: 2px;
       display: flex;
-      padding: 8px 10px;
+      padding: 3px 10px 3px 5px;
       justify-content: space-between;
       margin-bottom: 10px;
+      box-sizing: border-box;
       .nz-icon-copy {
         padding: 0 4px;
         color: $--color-primary;
@@ -27,5 +33,39 @@
           -90deg
       );
     }
+    .thresholds-item {
+      border-radius: 2px;
+      display: flex;
+      margin-bottom: 10px;
+      align-items: center;
+      justify-items: center;
+      .el-input-number--small{
+        display: inline-block;
+        flex: 1;
+        align-items: center;
+        width: auto;
+      }
+      .del-thresholds-icon{
+        display: inline-block;
+        margin-left: 5px;
+      }
+      .mapping-display{
+        width: 124px;
+        font-size: 14px;
+        border: 1px solid $--border-color-light;
+        border-radius: 2px 0 0 2px;
+        height: 32px;
+        line-height: 32px;
+        padding-left: 10px;
+        box-sizing: border-box;
+      }
+    }
+    .thresholds-add{
+      border: 1px solid $--border-color-light;
+      border-radius: 2px;
+      text-align: center;
+      margin-bottom: 10px;
+      padding: 3px 10px;
+    }
   }
 }
diff --git a/nezha-fronted/src/assets/css/components/page/dashboard/chartBox.scss b/nezha-fronted/src/assets/css/components/page/dashboard/chartBox.scss
index 0b52b79e5..097d766b3 100644
--- a/nezha-fronted/src/assets/css/components/page/dashboard/chartBox.scss
+++ b/nezha-fronted/src/assets/css/components/page/dashboard/chartBox.scss
@@ -105,38 +105,6 @@
   top: -280px;
   left: 280px;
 }
-.color-tab{
-  position: absolute;
-  top: -268px;
-  left: 144px;
-  height: 28px;
-  border-radius: 5px 5px 0 0;
-  width: 312px;
-  border: 1px solid $--border-color-light;
-  border-bottom: none;
-  background-color: $--background-color-empty;
-  display: flex;
-  justify-content: space-between;
-  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
-}
-.color-tab div{
-  text-align: center;
-  flex: 1;
-  color: $--color-text-secondary;
-  transition: all .3s cubic-bezier(.645,.045,.355,1);
-  background: #E4E7ED;
-  cursor: pointer;
-}
-.color-tab div:first-child{
-  border-right-color: $--border-color-base;
-}
-.color-tab div:hover{
-  color: #409EFF;
-}
-.color-tab .color-active{
-  color: #409EFF;
-  background-color: $--background-color-empty;
-}
 .color{
   position: relative;
 }
diff --git a/nezha-fronted/src/components/common/nezhaColor.vue b/nezha-fronted/src/components/common/nezhaColor.vue
index 72d68c252..fdd0e5a0c 100644
--- a/nezha-fronted/src/components/common/nezhaColor.vue
+++ b/nezha-fronted/src/components/common/nezhaColor.vue
@@ -2,8 +2,8 @@
   <span v-clickoutside="()=>{exitColor(false)}" class="nz-color">
     <div class="color-show" v-if="single" ref="colorShow" @click.stop="changeColor">
       <div class="color-show-left" :style="{background:colors}"></div>
-      <span class="color-text"> {{colors}}</span>
-      <span class="color-arrows">
+      <span class="color-text" v-show="showText"> {{colors}}</span>
+      <span class="color-arrows" v-show="showText">
         <i class="nz-icon nz-icon-arrow-down" v-if="!showColorPicker"></i>
         <i class="nz-icon nz-icon-arrow-up" v-if="showColorPicker"></i>
       </span>
@@ -71,6 +71,10 @@ export default {
     disableAlpha: {
       type: Boolean,
       default: false
+    },
+    showText: {
+      type: Boolean,
+      default: true
     }
   },
   watch: {},
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
index 64336d970..602abc75b 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
@@ -13,7 +13,7 @@
     </div>
 
     <!-- begin--表单-->
-    <div class="right-box-form-box right-box__container" style="overflow: hidden">
+    <div class="right-box-form-box right-box__container chart-right-box">
       <el-form ref="chartForm" :model="editChart" :rules="rules" label-position= "top" label-width="120px">
         <el-form-item :label='$t("dashboard.panel.chartForm.name")' prop="title">
           <el-input maxlength="64" show-word-limit size="small" v-model="editChart.name" id="chart-box-title"></el-input>
@@ -59,7 +59,7 @@
         </div>
         <el-tabs v-model="editChart.datasource" @tab-click="datasourceChange">
           <el-tab-pane label="Metrics" name="1">
-            <metrics-chart-config v-if="editChart.datasource == 1" :params.sync="editChart"/>
+            <metrics-chart-config v-if="editChart.datasource == 1" :params.sync="editChart" @change="editChartChange"/>
           </el-tab-pane>
           <el-tab-pane label="Logs" name="2">
             <logs-chart-config  v-if="editChart.datasource == 2" :params.sync="editChart"/>
@@ -237,6 +237,10 @@ export default {
     },
     datasourceChange (val, e) {
       console.log(val, e, this.editChart.datasource)
+    },
+    editChartChange (newEditChart) {
+      console.log(newEditChart)
+      this.editChart = JSON.parse(JSON.stringify(newEditChart))
     }
   },
   created () {
diff --git a/nezha-fronted/src/components/common/rightBox/chart/metricsChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/metricsChartConfig.vue
index 2b6feb56d..c0fd14e89 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/metricsChartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/metricsChartConfig.vue
@@ -8,6 +8,10 @@
           <div class="chart-title chart-title-config">
             <span class="endpoint-title-content">
               <i class="nz-icon nz-icon-arrow-down" :class="expressionsShow[index-1]?'':'is-active'" @click="showExpression(index)"></i>
+              <span>
+                {{expressionName[index-1]}}
+<!--                名称修改 暂未实现-->
+              </span>
             </span>
             <span>
               <span @click="addExpression('')">
@@ -56,7 +60,7 @@
         </el-row>
       </div>
 
-      <!--title-->
+<!--title-->
       <div class="form__sub-title">
         <span>{{$t('dashboard.panel.chartForm.displayConfig')}}</span>
       </div>
@@ -92,7 +96,7 @@
 
         <!--width-->
         <el-form-item :label="$t('dashboard.panel.chartForm.width')" class="form-item--half-width" prop="span">
-          <el-select id="chart-box-span"  v-model="chartConfig.span" :disabled="chartConfig.type === 'group'" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartSpan">
+          <el-select id="chart-box-span"  v-model="chartConfig.span" :disabled="chartConfig.type === 'group'" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartSpan" @change="change">
             <el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item">
               <span class="panel-dropdown-label-txt" > span-{{item}}</span>
             </el-option>
@@ -102,12 +106,130 @@
         <!--height-->
         <el-form-item :label="$t('dashboard.panel.chartForm.high')" class="form-item--half-width"  prop="height">
           <!-- 由px改为span -->
-          <el-select id="chart-box-height"  v-model="chartConfig.height" :disabled="chartConfig.type === 'group'" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartSpan">
+          <el-select id="chart-box-height"  v-model="chartConfig.height" :disabled="chartConfig.type === 'group'" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartSpan" @change="change">
             <el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item">
               <span class="panel-dropdown-label-txt" > span-{{item}}</span>
             </el-option>
           </el-select>
         </el-form-item>
+
+        <!--stack-->
+        <el-form-item :label="$t('dashboard.panel.chartForm.stack')" class="form-item--half-width"  prop="height" v-if="isStackShow(chartConfig.type)">
+          <el-select id="chart-box-height" v-model="chartConfig.param.stack" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartSpan" @change="change">
+            <el-option :value="1" label="true">
+            </el-option>
+            <el-option :value="0" label="false">
+            </el-option>
+          </el-select>
+        </el-form-item>
+
+        <!--statistics-->
+        <el-form-item v-if="isStatisticsShow(chartConfig.type)" :label="$t('dashboard.panel.chartForm.statistics')" class="form-item--half-width" prop="param.statistics">
+          <el-select id="chart-box-statistics" v-model="chartConfig.param.statistics" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="change, $forceUpdate()">
+            <el-option v-for="item in statisticsList" :key="item.value" :label="$t(item.label)" :value="item.value">
+              <span class="panel-dropdown-label-txt" >{{$t(item.label)}}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+
+        <!--   nullType     -->
+        <el-form-item  :label='"Null value"' class="form-item--half-width"  prop="nullType">
+          <el-select id="chart-box-nullType" v-model="chartConfig.param.nullType" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="change, $forceUpdate()" >
+            <el-option v-for="item in nullTypeList" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
+          </el-select>
+        </el-form-item>
+      </div>
+
+      <div v-if="isShowLegend(chartConfig.type)">
+        <!--legendConfig-->
+        <div class="form__sub-title">
+          <span>{{$t('dashboard.panel.chartForm.legendConfig')}}</span>
+          <el-switch v-model="chartConfig.param.legend.show" size="small" @change="change"></el-switch>
+        </div>
+        <transition name="el-zoom-in-top">
+          <div v-if="chartConfig.param.legend.show" class="form-items--half-width-group">
+            <el-form-item :label="$t('dashboard.panel.chartForm.legendPosition')" class="form-item--half-width"  prop="nullType">
+              <el-select id="chart-box-legend-show" v-model="chartConfig.param.legend.placement" placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="change, $forceUpdate()">
+                <el-option v-for="item in legendPositionList" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item :label="$t('dashboard.panel.chartForm.legendValues')" class="form-item--half-width"  prop="nullType">
+              <el-select id="chart-box-legend-value" v-model="chartConfig.param.legend.values" multiple collapse-tags placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" @change="change, $forceUpdate()">
+                <el-option v-for="item in statisticsList" :key="item.value" :label="$t(item.label)" :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </div>
+        </transition>
+
+        <!--thresholdConfig-->
+        <div class="form__sub-title">
+          <span>{{$t('dashboard.panel.chartForm.threshold')}}</span>
+          <el-switch v-model="chartConfig.param.thresholdShow" size="small" @change="thresholdShowChange"></el-switch>
+        </div>
+        <transition name="el-zoom-in-top">
+          <el-row v-if="chartConfig.param.thresholdShow">
+            <div v-for="(item,index) in chartConfig.param.thresholds" :key="index" class="thresholds-item">
+              <nezhaColor :value-arr="[{name:'thresholds',value:item.color}]" :show-text="false" :color-val="item.color"
+                          @colorChange="(color,key)=>{colorChange(color,key,index)}"/>
+              <el-input-number size="small" placeholder="" v-model="item.value" :controls="false" @blur="sortThresholds"/>
+              <span @click="delThresholds(index)" class="del-thresholds-icon">
+              <i class="nz-icon nz-icon-delete" />
+            </span>
+            </div>
+            <div @click="addThresholds" class="thresholds-add">
+              Add thresholds
+            </div>
+          </el-row>
+        </transition>
+      </div>
+      <div v-if="isShowValueMapping(chartConfig.type)">
+        <div class="form__sub-title">
+          <span>{{$t('dashboard.panel.chartForm.valueMapping')}}</span>
+          <el-switch v-model="chartConfig.param.valueMapping.show" size="small" @change="change"></el-switch>
+        </div>
+        <transition name="el-zoom-in-top">
+          <el-row v-if="chartConfig.param.valueMapping.show">
+            <div v-for="(item,index) in chartConfig.param.valueMapping.mapping" :key="index">
+              <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>
+                <span>
+                  <span @click="addMapping('')">
+                      <i class="nz-icon nz-icon-create-square" style="font-weight: normal; font-size: 17px; cursor: pointer;"></i>
+                  </span>
+                  <span class="nz-icon-copy">
+                      <i @click="copyMapping(index)" class="nz-icon nz-icon-override"></i>
+                  </span>
+                  <span class="nz-icon-minus-medium">
+                      <i @click="removeMapping(index)" class="nz-icon nz-icon-minus"></i>
+                  </span>
+                </span>
+              </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>
+                  <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>
+                  <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)}"/>
+                </el-row>
+              </transition-group>
+            </div>
+            <div @click="addMapping" class="thresholds-add">
+              Add valueMapping
+            </div>
+          </el-row>
+        </transition>
       </div>
     </el-form>
   </div>
@@ -115,25 +237,19 @@
 
 <script>
 import promqlInput from '@/components/page/dashboard/explore/promqlInput'
+import nezhaColor from '@/components/common/nezhaColor'
 import promqlInputMixin from '@/components/common/mixin/promqlInput'
-import { getUUID, resetZIndex } from '@/components/common/js/common'
 import publicConfig from '@/components/common/rightBox/chart/publicConfig'
-const rz = {
-  methods: {
-    rz (e) {
-      resetZIndex(e)
-    }
-  }
-}
 export default {
   name: 'metricsChartConfig',
   props: {
     params: {}
   },
   components: {
-    promqlInput
+    promqlInput,
+    nezhaColor
   },
-  mixins: [rz, promqlInputMixin, publicConfig],
+  mixins: [promqlInputMixin, publicConfig],
   computed: {},
   data () {
     return {
@@ -149,13 +265,25 @@ export default {
           name: this.$t('dashboard.panel.chartForm.typeVal.stackArea.label')
         },
         {
-          id: 'bar',
-          name: this.$t('dashboard.panel.chartForm.typeVal.bar.label')
+          id: 'point',
+          name: this.$t('dashboard.panel.chartForm.typeVal.point.label')
         },
         {
           id: 'singleStat',
           name: this.$t('dashboard.panel.chartForm.typeVal.singleStat.label')
         },
+        {
+          id: 'bar',
+          name: this.$t('dashboard.panel.chartForm.typeVal.bar.label')
+        },
+        {
+          id: 'guage',
+          name: this.$t('dashboard.panel.chartForm.typeVal.guage.label')
+        },
+        {
+          id: 'treemap',
+          name: this.$t('dashboard.panel.chartForm.typeVal.treemap.label')
+        },
         {
           id: 'pie',
           name: this.$t('dashboard.panel.chartForm.typeVal.pie.label')
@@ -163,30 +291,6 @@ export default {
         {
           id: 'table',
           name: this.$t('dashboard.panel.chartForm.typeVal.table.label')
-        },
-        {
-          id: 'alertList',
-          name: this.$t('dashboard.panel.chartForm.typeVal.alertList.label')
-        },
-        {
-          id: 'logs',
-          name: this.$t('dashboard.panel.chartForm.typeVal.logs.label')
-        },
-        {
-          id: 'text',
-          name: this.$t('dashboard.panel.chartForm.typeVal.text.label')
-        },
-        {
-          id: 'url',
-          name: this.$t('dashboard.panel.chartForm.typeVal.url.label')
-        },
-        {
-          id: 'diagram',
-          name: this.$t('dashboard.panel.chartForm.typeVal.diagram.label')
-        },
-        {
-          id: 'group',
-          name: this.$t('dashboard.panel.chartForm.typeVal.group.label')
         }
 
       ]
@@ -210,84 +314,15 @@ export default {
         })
       }
     },
-    expressionChange: function () {
-      if (this.expressions.length) {
-        this.chartConfig.elements = []
-        this.expressions.forEach((expr, i) => {
-          this.chartConfig.elements.push({ id: this.elementIds[i], expression: expr, type: 'expert', legend: this.legends[i] })
+    sortThresholds () {
+      if (this.param.thresholds.length > 1) {
+        this.param.thresholds = this.chartConfig.param.thresholds.sort((a, b) => {
+          const value1 = a.value
+          const value2 = b.value
+          return value1 - value2
         })
-      } else {
-        this.chartConfig.elements = []
       }
       this.change()
-    },
-    addExpression (item) {
-      console.log(item, 213213123)
-      if (!item) {
-        this.expressions.push('')
-        this.legends.push('')
-        this.promqlKeys.push(getUUID())
-        this.elementIds.push('')
-        this.expressionsShow.push(true)
-        this.promqlCount++
-        this.expressionChange()
-      } else {
-        this.expressions.push(item.expression)
-        this.legends.push(item.legend)
-        this.promqlKeys.push(getUUID())
-        this.elementIds.push(item.id)
-        this.expressionsShow.push(true)
-        this.promqlCount++
-      }
-    },
-    removeExpression (index) {
-      if (this.promqlCount > 1) {
-        this.expressions.splice(index, 1)
-        this.legends.splice(index, 1)
-        this.promqlKeys.splice(index, 1)
-        this.expressionsShow.splice(index, 1)
-        this.elementIds.splice(index, 1)
-        this.promqlCount--
-        this.$nextTick(() => {
-          this.expressions.forEach((ex, index) => {
-            if (ex) {
-              this.$refs[`promql-${index}`][0].metricChange(ex)
-            }
-          })
-        })
-        this.expressionChange()
-      }
-    },
-    copyExpression (index) {
-      this.expressions.push(this.expressions[index])
-      this.legends.push(this.legends[index])
-      this.promqlKeys.push(getUUID())
-      this.elementIds.push('')
-      this.expressionsShow.push(true)
-      this.promqlCount++
-      this.$nextTick(() => {
-        this.expressions.forEach((ex, index) => {
-          if (ex) {
-            this.$refs[`promql-${index}`][0].metricChange(ex)
-          }
-        })
-      })
-      this.expressionChange()
-    },
-    showExpression (index) {
-      console.log(index, this.expressionsShow[index - 1])
-      this.$set(this.expressionsShow, index - 1, !this.expressionsShow[index - 1])
-    },
-    chartTypeChange () {
-
-    },
-    unitSelected: function (value) {
-      // this.chartConfig.unit=value[value.length-1];
-    },
-    change () {
-      this.$nextTick(() => {
-        this.$emit('change', this.chartConfig)
-      })
     }
   },
   created () {
diff --git a/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js b/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
index 793534d52..69a53322e 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
+++ b/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
@@ -1,5 +1,12 @@
 import chartDataFormat from '@/components/charts/chartDataFormat'
-
+import { getUUID, resetZIndex } from '@/components/common/js/common'
+const rz = {
+  methods: {
+    rz (e) {
+      resetZIndex(e)
+    }
+  }
+}
 export default {
   data () {
     return {
@@ -9,10 +16,298 @@ export default {
       promqlKeys: [],
       elementIds: [],
       expressions: [],
+      expressionName: [],
       expressionsShow: [],
       spanList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
       legends: [],
-      unitOptions: chartDataFormat.unitOptions()
+      unitOptions: chartDataFormat.unitOptions(),
+      nullTypeList: [{
+        label: 'connected',
+        value: 'connected'
+      }, {
+        label: 'null',
+        value: 'null'
+      }, {
+        label: 'zero',
+        value: 'zero'
+      }],
+      statisticsList: this.$CONSTANTS.statisticsList,
+      legendPositionList: [
+        {
+          label: 'bottom',
+          value: 'bottom'
+        }, {
+          label: 'left',
+          value: 'left'
+        }, {
+          label: 'right',
+          value: 'right'
+        }
+      ],
+      mappingTypeList: [
+        {
+          label: 'Value',
+          value: 'value'
+        }, {
+          label: 'Range',
+          value: 'range'
+        }, {
+          label: 'Regx',
+          value: 'regx'
+        }
+      ],
+      letter: [
+        'A', 'B', 'C', 'D', 'E', 'F', 'G',
+        'H', 'I', 'J', 'K', 'L', 'M', 'N',
+        'O', 'P', 'Q', 'R', 'S', 'T',
+        'U', 'V', 'W', 'X', 'Y', 'Z'
+      ]
+    }
+  },
+  mixins: [rz],
+  methods: {
+    isStackShow (type) {
+      switch (type) {
+        case 'line':
+        case 'stackArea':
+        case 'point':
+          return true
+        case 'table':
+        case 'singleStat':
+        case 'bar':
+        case 'treemap':
+        case 'pie':
+          return false
+        default: return false
+      }
+    },
+    isStatisticsShow (type) {
+      switch (type) {
+        case 'line':
+        case 'stackArea':
+        case 'point':
+          return false
+        case 'table':
+        case 'singleStat':
+        case 'bar':
+        case 'treemap':
+        case 'pie':
+          return true
+        default: return false
+      }
+    },
+    isShowLegend (type) {
+      switch (type) {
+        case 'line':
+        case 'stackArea':
+        case 'point':
+          return true
+        case 'table':
+        case 'singleStat':
+        case 'bar':
+        case 'treemap':
+        case 'pie':
+          return false
+        default: return false
+      }
+    },
+    isShowValueMapping (type) {
+      switch (type) {
+        case 'line':
+        case 'stackArea':
+        case 'point':
+        case 'table':
+          return false
+        case 'singleStat':
+        case 'bar':
+        case 'treemap':
+        case 'pie':
+          return true
+        default: return false
+      }
+    },
+    expressionChange: function () {
+      if (this.expressions.length) {
+        this.chartConfig.elements = []
+        this.expressions.forEach((expr, i) => {
+          this.chartConfig.elements.push({ id: this.elementIds[i], expression: expr, type: 'expert', legend: this.legends[i], name: this.expressionName[i] })
+        })
+      } else {
+        this.chartConfig.elements = []
+      }
+      this.change()
+    },
+    transformNumToLetter (num) { // 相当于26进制 获取id
+      const self = this
+      let letter = ''
+      const loopNum = parseInt(num / 26)
+      if (loopNum > 0) {
+        letter += this.transformNumToLetter(loopNum - 1)
+      }
+      letter += self.letter[num % 26]
+      return letter
+    },
+    addExpression (item) {
+      console.log(item, 213213123)
+      if (!item) {
+        this.expressions.push('')
+        const expressionName = this.getExpressionName()
+        this.expressionName.push(expressionName)
+        this.legends.push('')
+        this.promqlKeys.push(getUUID())
+        this.elementIds.push('')
+        this.expressionsShow.push(true)
+        this.promqlCount++
+        this.expressionChange()
+      } else {
+        this.expressions.push(item.expression)
+        this.legends.push(item.legend)
+        this.promqlKeys.push(getUUID())
+        this.expressionName.push(item.name)
+        this.elementIds.push(item.id)
+        this.expressionsShow.push(true)
+        this.promqlCount++
+      }
+    },
+    getExpressionName () {
+      let name = ''
+      for (let i = 0; i <= this.expressionName.length; i++) {
+        name = this.transformNumToLetter(i)
+        if (this.expressionName.indexOf(name) === -1) { // 判断当前id是否存在 必须走了break 返回的id才是对的
+          break
+        }
+      }
+      return name
+    },
+    removeExpression (index) {
+      if (this.promqlCount > 1) {
+        this.expressions.splice(index, 1)
+        this.legends.splice(index, 1)
+        this.promqlKeys.splice(index, 1)
+        this.expressionName.splice(index, 1)
+        this.expressionsShow.splice(index, 1)
+        this.elementIds.splice(index, 1)
+        this.promqlCount--
+        this.$nextTick(() => {
+          this.expressions.forEach((ex, index) => {
+            if (ex) {
+              this.$refs[`promql-${index}`][0].metricChange(ex)
+            }
+          })
+        })
+        this.expressionChange()
+      }
+    },
+    copyExpression (index) {
+      this.expressions.push(this.expressions[index])
+      this.legends.push(this.legends[index])
+      this.promqlKeys.push(getUUID())
+      this.expressionName(this.transformNumToLetter(0))
+      this.elementIds.push('')
+      this.expressionsShow.push(true)
+      this.promqlCount++
+      this.$nextTick(() => {
+        this.expressions.forEach((ex, index) => {
+          if (ex) {
+            this.$refs[`promql-${index}`][0].metricChange(ex)
+          }
+        })
+      })
+      this.expressionChange()
+    },
+    showExpression (index) {
+      console.log(index, this.expressionsShow[index - 1])
+      this.$set(this.expressionsShow, index - 1, !this.expressionsShow[index - 1])
+    },
+    chartTypeChange () {
+      this.change()
+    },
+    unitSelected: function (value) {
+      // this.chartConfig.unit=value[value.length-1];
+      this.change()
+    },
+    thresholdShowChange () {
+      // if (this.chartConfig.param.thresholdShow) {
+      //
+      // } else {
+      //
+      // }
+      this.change()
+    },
+    addThresholds () {
+      this.chartConfig.param.thresholds.push({
+        value: '',
+        color: '#eeeeeeff'
+      })
+      this.change()
+    },
+    delThresholds (index) {
+      if (this.chartConfig.param.thresholds.length === 1) {
+        return
+      }
+      this.chartConfig.param.thresholds.splice(index, 1)
+      this.change()
+    },
+    addMapping () {
+      this.chartConfig.param.valueMapping.mapping.push({
+        type: 'value',
+        show: true,
+        value: '',
+        display: '',
+        color: {
+          bac: '#FFFFFFFF',
+          text: '#000000FF'
+        }
+      })
+      this.change()
+    },
+    copyMapping (index) {
+      this.chartConfig.param.valueMapping.mapping.push({ ...this.chartConfig.param.valueMapping.mapping[index] })
+      this.change()
+    },
+    removeMapping (index) {
+      this.chartConfig.param.valueMapping.mapping.splice(index, 1)
+      this.change()
+    },
+    showMapping (index) {
+      this.chartConfig.param.valueMapping.mapping[index].show = !this.chartConfig.param.valueMapping.mapping[index].show
+    },
+    mappingItemChange (index, type) {
+      console.log(index, type)
+      const mapping = this.chartConfig.param.valueMapping.mapping[index]
+      if (mapping.type === 'value') {
+        this.chartConfig.param.valueMapping.mapping[index] = {
+          ...mapping,
+          value: ''
+        }
+      }
+      if (mapping.type === 'range') {
+        this.chartConfig.param.valueMapping.mapping[index] = {
+          ...mapping,
+          from: '',
+          to: ''
+        }
+      }
+      if (mapping.type === 'regx') {
+        this.chartConfig.param.valueMapping.mapping[index] = {
+          ...mapping,
+          regx: ''
+        }
+      }
+      this.$set(this.chartConfig.param.valueMapping.mapping, index, this.chartConfig.param.valueMapping.mapping[index])
+      this.change()
+    },
+    colorChange (val, key, index) {
+      console.log(val, key, index)
+      if (key === 'thresholds') {
+        this.chartConfig.param.thresholds[index].color = val
+      }
+      this.change()
+    },
+    change () {
+      this.$nextTick(() => {
+        this.$emit('change', this.chartConfig)
+      })
     }
   }
 }
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index 352639a3a..2d848b136 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -195,8 +195,20 @@ export default {
         datasource: '1',
         height: 4,
         unit: 2,
-        param: { url: '', threshold: '' },
-        elements: [{ expression: '', legend: '', type: 'expert', id: '' }],
+        param: {
+          url: '',
+          threshold: '',
+          stack: 0,
+          nullType: 'null',
+          legend: { placement: 'bottom', values: [], show: true },
+          thresholdShow: true,
+          thresholds: [{ value: '', color: '#eeeeeeff' }],
+          valueMapping: {
+            show: true,
+            mapping: []
+          }
+        },
+        elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A' }],
         panel: '',
         sync: 0,
         remark: '',