diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss
index eefa8cd62..0d44c5092 100644
--- a/nezha-fronted/src/assets/css/common.scss
+++ b/nezha-fronted/src/assets/css/common.scss
@@ -186,14 +186,14 @@ td .nz-icon-gear:before{
   box-shadow: -1px 1px 10px -1px $--dropdown-menu-box-shadow-color !important;
 }
 .el-input__count-inner {
-  background-color: $--input-background-color !important;
+  background-color: $--background-color-empty !important;
 }
 .el-textarea {
   .el-textarea__inner {
     background-color: $--background-color-empty !important;
   }
   .el-input__count {
-    background-color: $--input-background-color !important;
+    background-color: $--background-color-empty !important;
   }
 }
 
@@ -219,6 +219,7 @@ td .nz-icon-gear:before{
 }
 .el-message-box {
   background-color: $--background-color-empty !important;
+  border: 1px solid $--border-color-light;
   .el-button:nth-of-type(1) {
     background-color: $--button-light-hover-background-color;
     border: 1px solid $--button-light-border-color;
@@ -327,3 +328,17 @@ td .nz-icon-gear:before{
   background-color: $--background-color-empty;
   border-color: $--border-color-light;
 }
+/* 颜色选择器 */
+.vc-sketch {
+  background-color: $--background-color-empty;
+  border: 1px solid $--border-color-light;
+  margin-top: 6px;
+  .vc-input__input {
+    background-color: $--project-input-background-color;
+    color: $--color-text-regular;
+    box-shadow: inset 0 0 0 1px $--border-color-light;
+  }
+  .vc-sketch-presets {
+    border-top: none;
+  }
+}
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 7f2318218..015663356 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
@@ -7,6 +7,16 @@
     font-size: 14px;
     .el-form {
       padding-top: 0px;
+      .thresholds-from-item{
+        margin-bottom: 0;
+        flex: 1;
+      }
+      .el-form-item__error {
+        padding-top: 0;
+      }
+      .el-input-number--small {
+        width: 100%;
+      }
     }
     .chart-title-config {
       border: 1px solid $--border-color-light;
@@ -46,6 +56,12 @@
       margin-bottom: 10px;
       align-items: center;
       justify-items: center;
+      .el-form-item__content{
+        display: flex;
+        align-items: center;
+        justify-items: center;
+        width: 100%;
+      }
       .el-input-number--small{
         display: inline-block;
         flex: 1;
@@ -90,5 +106,39 @@
       border-bottom: none;
       margin-bottom: 10px;
     }
+    .vue-tags-input{
+      display: inline-block;
+      width: 100%;
+      .ti-input{
+        padding: 1px 3px;
+      }
+    }
+    .system-chart-config {
+      display: flex;
+      height: 150px;
+      align-items: center;
+      margin-bottom: 10px;
+    }
+    .system-chart-config-left{
+      width: 40%;
+      height: 100%;
+      overflow-y: auto;
+      .system-chart-item {
+        font-size: 14px;
+        padding: 3px 5px;
+      }
+      .system-chart-item:hover{
+        color: $--color-primary;
+        background: $--background-color-base !important;
+      }
+      .system-chart-item.is-select{
+        color: $--color-text-secondary;
+      }
+    }
+    .system-chart-config-right{
+      flex: 1;
+      margin-left: 10px;
+      height: 100%;
+    }
   }
 }
diff --git a/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss b/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss
index 7270705eb..44e5b9fa2 100644
--- a/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss
+++ b/nezha-fronted/src/assets/css/components/page/monitor/project/project.scss
@@ -77,19 +77,6 @@
     height: 36px;
     color: $--color-text-primary;
   }
-  .vc-sketch {
-    background-color: $--background-color-empty;
-    border: 1px solid $--border-color-light;
-    margin-top: 6px;
-    .vc-input__input {
-      background-color: $--project-input-background-color;
-      color: $--color-text-regular;
-      box-shadow: inset 0 0 0 1px $--border-color-light;
-    }
-    .vc-sketch-presets {
-      border-top: none;
-    }
-  }
 }
 .project-calendar .el-input__inner {
   height: 24px;
@@ -131,3 +118,13 @@
   background-color: $--background-color-empty;
   border: 1px solid $--border-color-light;
 }
+.el-collapse {
+  border-bottom: 1px solid $--border-color-light;
+  border-top: 1px solid $--border-color-light;
+}
+.el-collapse-item__header:nth-of-type(1) {
+  border-bottom: none;
+}
+.el-collapse-item__header {
+  border-bottom: 1px solid $--border-color-light;
+}
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
new file mode 100644
index 000000000..9d120da90
--- /dev/null
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
@@ -0,0 +1,780 @@
+<template>
+  <div class="chart-config">
+    <el-form
+      ref="chartForm"
+      :model="chartConfig"
+      :rules="rules"
+      label-position= "top"
+      label-width="120px"
+    >
+      <div
+        v-if="chartConfig.elements"
+      >
+        <el-form-item
+          :key="index"
+          class="element-item form-row-item thresholds-from-item"
+          style=""
+          v-for="index of chartConfig.elements.length"
+          :prop="'elements.' + (index -1) + '.expression'"
+          :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
+        >
+          <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('')">
+                  <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="copyExpression(index - 1)" class="nz-icon nz-icon-override"></i>
+              </span>
+              <span class="nz-icon-minus-medium">
+                  <i @click="removeExpression(index - 1)" class="nz-icon nz-icon-minus"></i>
+              </span>
+            </span>
+          </div>
+          <transition name="el-zoom-in-top">
+            <el-row v-show="expressionsShow[index-1]">
+              <promql-input
+                :from-father-data="true"
+                :metricOptionsParent="metricOptions"
+                :expression-list="expressions"
+                :id="promqlKeys[index-1]"
+                :index="index-1"
+                :required = 'true'
+                :type="promqlType"
+                :key="promqlKeys[index-1]"
+                :plugins="['metric-selector', 'metric-input', 'remove']"
+                :ref="'promql-'+(index-1)"
+                :showRemove="false"
+                :styleType="2"
+                @change="expressionChange"
+                @removeExpression="removeExpression"
+              ></promql-input>
+              <el-row style="margin-top: 18px">
+                <el-col class="legend-title">
+                  <span class="legend-title__span">{{$t('dashboard.panel.chartForm.legend')}}&nbsp;</span>
+                  <el-popover placement="top" trigger="hover" width="211" popper-class="prevent-clickoutside">
+                    <div :style="{'word-break':language!=='cn'?'keep-all':'break-all'}">{{$t('dashboard.panel.chartForm.legendTip')}}</div>
+                    <i @mouseover="rz" class="nz-icon nz-icon-info-normal" slot="reference" style="font-size: 14px; -webkit-transform:scale(0.75);display:inline-block;"></i>
+                  </el-popover>
+                </el-col>
+                <el-col style="width: calc(100% - 160px);">
+                  <el-input maxlength="512" show-word-limit size="small" type="text" v-model="legends[index-1]" ></el-input>
+                </el-col>
+              </el-row>
+            </el-row>
+          </transition>
+        </el-form-item>
+      </div>
+
+      <!--title-->
+      <div class="form__sub-title">
+        <span>{{$t('dashboard.panel.chartForm.displayConfig')}}</span>
+      </div>
+      <div class="form-items--half-width-group">
+        <!-- type -->
+        <el-form-item
+          :label="$t('dashboard.panel.chartForm.type')"
+          class="form-item--half-width"
+          prop="type"
+        >
+          <el-select
+            id="chart-box-type"
+            v-model="chartConfig.type"
+            :disabled="chartConfig.type==='group'&&chartConfig.children&&chartConfig.children.length"
+            placeholder=""
+            popper-class="right-box-select-top prevent-clickoutside"
+            size="small"
+            value-key="chartType"
+            @change="chartTypeChange">
+            <el-option
+              v-for="item in chartTypeList"
+              :key="item.id"
+              :disabled="
+               item.id==='group' && chartConfig.isGroup"
+              :label="item.name"
+              :value="item.id">
+              <span class="panel-dropdown-label-txt" >{{item.name}}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+
+        <!-- unit -->
+        <el-form-item
+          v-show="!isTable(chartConfig.type)&&!isLog(chartConfig.type)"
+          :label="$t('dashboard.panel.chartForm.unit')"
+          class="form-item--half-width"
+          prop="unit"
+        >
+          <el-cascader id="chart-box-unit"
+                       v-model="chartConfig.unit"
+                       :options="unitOptions"
+                       :props="{ expandTrigger: 'hover',emitPath:false }"
+                       :show-all-levels="false" filterable
+                       placeholder=""
+                       popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top prevent-clickoutside chart-box-unit"
+                       size="small"
+                       style="width: 100%"
+                       @change="unitSelected"
+          >
+          </el-cascader>
+        </el-form-item>
+
+        <!-- index -->
+        <el-form-item
+          v-show="isTable(chartConfig.type)"
+          :label="$t('dashboard.panel.chartForm.tableIndex')"
+          class="form-item--half-width"
+          prop="param.index"
+        >
+          <vue-tags-input
+            v-model="chartConfig.param.indexs"
+            :maxlength="32"
+            :placeholder="$t('overall.addParameter')"
+            :tags="chartConfig.param.tags"
+            @tags-changed="(newTags)=>{tagsChange(newTags)}"
+          />
+        </el-form-item>
+
+        <!-- limit -->
+        <el-form-item
+          v-show="isLog(chartConfig.type)"
+          :label="$t('dashboard.panel.chartForm.limit')"
+          class="form-item--half-width"
+          prop="param.limit">
+          <el-input-number
+            size="small"
+            placeholder=""
+            v-model="chartConfig.param.limit"
+            :controls="false"
+            @change="change"/>
+        </el-form-item>
+
+        <!--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"
+            @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>
+
+        <!--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"
+            @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="param.stack"
+          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="param.nullType"
+          v-if="!isLog(chartConfig.type)"
+        >
+          <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="param.legend.placement"
+            >
+              <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="param.legend.values"
+            >
+              <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">
+            <el-form-item
+              v-for="(item,index) in chartConfig.param.thresholds"
+              :key="index"
+              class="thresholds-item"
+              :prop="'param.thresholds.' + index + '.value'"
+              :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
+            >
+              <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"
+                style="margin-top: 3px"
+                placeholder=""
+                v-model="item.value"
+                :controls="false"
+                @blur="sortThresholds"
+                @change="change"
+              />
+              <span
+                @click="delThresholds(index)"
+                class="del-thresholds-icon"
+              >
+              <i class="nz-icon nz-icon-delete" />
+            </span>
+            </el-form-item>
+            <div @click="addThresholds" class="thresholds-add">
+              Add thresholds
+            </div>
+          </el-row>
+        </transition>
+      </div>
+      <!--      valueMapping  -->
+      <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>
+                  <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('')">
+                      <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"
+                >
+                  <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-form-item
+                    v-if="item.type === 'value'"
+                    :prop="'param.valueMapping.mapping.' + index + 'value'"
+                    :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
+                    class="thresholds-from-item"
+                  >
+                    <el-input-number
+                      :controls="false"
+                      size="small"
+                      v-model="item.value"
+                      placeholder="value"
+                    ></el-input-number>
+                  </el-form-item>
+                  <el-form-item
+                    v-if="item.type === 'range'"
+                    :prop="'param.valueMapping.mapping.' + index + 'from'"
+                    :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
+                    class="thresholds-from-item"
+                  >
+                    <el-input-number
+                      :controls="false"
+                      size="small"
+                      v-model="item.from"
+                      placeholder="from"
+                    ></el-input-number>
+                  </el-form-item>
+                  <el-form-item
+                    v-if="item.type === 'range'"
+                    :prop="'param.valueMapping.mapping.' + index + 'to'"
+                    :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
+                    class="thresholds-from-item"
+                  >
+                    <el-input-number
+                      :controls="false"
+                      size="small"
+                      v-model="item.to"
+                      placeholder="to"
+                    ></el-input-number>
+                  </el-form-item>
+                  <el-form-item
+                    v-if="item.type === 'regx'"
+                    :prop="'param.valueMapping.mapping.' + index + 'regx'"
+                    :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
+                    class="thresholds-from-item"
+                  >
+                    <el-input
+                      size="small"
+                      v-model="item.regx"
+                      placeholder="regx"
+                    ></el-input>
+                  </el-form-item>
+                </el-row>
+                <el-row v-show="item.show" :key="2" class="thresholds-item">
+                  <div>
+                    <div class='mapping-display'>Display</div>
+                  </div>
+                  <el-form-item :prop="'param.valueMapping.mapping.' + index + 'display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item">
+                    <el-input v-model="item.display"  style="margin-right: 10px" size="small"/>
+                  </el-form-item>
+                  <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>
+            <div @click="addMapping" class="thresholds-add">
+              Add valueMapping
+            </div>
+          </el-row>
+        </transition>
+      </div>
+
+      <!--      table column-->
+      <div v-if="isTable(chartConfig.type)">
+        <div class="form__sub-title">
+          <span>{{$t('dashboard.panel.chartForm.valueMapping')}}</span>
+        </div>
+        <div v-for="(item,index) in chartConfig.param.columns" :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="showColumns(index)"></i>
+                  <span v-show="!item.show" class="title-content-left">
+                    <span>
+                      {{item.value}}
+                    </span>
+                  </span>
+                </span>
+            <span>
+                  <span @click="addColumns('')">
+                      <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="copyColumns(index)" class="nz-icon nz-icon-override"></i>
+                  </span>
+                  <span class="nz-icon-minus-medium">
+                      <i @click="removeColumns(index)" class="nz-icon nz-icon-minus"></i>
+                  </span>
+                </span>
+          </div>
+          <transition-group appear tag="div" name="el-zoom-in-top">
+            <el-row class="thresholds-item" v-show="item.show" :key="1">
+              <div>
+                <div class='mapping-display'>Title</div>
+              </div>
+              <el-form-item :prop="'param.columns.' + index + 'title'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item">
+                <el-input size="small" v-model="item.title" placeholder="regx"></el-input>
+              </el-form-item>
+              <div>
+                <div class='mapping-display'>Unit</div>
+              </div>
+              <el-cascader :id="'columns-unit' + index" v-model="item.unit" :options="unitOptions" :props="{ expandTrigger: 'hover',emitPath:false }"  :show-all-levels="false" filterable
+                           placeholder=""
+                           popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top prevent-clickoutside chart-box-unit"
+                           size="small"
+                           style="width: 100%"
+                           @change="unitSelected"
+              >
+              </el-cascader>
+            </el-row>
+            <el-row class="thresholds-item" v-show="item.show" :key="2">
+              <div>
+                <div class='mapping-display'>Display</div>
+              </div>
+              <el-form-item :prop="'param.columns.' + index + 'display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item">
+                <el-input v-model="item.display"  style="margin-right: 10px" size="small"/>
+              </el-form-item>
+            </el-row>
+          </transition-group>
+        </div>
+        <div @click="addColumns" class="thresholds-add">
+          Add Colums
+        </div>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import promqlInput from '@/components/page/dashboard/explore/promqlInput'
+import nezhaColor from '@/components/common/nezhaColor'
+import promqlInputMixin from '@/components/common/mixin/promqlInput'
+import publicConfig from '@/components/common/rightBox/chart/publicConfig'
+import chartTypeShow from '@/components/common/rightBox/chart/chartTypeShow'
+import VueTagsInput from '@johmun/vue-tags-input'
+export default {
+  name: 'chartConfig',
+  components: {
+    promqlInput,
+    nezhaColor,
+    VueTagsInput
+  },
+  props: {
+    type: {
+      type: String,
+      default: 'metrics'
+    }
+  },
+  watch: {
+    type: {
+      immediate: true,
+      handler (n) {
+        this.beforeInit()
+      }
+    }
+  },
+  mixins: [promqlInputMixin, publicConfig, chartTypeShow],
+  computed: {},
+  data () {
+    return {
+      rules: {
+        'param.limit': [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ]
+      },
+      promqlType: 'log',
+      chartTypeList: [
+        {
+          id: 'line',
+          name: this.$t('dashboard.panel.chartForm.typeVal.line.label')
+        },
+        {
+          id: 'stackArea',
+          name: this.$t('dashboard.panel.chartForm.typeVal.stackArea.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')
+        },
+        {
+          id: 'log',
+          name: this.$t('dashboard.panel.chartForm.typeVal.log.label')
+        },
+        {
+          id: 'table',
+          name: this.$t('dashboard.panel.chartForm.typeVal.table.label')
+        }
+
+      ]
+    }
+  },
+  methods: {
+    beforeInit () {
+      this.promqlType = this.type
+      this.chartTypeList = this[this.type + 'ChartTypeList']
+    },
+    init () {
+      this.chartConfig = JSON.parse(JSON.stringify(this.params))
+      // 重置相关属性
+      this.promqlCount = 0
+      this.promqlKeys = []
+      this.elementIds = []
+      this.expressions = []
+      this.expressionsShow = []
+      this.legends = []
+      if (!this.chartConfig.elements.length) {
+        this.addExpression()
+      } else {
+        this.chartConfig.elements.forEach(item => {
+          this.addExpression(item)
+        })
+      }
+    },
+    chartTypeChange (type) {
+      switch (type) {
+        case 'line':
+        case 'stackArea':
+        case 'point':
+          this.chartConfig.param = {
+            stack: 0,
+            nullType: this.chartConfig.param.nullType,
+            legend: { placement: 'bottom', values: [], show: true },
+            thresholdShow: true,
+            thresholds: []
+          }
+          this.$nextTick(() => {
+            this.chartConfig.param.thresholds.push({ value: undefined, color: '#eeeeeeff' })
+          })
+          break
+        case 'singleStat':
+        case 'bar':
+        case 'treemap':
+        case 'pie':
+          this.chartConfig.param = {
+            nullType: this.chartConfig.param.nullType,
+            statistics: 'last',
+            valueMapping: {
+              show: true,
+              mapping: []
+            }
+          }
+          break
+        case 'table':
+          this.chartConfig.param = {
+            nullType: this.chartConfig.param.nullType,
+            statistics: 'last',
+            columns: [],
+            tags: [],
+            indexs: ''
+          }
+          break
+        case 'log':
+          this.chartConfig.param = {
+            limit: 100
+          }
+          break
+      }
+      this.change()
+    },
+    sortThresholds () {
+      if (this.param && 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
+        })
+      }
+      this.change()
+    },
+    thresholdShowChange () {
+      // if (this.chartConfig.param.thresholdShow) {
+      //
+      // } else {
+      //
+      // }
+      this.change()
+    },
+    addThresholds () {
+      this.chartConfig.param.thresholds.push({
+        value: undefined,
+        color: '#eeeeeeff'
+      })
+      this.change()
+    },
+    delThresholds (index) {
+      if (this.chartConfig.param.thresholds.length === 1) {
+        return
+      }
+      this.chartConfig.param.thresholds.splice(index, 1)
+      this.change()
+    }
+  },
+  created () {
+    this.init()
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
index 50ae6d165..1d206fa5c 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
@@ -15,7 +15,7 @@
     <!-- begin--表单-->
     <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-form-item :label='$t("dashboard.panel.chartForm.name")' prop="name">
           <el-input maxlength="64" show-word-limit size="small" v-model="editChart.name" id="chart-box-title"></el-input>
         </el-form-item>
 
@@ -59,16 +59,16 @@
         </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" @change="editChartChange"/>
+            <chart-config  ref="childrenFrom1" :type="'metrics'" 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"/>
+            <chart-config ref="childrenFrom2" :type="'log'" v-if="editChart.datasource == 2" :params.sync="editChart" @change="editChartChange"/>
           </el-tab-pane>
           <el-tab-pane label="System" name="3">
-            <system-chart-config  v-if="editChart.datasource == 3" :params.sync="editChart"/>
+            <system-chart-config ref="childrenFrom3" v-if="editChart.datasource == 3" :params.sync="editChart"/>
           </el-tab-pane>
-          <el-tab-pane label="Other" name="4">
-            <other-chart-config  v-if="editChart.datasource == 4" :params.sync="editChart"/>
+          <el-tab-pane label="Misc" name="4">
+            <other-chart-config ref="childrenFrom4" v-if="editChart.datasource == 4" :params.sync="editChart"/>
           </el-tab-pane>
         </el-tabs>
       </el-form>
@@ -84,7 +84,7 @@
       <button v-else-if="from!=='chartTemp'" id="chart-box-preview" class="footer__btn">
         <span>{{$t('overall.preview')}}</span>
       </button>
-      <button id="chart-box-save" v-has="'panel_chart_add'" :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" class="footer__btn">
+      <button id="chart-box-save" v-has="'panel_chart_add'" :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" class="footer__btn" @click="save">
         <span>{{$t('overall.save')}}</span>
       </button>
     </div>
@@ -102,8 +102,7 @@ import richTextEditor from '@/components/charts/richTextEditor'
 import selectPanel from '@/components/common/popBox/selectPanel'
 import nezhaColor from '@/components/common/nezhaColor'
 import diagram from '@/components/common/ChartDiagram/diagram'
-import metricsChartConfig from '@/components/common/rightBox/chart/metricsChartConfig'
-import logsChartConfig from '@/components/common/rightBox/chart/logsChartConfig'
+import chartConfig from '@/components/common/rightBox/chart/chartConfig'
 import otherChartConfig from '@/components/common/rightBox/chart/otherChartConfig'
 import systemChartConfig from '@/components/common/rightBox/chart/systemChartConfig'
 const rz = {
@@ -136,8 +135,7 @@ export default {
     selectPanel,
     nezhaColor,
     diagram,
-    metricsChartConfig,
-    logsChartConfig,
+    chartConfig,
     systemChartConfig,
     otherChartConfig
   },
@@ -156,6 +154,8 @@ export default {
       groupArr: [],
       panelName: '',
       rules: {
+        name: [{ required: true, message: this.$t('validate.required'), trigger: 'change' }],
+        panelName: [{ required: true, message: this.$t('validate.required'), trigger: 'change' }]
       }
     }
   },
@@ -171,24 +171,20 @@ export default {
     },
     // 保存endpoint
     save () {
-      if (this.prevent_opt.save) { return } ;
-      this.prevent_opt.save = true
-      // 对endpointList进行处理，避免携带过多无用数据
-      const endpointList = []
-      this.endpointTableData.forEach((item, index) => {
-        const endpoint = {
-          moduleId: item.moduleId,
-          assetId: item.assetId,
-          name: item.name,
-          configs: JSON.stringify(item.configs),
-          id: item.id
-        }
-        endpointList.push(endpoint)
-      })
-      this.$refs.addEndpoint.validate((valid) => {
-        if (valid) {
-          this.$put('monitor/endpoint', endpointList).then(response => {
-            this.prevent_opt.save = false
+      const arr = [this.$refs.chartForm.validate()]
+      arr.push(this.$refs['childrenFrom' + this.editChart.datasource].$refs.chartForm.validate())
+      Promise.all(arr).then(res => {
+        if (this.editChart.id) { // 修改
+          this.$put('visual/panel/chart', this.editChart).then(response => {
+            if (response.code === 200) {
+              this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+              this.esc(true)
+            } else {
+              this.$message.error(response.msg)
+            }
+          })
+        } else { // 新增
+          this.$post('visual/panel/chart', this.editChart).then(response => {
             if (response.code === 200) {
               this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
               this.esc(true)
@@ -196,10 +192,9 @@ export default {
               this.$message.error(response.msg)
             }
           })
-        } else {
-          this.prevent_opt.save = false
-          return false
         }
+      }).catch(res => {
+        console.log(res)
       })
     },
     selectPanel (panel) {
@@ -235,8 +230,7 @@ export default {
         }
       })
     },
-    datasourceChange (val, e) {
-      console.log(val, e, this.editChart.datasource)
+    datasourceChange () {
       if (this.editChart.datasource == 1) {
         this.editChart = {
           ...this.editChart,
@@ -250,10 +244,53 @@ export default {
             nullType: 'null',
             legend: { placement: 'bottom', values: [], show: true },
             thresholdShow: true,
-            thresholds: [{ value: '', color: '#eeeeeeff' }]
+            thresholds: [{ value: undefined, color: '#eeeeeeff' }]
           }
         }
       }
+      if (this.editChart.datasource == 2) {
+        this.editChart = {
+          ...this.editChart,
+          span: 4,
+          height: 4,
+          unit: 2,
+          type: 'log',
+          elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A' }],
+          param: {
+            limit: 100
+          }
+        }
+      }
+      if (this.editChart.datasource == 3) {
+        this.editChart = {
+          ...this.editChart,
+          span: 4,
+          height: 4,
+          unit: 2,
+          type: 'stat',
+          param: {
+            refer: 1,
+            system: '',
+            systemGroup: '',
+            systemSelect: '',
+            sort: 'desc',
+            limit: 100
+          }
+        }
+        delete this.editChart.elements
+      }
+      if (this.editChart.datasource == 4) {
+        this.editChart = {
+          ...this.editChart,
+          span: 4,
+          height: 4,
+          type: 'url',
+          param: {
+            url: ''
+          }
+        }
+        delete this.editChart.elements
+      }
     },
     editChartChange (newEditChart) {
       this.editChart = JSON.parse(JSON.stringify(newEditChart))
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartTypeShow.js b/nezha-fronted/src/components/common/rightBox/chart/chartTypeShow.js
new file mode 100644
index 000000000..138c18788
--- /dev/null
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartTypeShow.js
@@ -0,0 +1,123 @@
+export default {
+  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
+      }
+    },
+    isTable (type) {
+      switch (type) {
+        case 'table':
+          return true
+        case 'line':
+        case 'stackArea':
+        case 'point':
+        case 'singleStat':
+        case 'bar':
+        case 'treemap':
+        case 'pie':
+          return false
+        default: return false
+      }
+    },
+    isLog (type) {
+      switch (type) {
+        case 'log':
+          return true
+        case 'table':
+        case 'line':
+        case 'stackArea':
+        case 'point':
+        case 'singleStat':
+        case 'bar':
+        case 'treemap':
+        case 'pie':
+          return false
+        default: return false
+      }
+    },
+    isUrl (type) {
+      switch (type) {
+        case 'url':
+          return true
+        default: return false
+      }
+    },
+    isDiagram (type) {
+      switch (type) {
+        case 'diagram':
+          return true
+        default: return false
+      }
+    },
+    isText (type) {
+      switch (type) {
+        case 'text':
+          return true
+        default: return false
+      }
+    },
+    isGroup (type) {
+      switch (type) {
+        case 'group':
+          return true
+        default: return false
+      }
+    }
+  }
+}
diff --git a/nezha-fronted/src/components/common/rightBox/chart/logsChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/logsChartConfig.vue
deleted file mode 100644
index b53662a50..000000000
--- a/nezha-fronted/src/components/common/rightBox/chart/logsChartConfig.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <div>
-    logs
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'metricsChartConfig'
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/nezha-fronted/src/components/common/rightBox/chart/metricsChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/metricsChartConfig.vue
index 561454c67..4e01efdee 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/metricsChartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/metricsChartConfig.vue
@@ -1,9 +1,11 @@
 <template>
   <div class="chart-config">
-    <el-form ref="metricschartForm" :model="chartConfig" :rules="rules" label-position= "top" label-width="120px">
+    <el-form ref="chartForm" :model="chartConfig" :rules="rules" label-position= "top" label-width="120px">
       <div v-if="chartConfig.elements">
-          <el-row
-          :key="'ele' + index" class="element-item form-row-item" style="" v-for="index of chartConfig.elements.length"
+        <el-form-item
+          :key="index" class="element-item form-row-item thresholds-from-item" style="" v-for="index of chartConfig.elements.length"
+          :prop="'elements.' + (index -1) + '.expression'"
+          :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
         >
           <div class="chart-title chart-title-config">
             <span class="endpoint-title-content">
@@ -57,7 +59,7 @@
               </el-row>
             </el-row>
           </transition>
-        </el-row>
+        </el-form-item>
       </div>
 
 <!--title-->
@@ -83,7 +85,7 @@
         </el-form-item>
 
         <!-- unit -->
-        <el-form-item v-show="chartConfig.type !='text' && chartConfig.type !=='url'&& chartConfig.type !=='group'&& chartConfig.type !=='diagram'" :label="$t('dashboard.panel.chartForm.unit')" class="form-item--half-width" prop="unit">
+        <el-form-item v-show="!isTable(chartConfig.type)" :label="$t('dashboard.panel.chartForm.unit')" class="form-item--half-width" prop="unit">
           <el-cascader id="chart-box-unit" v-model="chartConfig.unit" :options="unitOptions" :props="{ expandTrigger: 'hover',emitPath:false }"  :show-all-levels="false" filterable
                        placeholder=""
                        popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top prevent-clickoutside chart-box-unit"
@@ -94,6 +96,17 @@
           </el-cascader>
         </el-form-item>
 
+        <!-- index -->
+        <el-form-item v-show="isTable(chartConfig.type)" :label="$t('dashboard.panel.chartForm.tableIndex')" class="form-item--half-width" prop="unit">
+          <vue-tags-input
+            v-model="chartConfig.param.indexs"
+            :maxlength="32"
+            :placeholder="$t('overall.addParameter')"
+            :tags="chartConfig.param.tags"
+            @tags-changed="(newTags)=>{tagsChange(newTags)}"
+          />
+        </el-form-item>
+
         <!--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" @change="change">
@@ -148,12 +161,12 @@
         </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-form-item :label="$t('dashboard.panel.chartForm.legendPosition')" class="form-item--half-width"  prop="param.legend.placement">
               <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-form-item :label="$t('dashboard.panel.chartForm.legendValues')" class="form-item--half-width"  prop="param.legend.values">
               <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>
@@ -169,14 +182,20 @@
         </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">
+            <el-form-item
+              v-for="(item,index) in chartConfig.param.thresholds"
+              :key="index"
+              class="thresholds-item"
+              :prop="'param.thresholds.' + index + '.value'"
+              :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
+            >
               <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" @change="change"/>
               <span @click="delThresholds(index)" class="del-thresholds-icon">
               <i class="nz-icon nz-icon-delete" />
             </span>
-            </div>
+            </el-form-item>
             <div @click="addThresholds" class="thresholds-add">
               Add thresholds
             </div>
@@ -225,22 +244,36 @@
                 </span>
               </div>
               <transition-group appear tag="div" name="el-zoom-in-top">
-                <el-row v-show="item.show" :key="1" class="thresholds-item">
+                <el-row
+                  v-show="item.show"
+                  :key="1"
+                  class="thresholds-item"
+                >
                   <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-form-item v-if="item.type === 'value'" :prop="'param.valueMapping.mapping.' + index + 'value'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"  class="thresholds-from-item">
+                    <el-input-number :controls="false" size="small" v-model="item.value" placeholder="value"></el-input-number>
+                  </el-form-item>
+                  <el-form-item v-if="item.type === 'range'" :prop="'param.valueMapping.mapping.' + index + 'from'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"  class="thresholds-from-item">
+                    <el-input-number :controls="false"  size="small" v-model="item.from" placeholder="from"></el-input-number>
+                  </el-form-item>
+                  <el-form-item v-if="item.type === 'range'" :prop="'param.valueMapping.mapping.' + index + 'to'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item">
+                    <el-input-number :controls="false"  size="small" v-model="item.to" placeholder="to"></el-input-number>
+                  </el-form-item>
+                  <el-form-item v-if="item.type === 'regx'" :prop="'param.valueMapping.mapping.' + index + 'regx'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"  class="thresholds-from-item">
+                    <el-input size="small" v-model="item.regx" placeholder="regx"></el-input>
+                  </el-form-item>
                 </el-row>
-                <el-row v-show="item.show" :key="2" class="thresholds-item" style="position: relative">
+                <el-row v-show="item.show" :key="2" class="thresholds-item">
                   <div>
                     <div class='mapping-display'>Display</div>
                   </div>
-                  <el-input v-model="item.display"  style="margin-right: 10px" size="small"/>
+                  <el-form-item :prop="'param.valueMapping.mapping.' + index + 'display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item">
+                    <el-input v-model="item.display"  style="margin-right: 10px" size="small"/>
+                  </el-form-item>
                   <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>
@@ -254,7 +287,63 @@
 
 <!--      table column-->
       <div v-if="isTable(chartConfig.type)">
-
+        <div class="form__sub-title">
+          <span>{{$t('dashboard.panel.chartForm.valueMapping')}}</span>
+        </div>
+        <div v-for="(item,index) in chartConfig.param.columns" :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="showColumns(index)"></i>
+                  <span v-show="!item.show" class="title-content-left">
+                    <span>
+                      {{item.value}}
+                    </span>
+                  </span>
+                </span>
+            <span>
+                  <span @click="addColumns('')">
+                      <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="copyColumns(index)" class="nz-icon nz-icon-override"></i>
+                  </span>
+                  <span class="nz-icon-minus-medium">
+                      <i @click="removeColumns(index)" class="nz-icon nz-icon-minus"></i>
+                  </span>
+                </span>
+          </div>
+          <transition-group appear tag="div" name="el-zoom-in-top">
+            <el-row class="thresholds-item" v-show="item.show" :key="1">
+              <div>
+                <div class='mapping-display'>Title</div>
+              </div>
+              <el-form-item :prop="'param.columns.' + index + 'title'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item">
+                <el-input size="small" v-model="item.title" placeholder="regx"></el-input>
+              </el-form-item>
+              <div>
+                <div class='mapping-display'>Unit</div>
+              </div>
+              <el-cascader :id="'columns-unit' + index" v-model="item.unit" :options="unitOptions" :props="{ expandTrigger: 'hover',emitPath:false }"  :show-all-levels="false" filterable
+                           placeholder=""
+                           popper-class="dc-dropdown right-box-select-top right-public-box-dropdown-top prevent-clickoutside chart-box-unit"
+                           size="small"
+                           @change="unitSelected"
+              >
+              </el-cascader>
+            </el-row>
+            <el-row class="thresholds-item" v-show="item.show" :key="2">
+              <div>
+                <div class='mapping-display'>Display</div>
+              </div>
+              <el-form-item :prop="'param.columns.' + index + 'display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}" class="thresholds-from-item">
+                <el-input v-model="item.display"  style="margin-right: 10px" size="small"/>
+              </el-form-item>
+            </el-row>
+          </transition-group>
+        </div>
+        <div @click="addColumns" class="thresholds-add">
+          Add Colums
+        </div>
       </div>
     </el-form>
   </div>
@@ -265,6 +354,8 @@ import promqlInput from '@/components/page/dashboard/explore/promqlInput'
 import nezhaColor from '@/components/common/nezhaColor'
 import promqlInputMixin from '@/components/common/mixin/promqlInput'
 import publicConfig from '@/components/common/rightBox/chart/publicConfig'
+import chartTypeShow from '@/components/common/rightBox/chart/chartTypeShow'
+import VueTagsInput from '@johmun/vue-tags-input'
 export default {
   name: 'metricsChartConfig',
   props: {
@@ -272,9 +363,10 @@ export default {
   },
   components: {
     promqlInput,
-    nezhaColor
+    nezhaColor,
+    VueTagsInput
   },
-  mixins: [promqlInputMixin, publicConfig],
+  mixins: [promqlInputMixin, publicConfig, chartTypeShow],
   computed: {},
   data () {
     return {
@@ -352,7 +444,7 @@ export default {
             thresholds: []
           }
           this.$nextTick(() => {
-            this.chartConfig.param.thresholds.push({ value: '', color: '#eeeeeeff' })
+            this.chartConfig.param.thresholds.push({ value: undefined, color: '#eeeeeeff' })
           })
           break
         case 'singleStat':
@@ -372,7 +464,9 @@ export default {
           this.chartConfig.param = {
             nullType: this.chartConfig.param.nullType,
             statistics: 'last',
-            column: []
+            columns: [],
+            tags: [],
+            indexs: ''
           }
           break
       }
@@ -398,7 +492,7 @@ export default {
     },
     addThresholds () {
       this.chartConfig.param.thresholds.push({
-        value: '',
+        value: undefined,
         color: '#eeeeeeff'
       })
       this.change()
@@ -409,81 +503,6 @@ export default {
       }
       this.chartConfig.param.thresholds.splice(index, 1)
       this.change()
-    },
-    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
-      }
-    },
-    isTable (type) {
-      switch (type) {
-        case 'table':
-          return true
-        case 'line':
-        case 'stackArea':
-        case 'point':
-        case 'singleStat':
-        case 'bar':
-        case 'treemap':
-        case 'pie':
-          return false
-        default: return false
-      }
     }
   },
   created () {
diff --git a/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
index 6e31823f1..4ff8594c7 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
@@ -1,12 +1,205 @@
 <template>
-  <div>
-    other
+  <div class="chart-config">
+    <el-form
+      ref="chartForm"
+      :model="chartConfig"
+      :rules="rules"
+      label-position= "top"
+      label-width="120px"
+    >
+      <!--title-->
+      <div class="form__sub-title">
+        <span>{{$t('dashboard.panel.chartForm.displayConfig')}}</span>
+      </div>
+      <div class="form-items--half-width-group">
+        <!-- type -->
+        <el-form-item
+          :label="$t('dashboard.panel.chartForm.type')"
+          class="form-item--half-width"
+          prop="type"
+        >
+          <el-select
+            id="chart-box-type"
+            v-model="chartConfig.type"
+            :disabled="chartConfig.type==='group'&&chartConfig.children&&chartConfig.children.length"
+            placeholder=""
+            popper-class="right-box-select-top prevent-clickoutside"
+            size="small"
+            value-key="chartType"
+            @change="chartTypeChange">
+            <el-option
+              v-for="item in chartTypeList"
+              :key="item.id"
+              :disabled="item.id==='group' && chartConfig.isGroup"
+              :label="item.name"
+              :value="item.id">
+              <span class="panel-dropdown-label-txt" >{{item.name}}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <!--Default collapse-->
+        <el-form-item class="form-item--half-width" v-if="isGroup(chartConfig.type)" :label='$t("dashboard.panel.chartForm.collapse")' prop="param.collapse">
+          <el-switch id="chart-box-collapse"
+                     v-model="chartConfig.param.collapse"
+                     :active-value="true"
+                     :inactive-value="false"
+                     size="small"/>
+        </el-form-item>
+      </div>
+      <div class="form-items--half-width-group" v-if="!isGroup(chartConfig.type)">
+        <!--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"
+            @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>
+
+        <!--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"
+            @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>
+      </div>
+      <!--content-->
+      <div v-if="!isGroup(chartConfig.type)" class="form__sub-title">
+        <span>{{$t('dashboard.panel.chartForm.content')}}</span>
+        <span style="cursor: pointer" v-if="isDiagram(chartConfig.type)"><i class="nz-icon nz-icon-edit" @click="topologyDialogChange(true)"></i></span>
+      </div>
+      <!--url-->
+      <el-form-item v-if="isUrl(chartConfig.type)" :label='$t("dashboard.panel.chartForm.url")' :rules="{ required: true,  message: $t('validate.required'), trigger: 'blur' }" prop="param.url">
+        <el-input id="chart-box-url" v-model="chartConfig.param.url" maxlength="1024" show-word-limit size="small" type="textarea"></el-input>
+      </el-form-item>
+      <!--topoData-->
+      <el-form-item v-if="isDiagram(chartConfig.type)" >
+        <div class="topology-box">
+          <div class="topology-mc"></div>
+          <diagram :topoData="chartConfig.param.topo" :fromChartBox="true" :topologyIndexF="-1"/>
+        </div>
+      </el-form-item>
+      <!--topplogy-->
+      <diagram :topoData="chartConfig.param.topo" class="topology-dialog" v-if="topologyDialog" @change="topologyDialogChange" :topologyIndexF="-2" ref="topologyDialog" :fromTopologyDialog="true"/>
+      <!--text-->
+      <rich-text-editor v-if="isText(chartConfig.type)" ref="richTextEditor" :edit-data="chartConfig.param.text"></rich-text-editor>
+    </el-form>
   </div>
 </template>
 
 <script>
+import publicConfig from '@/components/common/rightBox/chart/publicConfig'
+import chartTypeShow from '@/components/common/rightBox/chart/chartTypeShow'
+import diagram from '@/components/common/ChartDiagram/diagram'
+import richTextEditor from '@/components/charts/richTextEditor'
 export default {
-  name: 'otherChartConfig'
+  name: 'otherChartConfig',
+  mixins: [publicConfig, chartTypeShow],
+  components: {
+    diagram,
+    richTextEditor
+  },
+  data () {
+    return {
+      rules: {},
+      topologyDialog: false,
+      chartTypeList: [
+        {
+          id: 'url',
+          name: this.$t('dashboard.panel.chartForm.typeVal.url.label')
+        },
+        {
+          id: 'text',
+          name: this.$t('dashboard.panel.chartForm.typeVal.text.label')
+        },
+        {
+          id: 'diagram',
+          name: this.$t('dashboard.panel.chartForm.typeVal.diagram.label')
+        },
+        {
+          id: 'group',
+          name: this.$t('dashboard.panel.chartForm.typeVal.group.label')
+        }
+      ]
+    }
+  },
+  methods: {
+    init () {
+      this.chartConfig = JSON.parse(JSON.stringify(this.params))
+    },
+    chartTypeChange (type) {
+      switch (type) {
+        case 'group':
+          this.chartConfig.span = 12
+          this.chartConfig.param = {
+            collapse: false
+          }
+          break
+        case 'text':
+          this.chartConfig.param = {
+            text: ''
+          }
+          break
+        case 'diagram':
+          this.chartConfig.param = {
+            topo: ''
+          }
+          break
+        case 'url':
+          this.chartConfig.param = {
+            url: ''
+          }
+          break
+      }
+      this.change()
+    },
+    topologyDialogChange (flag, data) {
+      this.topologyDialog = flag
+      if (data) {
+        this.chartConfig.param.topo = data
+        this.change()
+      }
+    }
+  },
+  created () {
+    this.init()
+  }
 }
 </script>
 
diff --git a/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js b/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
index 1d908c8b3..f652d1792 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
+++ b/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
@@ -8,6 +8,9 @@ const rz = {
   }
 }
 export default {
+  props: {
+    params: {}
+  },
   data () {
     return {
       language: localStorage.getItem('nz-language'),
@@ -61,6 +64,88 @@ export default {
         'H', 'I', 'J', 'K', 'L', 'M', 'N',
         'O', 'P', 'Q', 'R', 'S', 'T',
         'U', 'V', 'W', 'X', 'Y', 'Z'
+      ],
+      metricsChartTypeList: [
+        {
+          id: 'line',
+          name: this.$t('dashboard.panel.chartForm.typeVal.line.label')
+        },
+        {
+          id: 'stackArea',
+          name: this.$t('dashboard.panel.chartForm.typeVal.stackArea.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')
+        },
+        {
+          id: 'table',
+          name: this.$t('dashboard.panel.chartForm.typeVal.table.label')
+        }
+
+      ],
+      logChartTypeList: [
+        {
+          id: 'line',
+          name: this.$t('dashboard.panel.chartForm.typeVal.line.label')
+        },
+        {
+          id: 'stackArea',
+          name: this.$t('dashboard.panel.chartForm.typeVal.stackArea.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')
+        },
+        {
+          id: 'log',
+          name: this.$t('dashboard.panel.chartForm.typeVal.log.label')
+        },
+        {
+          id: 'table',
+          name: this.$t('dashboard.panel.chartForm.typeVal.table.label')
+        }
+
       ]
     }
   },
@@ -141,7 +226,8 @@ export default {
       this.expressions.push(this.expressions[index])
       this.legends.push(this.legends[index])
       this.promqlKeys.push(getUUID())
-      this.expressionName(this.transformNumToLetter(0))
+      const expressionName = this.getExpressionName()
+      this.expressionName.push(expressionName)
       this.elementIds.push('')
       this.expressionsShow.push(true)
       this.promqlCount++
@@ -210,11 +296,12 @@ export default {
       this.change()
     },
     colorChange (val, key, index) {
+      console.log(val, key, index)
       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])
+        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])
       }
@@ -228,6 +315,29 @@ export default {
       this.$nextTick(() => {
         this.$emit('change', this.chartConfig)
       })
+    },
+    addColumns () {
+      this.chartConfig.param.columns.push({
+        title: '',
+        show: true,
+        unit: 2,
+        display: ''
+      })
+      this.change()
+    },
+    copyColumns (index) {
+      this.chartConfig.param.columns.push({ ...this.chartConfig.param.columns[index] })
+      this.change()
+    },
+    removeColumns (index) {
+      this.chartConfig.param.columns.splice(index, 1)
+      this.change()
+    },
+    showColumns (index) {
+      this.chartConfig.param.columns[index].show = !this.chartConfig.param.columns[index].show
+    },
+    tagsChange (newTags) {
+      // this.chartConfig.param.indexs = newTags.map(item => item.text)
     }
   }
 }
diff --git a/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
index a95c7954d..2dc6243dd 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
@@ -1,12 +1,268 @@
 <template>
-  <div>
-    system
+  <div class="chart-config">
+    <el-form
+      ref="chartForm"
+      :model="chartConfig"
+      :rules="rules"
+      label-position= "top"
+      label-width="120px"
+    >
+      <div class="system-chart-config" v-loading="loading">
+        <div class="system-chart-config-left">
+          <ul>
+            <li
+              v-for="(item,index) in systemData"
+              :key="index"
+              class="system-chart-item"
+              :class="item.name === chartConfig.param.system ? 'is-select' : ''"
+              @click="changeSystem(item)"
+            >{{item.name}}</li>
+          </ul>
+        </div>
+        <div class="system-chart-config-right">
+          <div class="form-items--half-width-group">
+            <el-form-item
+              :label="$t('dashboard.panel.chartForm.group')"
+              class="form-item--half-width"
+              prop="param.systemGroup"
+              :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
+            >
+              <el-select size="small">
+
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              :label="$t('dashboard.panel.chartForm.select')"
+              class="form-item--half-width"
+              prop="param.stack"
+              :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
+            >
+              <el-input  size="small"/>
+            </el-form-item>
+          </div>
+          <div class="form-items--half-width-group">
+            <el-form-item
+              :label="$t('dashboard.panel.chartForm.sort')"
+              class="form-item--half-width"
+              prop="param.sort"
+            >
+              <el-select
+                id="chart-box-height"
+                v-model="chartConfig.param.sort"
+                placeholder=""
+                popper-class="right-box-select-top prevent-clickoutside"
+                size="small"
+                value-key="chartSpan"
+                @change="change"
+              >
+                <el-option :value="'desc'" :label="$t('dashboard.explore.descending')">
+                </el-option>
+                <el-option :value="'asc'" :label="$t('dashboard.explore.ascending')">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              :label="$t('dashboard.panel.chartForm.limit')"
+              class="form-item--half-width"
+              prop="param.limit"
+              :rules="{ required: true, message: $t('validate.required'), trigger: 'change'}"
+            >
+              <el-input-number :controls="false" v-model="chartConfig.param.limit"  size="small"/>
+            </el-form-item>
+          </div>
+        </div>
+      </div>
+      <!--title-->
+      <div class="form__sub-title">
+        <span>{{$t('dashboard.panel.chartForm.displayConfig')}}</span>
+      </div>
+      <div class="form-items--half-width-group">
+        <!-- type -->
+        <el-form-item
+          :label="$t('dashboard.panel.chartForm.type')"
+          class="form-item--half-width"
+          prop="type"
+        >
+          <el-select
+            id="chart-box-type"
+            v-model="chartConfig.type"
+            :disabled="chartConfig.type==='group'&&chartConfig.children&&chartConfig.children.length"
+            placeholder=""
+            popper-class="right-box-select-top prevent-clickoutside"
+            size="small"
+            value-key="chartType"
+            @change="chartTypeChange">
+            <el-option
+              v-for="item in chartTypeList"
+              :key="item.id"
+              :disabled="item.id==='group' && chartConfig.isGroup"
+              :label="item.name"
+              :value="item.id">
+              <span class="panel-dropdown-label-txt" >{{item.name}}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <!--refer-->
+        <el-form-item
+          :label="$t('dashboard.panel.chartForm.refer')"
+          class="form-item--half-width"
+          prop="param.stack"
+        >
+          <el-select
+            id="chart-box-height"
+            v-model="chartConfig.param.refer"
+            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>
+      </div>
+      <div class="form-items--half-width-group">
+        <!--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"
+            @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>
+
+        <!--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"
+            @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>
+      </div>
+    </el-form>
   </div>
 </template>
 
 <script>
+import publicConfig from '@/components/common/rightBox/chart/publicConfig'
+import chartTypeShow from '@/components/common/rightBox/chart/chartTypeShow'
 export default {
-  name: 'systemChartConfig'
+  name: 'systemChartConfig',
+  mixins: [publicConfig, chartTypeShow],
+  data () {
+    return {
+      systemData: [],
+      loading: false,
+      rules: {},
+      chartTypeList: [
+        {
+          id: 'singleStat',
+          name: this.$t('dashboard.panel.chartForm.typeVal.singleStat.label')
+        },
+        {
+          id: 'bar',
+          name: this.$t('dashboard.panel.chartForm.typeVal.bar.label')
+        },
+        {
+          id: 'pie',
+          name: this.$t('dashboard.panel.chartForm.typeVal.pie.label')
+        }
+      ]
+    }
+  },
+  methods: {
+    init () {
+      this.chartConfig = JSON.parse(JSON.stringify(this.params))
+    },
+    getSystemData () {
+      this.loading = true
+      this.$get('/mock/getSystemData').then(res => {
+        this.loading = false
+        if (res.code === 200) {
+          this.systemData = res.data.list
+          if (res.data.list.length) {
+            this.chartConfig.param.system = res.data.list[0].name
+          }
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    chartTypeChange (type) {
+      switch (type) {
+        case 'group':
+          this.chartConfig.height = ''
+          this.chartConfig.span = 12
+          this.chartConfig.param = {
+            collapse: false
+          }
+          break
+        case 'text':
+          this.chartConfig.param = {
+            text: ''
+          }
+          break
+        case 'diagram':
+          this.chartConfig.param = {
+            topo: ''
+          }
+          break
+        case 'url':
+          this.chartConfig.param = {
+            url: ''
+          }
+          break
+      }
+      this.change()
+    },
+    changeSystem (item) {
+      this.chartConfig.param.system = item.name
+    }
+  },
+  created () {
+    this.init()
+  },
+  mounted () {
+    this.getSystemData()
+  }
 }
 </script>
 
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index 6a3929f1b..b5d0a9f77 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -199,7 +199,7 @@ export default {
           nullType: 'null',
           legend: { placement: 'bottom', values: [], show: true },
           thresholdShow: true,
-          thresholds: [{ value: '', color: '#eeeeeeff' }]
+          thresholds: [{ value: undefined, color: '#eeeeeeff' }]
         },
         elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A' }],
         panel: '',