diff --git a/nezha-fronted/src/components/chart/chart/chartBar.vue b/nezha-fronted/src/components/chart/chart/chartBar.vue
index 8c34399eb..983536ff8 100644
--- a/nezha-fronted/src/components/chart/chart/chartBar.vue
+++ b/nezha-fronted/src/components/chart/chart/chartBar.vue
@@ -116,7 +116,7 @@ export default {
           if (s) {
             const value = getMetricTypeValue(data.values, chartInfo.param.statistics)
             const showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(value, null, -1, 2)
-            const mapping = this.selectMapping(value, chartInfo.param.valueMapping)
+            const mapping = this.selectMapping(value, chartInfo.param.valueMapping, chartInfo.param.enable && this.chartInfo.param.enable.valueMapping)
             // eslint-disable-next-line vue/no-mutating-props
             mapping && (this.chartOption.color[colorIndex] = mapping.color.bac)
             s.data.push({
diff --git a/nezha-fronted/src/components/chart/chart/chartPie.vue b/nezha-fronted/src/components/chart/chart/chartPie.vue
index 8247b23f1..f90fff55e 100644
--- a/nezha-fronted/src/components/chart/chart/chartPie.vue
+++ b/nezha-fronted/src/components/chart/chart/chartPie.vue
@@ -99,7 +99,7 @@ export default {
           if (s) {
             const value = getMetricTypeValue(data.values, chartInfo.param.statistics)
             const showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(value, null, -1, 2)
-            const mapping = this.selectMapping(value, chartInfo.param.valueMapping)
+            const mapping = this.selectMapping(value, chartInfo.param.valueMapping, chartInfo.param.enable && this.chartInfo.param.enable.valueMapping)
             // eslint-disable-next-line vue/no-mutating-props
             mapping && (this.chartOption.color[colorIndex] = mapping.color.bac)
             s.data.push({
diff --git a/nezha-fronted/src/components/chart/chart/chartStat.vue b/nezha-fronted/src/components/chart/chart/chartStat.vue
index d408303f2..6d1bce840 100644
--- a/nezha-fronted/src/components/chart/chart/chartStat.vue
+++ b/nezha-fronted/src/components/chart/chart/chartStat.vue
@@ -13,7 +13,7 @@
         </span>
         <span v-else>{{item.legend}}</span>
       </span>
-      <span v-if="chartInfo.param.text==='value'">
+      <span v-if="chartInfo.param.text==='value'|| !chartInfo.param.text">
         <span v-if="item.mapping" :style="{color:item.mapping.color.text}">
           {{handleDisplay(item.mapping.display, { ...item.label, value: item.showValue })}}
         </span>
@@ -54,6 +54,7 @@ export default {
     initStatData (chartInfo, originalDatas) {
       return new Promise(resolve => {
         let colorIndex = 0
+        console.log(originalDatas)
         originalDatas.forEach((originalData, expressionIndex) => {
           originalData.forEach((data, dataIndex) => {
             const stat = {
@@ -71,8 +72,9 @@ export default {
             stat.label = data.metric
             stat.legend = this.handleLegend(chartInfo, data, expressionIndex, dataIndex, colorIndex)
             stat.showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(stat.value, null, -1, 2)
-            stat.mapping = this.selectMapping(stat.value, chartInfo.param.valueMapping)
+            stat.mapping = this.selectMapping(stat.value, chartInfo.param.valueMapping, chartInfo.param.enable && this.chartInfo.param.enable.valueMapping)
             this.statData.push(stat)
+            console.log(this.statData)
             colorIndex++
           })
         })
@@ -97,8 +99,10 @@ export default {
             row = i
           }
         }
-        while (col * row >= this.statData.length) { // 避免出现空白
-          row--
+        if (this.statData.length) {
+          while (col * row >= this.statData.length) { // 避免出现空白
+            row--
+          }
         }
         row++
         if (col === 1 || row === 1) { // 行 或 列有一个为1时 需要调换位置 显示才会好看
diff --git a/nezha-fronted/src/components/chart/chart/chartTable.vue b/nezha-fronted/src/components/chart/chart/chartTable.vue
index 62d6b366b..c128b2135 100644
--- a/nezha-fronted/src/components/chart/chart/chartTable.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTable.vue
@@ -30,7 +30,7 @@
           >
             {{showValueMapping(scope.row,col.title)}}
           </div>
-          <div v-else>
+          <div class="value-mapping-table" v-else>
             {{scope.row.display[col.title + 'display']}}
           </div>
         </template>
@@ -59,7 +59,7 @@ export default {
     initChart () {
       console.log(this.chartInfo, this.chartData)
       this.columns = this.chartInfo.param.columns
-      this.chartInfo.param.valueMapping.mapping.forEach((item) => {
+      this.chartInfo.param.valueMapping.forEach((item) => {
         if (this.valueMapping[item.column]) {
           this.valueMapping[item.column].push(item)
         } else {
@@ -128,7 +128,7 @@ export default {
       this.columns.forEach((column) => {
         if (valueMapping[column.title]) {
           obj[column.title + 'mapping'] = ''
-          if (this.chartInfo.param.valueMapping.show) {
+          if (chartInfo.param.enable && this.chartInfo.param.enable.valueMapping) {
             valueMapping[column.title].forEach(item => {
               const rowValue = row.display[column.title + 'display']
               if (item.type === 'value') {
diff --git a/nezha-fronted/src/components/chart/chart/chartTreemap.vue b/nezha-fronted/src/components/chart/chart/chartTreemap.vue
index 25a2a3776..10b519d42 100644
--- a/nezha-fronted/src/components/chart/chart/chartTreemap.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTreemap.vue
@@ -99,7 +99,7 @@ export default {
           if (s) {
             const value = getMetricTypeValue(data.values, chartInfo.param.statistics)
             const showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(value, null, -1, 2)
-            const mapping = this.selectMapping(value, chartInfo.param.valueMapping)
+            const mapping = this.selectMapping(value, chartInfo.param.valueMapping, chartInfo.param.enable && this.chartInfo.param.enable.valueMapping)
             // eslint-disable-next-line vue/no-mutating-props
             mapping && (this.chartOption.color[colorIndex] = mapping.color.bac)
             s.data.push({
diff --git a/nezha-fronted/src/components/chart/chartFormat.js b/nezha-fronted/src/components/chart/chartFormat.js
index 91a6f0845..23ce6bc44 100644
--- a/nezha-fronted/src/components/chart/chartFormat.js
+++ b/nezha-fronted/src/components/chart/chartFormat.js
@@ -8,7 +8,7 @@ export default {
         str += '\n'
         str += params.data.mapping && params.data.mapping.display ? self.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue }) : params.data.showValue
       }
-      if (this.chartInfo.param.text === 'value') {
+      if (this.chartInfo.param.text === 'value' || !this.chartInfo.param.text) {
         str += params.data.mapping && params.data.mapping.display ? self.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue }) : params.data.showValue
       }
       if (this.chartInfo.param.text === 'legend') {
diff --git a/nezha-fronted/src/components/chart/chartList.vue b/nezha-fronted/src/components/chart/chartList.vue
index 64136a8ec..52c2b9d25 100644
--- a/nezha-fronted/src/components/chart/chartList.vue
+++ b/nezha-fronted/src/components/chart/chartList.vue
@@ -282,7 +282,7 @@ export default {
         this.gridLayoutLoading = true
         this.noData = !n || n.length < 1
         const tempList = n.map(item => {
-          const param = item.param
+          let param = item.param
           // try {
           //   param = JSON.parse(item.param)
           // } catch (e) {
diff --git a/nezha-fronted/src/components/chart/chartMixin.js b/nezha-fronted/src/components/chart/chartMixin.js
index 50e5adbd1..2f40b6b0b 100644
--- a/nezha-fronted/src/components/chart/chartMixin.js
+++ b/nezha-fronted/src/components/chart/chartMixin.js
@@ -45,7 +45,7 @@ export default {
             if (chartInfo.param.stack) { // 堆叠
               s.stack = 'Total'
             }
-            if (chartInfo.param.thresholdShow && !lodash.isEmpty(chartInfo.param.thresholds)) { // 阈值
+            if (chartInfo.param.enable && chartInfo.param.enable.legend && !lodash.isEmpty(chartInfo.param.thresholds)) { // 阈值
               s.markLine = {
                 symbol: 'circle',
                 symbolSize: 5
@@ -90,7 +90,7 @@ export default {
         legend = chartInfo.elements[expressionIndex].expression
       }
       // 处理legend别名
-      let alias = this.handleLegendAlias(legend, chartInfo.elements[expressionIndex].legend)
+      let alias = chartInfo.datasource === 'system' ? '' : this.handleLegendAlias(legend, chartInfo.elements[expressionIndex].legend)
       if (!alias) {
         alias = legend
       }
@@ -124,10 +124,10 @@ export default {
         return aliasExpression
       }
     },
-    selectMapping (value, valueMapping) {
+    selectMapping (value, valueMapping, show) {
       let mapping = ''
-      if (valueMapping.show) {
-        valueMapping.mapping.forEach(item => {
+      if (show) {
+        valueMapping.forEach(item => {
           if (item.type === 'value') {
             if (value == item.value) {
               mapping = item
diff --git a/nezha-fronted/src/components/chart/panelChart.vue b/nezha-fronted/src/components/chart/panelChart.vue
index 5666615f2..03052fd6f 100644
--- a/nezha-fronted/src/components/chart/panelChart.vue
+++ b/nezha-fronted/src/components/chart/panelChart.vue
@@ -141,17 +141,30 @@ export default {
             break
           }
           case 'system': {
-            console.log(this.chartInfo)
+            console.log(this.chartInfo.param.datasource[0])
+            const q = {
+              type: this.chartInfo.param.datasource[0].type,
+              group: this.chartInfo.param.datasource[0].group,
+              select: [this.chartInfo.param.datasource[0].select],
+              limit: this.chartInfo.param.datasource[0].limit,
+              sort: this.chartInfo.param.datasource[0].sort
+            }
+            const chartData = []
             const params = {
-              q: '',
+              q: encodeURIComponent(JSON.stringify(q)),
               stat: startTime,
               end: endTime,
               resultType: 'matrix'
             }
             this.$get('/stat', params).then(res => {
-              console.log(res)
+              if (res.code === 200) {
+                chartData.push(res.data.result)
+              } else {
+                chartData.push({ error: res.msg || res.error || res })
+              }
+              this.chartData = chartData
+              this.loading = false
             })
-            this.loading = false
             break
           }
           case 'misc': {
@@ -171,8 +184,9 @@ export default {
               }
             }
             if (this.chartInfo.type === 'group') {
-              this.groupInit()
+              console.log(this.chartInfo.children)
               this.chartData = [...this.chartInfo.children]
+              this.groupInit()
             }
             if (this.chartInfo.type === 'carousel') {
               this.chartData = ['carousel']
diff --git a/nezha-fronted/src/components/common/js/tools.js b/nezha-fronted/src/components/common/js/tools.js
index a8cd74bf7..14ef68f14 100644
--- a/nezha-fronted/src/components/common/js/tools.js
+++ b/nezha-fronted/src/components/common/js/tools.js
@@ -819,6 +819,7 @@ export function getMetricTypeValue (queryItem, type) {
     }
     case 'last': {
       const last = copy.sort((x, y) => { return parseFloat(y[0]) - parseFloat(x[0]) })[0][1]
+      console.log(last)
       return last
     }
     case 'first': {
diff --git a/nezha-fronted/src/components/common/login.vue b/nezha-fronted/src/components/common/login.vue
index 2cf2c5af5..930b56f4e 100644
--- a/nezha-fronted/src/components/common/login.vue
+++ b/nezha-fronted/src/components/common/login.vue
@@ -153,9 +153,9 @@ export default {
   methods: {
     ...mapActions(['loginSuccess']),
     login () {
-      if (this.loading || !this.license.valid || !this.license.token) {
-        return
-      }
+      // if (this.loading || !this.license.valid || !this.license.token) {
+      //   return
+      // }
       if (this.validateLogin() && (this.$route.path == '/' || this.$route.path == '/login')) {
         this.loading = true
         this.$post('/sys/login', this.loginData).then(res => {
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
index 6eaea19e8..c1ffb3c24 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
@@ -333,11 +333,11 @@
         <!--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>
+          <el-switch v-model="chartConfig.param.enable.legend" size="small" @change="change"></el-switch>
         </div>
         <transition name="el-zoom-in-top">
           <div
-            v-if="chartConfig.param.legend.show"
+            v-if="chartConfig.param.enable.legend"
             class="form-items--half-width-group"
           >
             <el-form-item
@@ -502,15 +502,15 @@
         <div class="form__sub-title">
           <span>{{$t('dashboard.panel.chartForm.valueMapping')}}</span>
           <el-switch
-            v-model="chartConfig.param.valueMapping.show"
+            v-model="chartConfig.param.enable.valueMapping"
             size="small"
             @change="change"
           ></el-switch>
         </div>
         <transition name="el-zoom-in-top">
-          <el-row v-if="chartConfig.param.valueMapping.show">
+          <el-row v-if="chartConfig.param.enable.valueMapping">
             <div
-              v-for="(item,index) in chartConfig.param.valueMapping.mapping"
+              v-for="(item,index) in chartConfig.param.valueMapping"
               :key="index"
             >
               <div class="chart-title chart-title-config">
@@ -567,7 +567,7 @@
                   </div>
                   <el-form-item
                     v-if="item.type === 'value'"
-                    :prop="'param.valueMapping.mapping.' + index + '.value'"
+                    :prop="'param.valueMapping.' + index + '.value'"
                     :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
                     class="thresholds-from-item"
                   >
@@ -581,7 +581,7 @@
                   </el-form-item>
                   <el-form-item
                     v-if="item.type === 'range'"
-                    :prop="'param.valueMapping.mapping.' + index + '.from'"
+                    :prop="'param.valueMapping.' + index + '.from'"
                     :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
                     class="thresholds-from-item"
                   >
@@ -595,7 +595,7 @@
                   </el-form-item>
                   <el-form-item
                     v-if="item.type === 'range'"
-                    :prop="'param.valueMapping.mapping.' + index + '.to'"
+                    :prop="'param.valueMapping.' + index + '.to'"
                     :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
                     class="thresholds-from-item"
                   >
@@ -609,7 +609,7 @@
                   </el-form-item>
                   <el-form-item
                     v-if="item.type === 'regx'"
-                    :prop="'param.valueMapping.mapping.' + index + '.regx'"
+                    :prop="'param.valueMapping.' + index + '.regx'"
                     :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
                     class="thresholds-from-item"
                   >
@@ -625,13 +625,13 @@
                   <div v-if="isTable(chartConfig.type)">
                     <div class='mapping-display'>Columns</div>
                   </div>
-                  <el-form-item v-if="isTable(chartConfig.type)" :prop="'param.valueMapping.mapping.' + index + '.column'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
+                  <el-form-item v-if="isTable(chartConfig.type)" :prop="'param.valueMapping.' + index + '.column'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
                     <el-input v-model="item.column"  style="margin-right: 10px" :placeholder="$t('placeholder.chart.column')" size="small" @change="change"/>
                   </el-form-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: 'blur'}" class="thresholds-from-item">
+                  <el-form-item :prop="'param.valueMapping.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
                     <el-input v-model="item.display"  style="margin-right: 10px" :placeholder="$t('placeholder.chart.display')" size="small" @change="change"/>
                   </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)}"/>
@@ -767,7 +767,12 @@ export default {
             nullType: this.chartConfig.param.nullType,
             legend: { placement: 'bottom', values: [], show: true },
             thresholdShow: true,
-            thresholds: []
+            thresholds: [],
+            enable: {
+              legend: true,
+              valueMapping: true,
+              thresholds: true
+            },
           }
           this.$nextTick(() => {
             this.chartConfig.param.thresholds.push({ value: undefined, color: randomcolor() })
@@ -785,9 +790,11 @@ export default {
             nullType: this.chartConfig.param.nullType,
             statistics: 'last',
             text: 'value',
-            valueMapping: {
-              show: true,
-              mapping: []
+            valueMapping: [],
+            enable: {
+              legend: true,
+              valueMapping: true,
+              thresholds: true
             }
           }
           break
@@ -801,9 +808,11 @@ export default {
             columns: [],
             tags: [],
             indexs: '',
-            valueMapping: {
-              show: true,
-              mapping: []
+            valueMapping: [],
+            enable: {
+              legend: true,
+              valueMapping: true,
+              thresholds: true
             }
           }
           break
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
index 9f0931f62..d4a6498a7 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
@@ -245,8 +245,12 @@ export default {
           param: {
             stack: 0,
             nullType: 'null',
-            legend: { placement: 'bottom', values: [], show: true },
-            thresholdShow: true,
+            legend: { placement: 'bottom', values: [] },
+            enable: {
+              thresholds: true,
+              legend: true,
+              valueMapping: true
+            },
             thresholds: [{ value: undefined, color: '#eeeeeeff' }]
           }
         }
@@ -258,6 +262,11 @@ export default {
           height: 4,
           unit: 2,
           type: 'log',
+          enable: {
+            thresholds: true,
+            legend: true,
+            valueMapping: true
+          },
           elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A' }],
           param: {
             limit: 100
@@ -273,17 +282,25 @@ export default {
           type: 'stat',
           param: {
             refer: 0,
-            system: '',
-            systemGroup: '',
-            systemSelect: '',
-            sort: 'desc',
-            limit: 100,
             nullType: 'null',
             statistics: 'last',
-            valueMapping: {
-              show: true,
-              mapping: []
+            enable: {
+              thresholds: true,
+              legend: true,
+              valueMapping: true
+            },
+            datasource: [{
+              name: 'A',
+              type: 'asset',
+              systemGroup: '',
+              systemSelect: '',
+              group: '',
+              select: '',
+              limit: 100,
+              sort: 'desc'
             }
+            ],
+            valueMapping: []
           }
         }
         delete this.editChart.elements
@@ -294,6 +311,11 @@ export default {
           span: 4,
           height: 4,
           type: 'url',
+          enable: {
+            thresholds: true,
+            legend: true,
+            valueMapping: true
+          },
           param: {
             url: ''
           }
diff --git a/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js b/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
index 0abf0500b..35a8ab499 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
+++ b/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
@@ -314,46 +314,46 @@ export default {
       if (this.chartConfig.type === 'table') {
         obj.column = ''
       }
-      this.chartConfig.param.valueMapping.mapping.push(obj)
+      this.chartConfig.param.valueMapping.push(obj)
       this.change()
     },
     copyMapping (index) {
-      this.chartConfig.param.valueMapping.mapping.push({ ...this.chartConfig.param.valueMapping.mapping[index] })
+      this.chartConfig.param.valueMapping.push({ ...this.chartConfig.param.valueMapping[index] })
       this.change()
     },
     removeMapping (index) {
-      this.chartConfig.param.valueMapping.mapping.splice(index, 1)
+      this.chartConfig.param.valueMapping.splice(index, 1)
       this.change()
     },
     showMapping (index) {
-      this.chartConfig.param.valueMapping.mapping[index].show = !this.chartConfig.param.valueMapping.mapping[index].show
+      this.chartConfig.param.valueMapping[index].show = !this.chartConfig.param.valueMapping[index].show
     },
     mappingItemChange (index, type) {
-      const mapping = this.chartConfig.param.valueMapping.mapping[index]
+      const mapping = this.chartConfig.param.valueMapping[index]
       if (mapping.type === 'value') {
-        this.chartConfig.param.valueMapping.mapping[index] = {
+        this.chartConfig.param.valueMapping[index] = {
           ...mapping,
           value: undefined
         }
       }
-      this.$refs.chartForm.clearValidate('param.valueMapping.mapping.' + index + 'value')
+      this.$refs.chartForm.clearValidate('param.valueMapping.' + index + 'value')
       if (mapping.type === 'range') {
-        this.chartConfig.param.valueMapping.mapping[index] = {
+        this.chartConfig.param.valueMapping[index] = {
           ...mapping,
           from: undefined,
           to: undefined
         }
-        this.$refs.chartForm.clearValidate('param.valueMapping.mapping.' + index + 'from')
-        this.$refs.chartForm.clearValidate('param.valueMapping.mapping.' + index + 'to')
+        this.$refs.chartForm.clearValidate('param.valueMapping.' + index + 'from')
+        this.$refs.chartForm.clearValidate('param.valueMapping.' + index + 'to')
       }
       if (mapping.type === 'regx') {
-        this.chartConfig.param.valueMapping.mapping[index] = {
+        this.chartConfig.param.valueMapping[index] = {
           ...mapping,
           regx: ''
         }
-        this.$refs.chartForm.clearValidate('param.valueMapping.mapping.' + index + 'regx')
+        this.$refs.chartForm.clearValidate('param.valueMapping.' + index + 'regx')
       }
-      this.$set(this.chartConfig.param.valueMapping.mapping, index, this.chartConfig.param.valueMapping.mapping[index])
+      this.$set(this.chartConfig.param.valueMapping, index, this.chartConfig.param.valueMapping[index])
       this.change()
     },
     colorChange (val, key, index) {
@@ -361,12 +361,12 @@ export default {
         this.chartConfig.param.thresholds[index].color = val
       }
       if (key === 'bac') {
-        this.chartConfig.param.valueMapping.mapping[index].color.bac = val
-        this.$set(this.chartConfig.param.valueMapping.mapping, index, this.chartConfig.param.valueMapping.mapping[index])
+        this.chartConfig.param.valueMapping[index].color.bac = val
+        this.$set(this.chartConfig.param.valueMapping, index, this.chartConfig.param.valueMapping[index])
       }
       if (key === 'text') {
-        this.chartConfig.param.valueMapping.mapping[index].color.text = val
-        this.$set(this.chartConfig.param.valueMapping.mapping, index, this.chartConfig.param.valueMapping.mapping[index])
+        this.chartConfig.param.valueMapping[index].color.text = val
+        this.$set(this.chartConfig.param.valueMapping, index, this.chartConfig.param.valueMapping[index])
       }
       this.change()
     },
diff --git a/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
index a439bd063..049ebf6d2 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
@@ -7,16 +7,17 @@
       label-position= "top"
       label-width="120px"
     >
-      <div class="system-chart-config" v-loading="loading">
+
+      <div class="system-chart-config" v-loading="loading" v-for="(item, index) in chartConfig.param.datasource " :key="index">
         <div class="system-chart-config-left">
           <ul>
             <li
-              v-for="(item,index) in systemData"
-              :key="index"
+              v-for="(system,index1) in systemData"
+              :key="index1"
               class="system-chart-item"
-              :class="item.name === chartConfig.param.system ? 'is-select' : ''"
-              @click="changeSystem(item)"
-            >{{item.name}}</li>
+              :class="item.name === system.system ? 'is-select' : ''"
+              @click="changeSystem(system, index)"
+            >{{system.name}}</li>
           </ul>
         </div>
         <div class="system-chart-config-right">
@@ -26,8 +27,8 @@
               class="form-item--half-width"
               prop="param.systemGroup"
             >
-              <el-select size="small" v-model="chartConfig.param.systemGroup" multiple collapse-tags :placeholder="$t('el.select.placeholder')" @change="systemGroupChange">
-                  <el-option v-for="item in groupList" :value="item.name" :key="item.name" :label="item.name"/>
+              <el-select size="small" v-model="item.systemGroup" multiple collapse-tags :placeholder="$t('el.select.placeholder')" @change="systemGroupChange(index)">
+                  <el-option v-for="group in groupList" :value="group.name" :key="group.name" :label="group.name"/>
               </el-select>
             </el-form-item>
             <el-form-item
@@ -36,8 +37,8 @@
               class="form-item--half-width"
               prop="param.systemSelect"
             >
-              <el-select size="small" v-model="chartConfig.param.systemSelect" :placeholder="$t('el.select.placeholder')" @change="systemSelectChange">
-                <el-option v-for="item in selectList" :value="item.name" :key="item.name" :label="item.name"/>
+              <el-select size="small" v-model="item.systemSelect" :placeholder="$t('el.select.placeholder')" @change="systemSelectChange(index)">
+                <el-option v-for="selectItem in selectList" :value="selectItem.name" :key="selectItem.name" :label="selectItem.name"/>
               </el-select>
             </el-form-item>
           </div>
@@ -49,7 +50,7 @@
             >
               <el-select
                 id="chart-box-height"
-                v-model="chartConfig.param.sort"
+                v-model="item.sort"
                 placeholder=""
                 popper-class="right-box-select-top prevent-clickoutside"
                 size="small"
@@ -67,7 +68,7 @@
               class="form-item--half-width"
               prop="param.limit"
             >
-              <el-input-number :controls="false" v-model.number="chartConfig.param.limit" :placeholder="$t('placeholder.system.limit')"  size="small" @change="change"/>
+              <el-input-number :controls="false" v-model.number="item.limit" :placeholder="$t('placeholder.system.limit')"  size="small" @change="change"/>
             </el-form-item>
           </div>
         </div>
@@ -261,15 +262,15 @@
         <div class="form__sub-title">
           <span>{{$t('dashboard.panel.chartForm.valueMapping')}}</span>
           <el-switch
-            v-model="chartConfig.param.valueMapping.show"
+            v-model="chartConfig.param.enable.valueMapping"
             size="small"
             @change="change"
           ></el-switch>
         </div>
         <transition name="el-zoom-in-top">
-          <el-row v-if="chartConfig.param.valueMapping.show">
+          <el-row v-if="chartConfig.param.enable.valueMapping">
             <div
-              v-for="(item,index) in chartConfig.param.valueMapping.mapping"
+              v-for="(item,index) in chartConfig.param.valueMapping"
               :key="index"
             >
               <div class="chart-title chart-title-config">
@@ -326,7 +327,7 @@
                   </div>
                   <el-form-item
                     v-if="item.type === 'value'"
-                    :prop="'param.valueMapping.mapping.' + index + '.value'"
+                    :prop="'param.valueMapping.' + index + '.value'"
                     :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
                     class="thresholds-from-item"
                   >
@@ -340,7 +341,7 @@
                   </el-form-item>
                   <el-form-item
                     v-if="item.type === 'range'"
-                    :prop="'param.valueMapping.mapping.' + index + '.from'"
+                    :prop="'param.valueMapping.' + index + '.from'"
                     :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
                     class="thresholds-from-item"
                   >
@@ -354,7 +355,7 @@
                   </el-form-item>
                   <el-form-item
                     v-if="item.type === 'range'"
-                    :prop="'param.valueMapping.mapping.' + index + '.to'"
+                    :prop="'param.valueMapping.' + index + '.to'"
                     :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
                     class="thresholds-from-item"
                   >
@@ -368,7 +369,7 @@
                   </el-form-item>
                   <el-form-item
                     v-if="item.type === 'regx'"
-                    :prop="'param.valueMapping.mapping.' + index + '.regx'"
+                    :prop="'param.valueMapping.' + index + '.regx'"
                     :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}"
                     class="thresholds-from-item"
                   >
@@ -384,13 +385,13 @@
                   <div v-if="isTable(chartConfig.type)">
                     <div class='mapping-display'>Columns</div>
                   </div>
-                  <el-form-item v-if="isTable(chartConfig.type)" :prop="'param.valueMapping.mapping.' + index + '.column'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
+                  <el-form-item v-if="isTable(chartConfig.type)" :prop="'param.valueMapping.' + index + '.column'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
                     <el-input v-model="item.column"  style="margin-right: 10px" :placeholder="$t('placeholder.chart.column')" size="small" @change="change"/>
                   </el-form-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: 'blur'}" class="thresholds-from-item">
+                  <el-form-item :prop="'param.valueMapping.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
                     <el-input v-model="item.display"  style="margin-right: 10px" :placeholder="$t('placeholder.chart.display')" size="small" @change="change"/>
                   </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)}"/>
@@ -458,8 +459,9 @@ export default {
   },
   watch: {
     selectList (n) {
-      if (n.length === 1 && !this.chartConfig.param.systemSelect) {
-        this.chartConfig.param.systemSelect = this.selectList[0].name
+      if (n.length === 1 && !this.chartConfig.param.datasource[0].systemSelect) {
+        this.chartConfig.param.datasource[0].systemSelect = this.selectList[0].name
+        this.systemSelectChange(0)
       }
     }
   },
@@ -476,11 +478,11 @@ export default {
           this.systemData = JSON.parse(res.data.paramValue)
           if (this.systemData.length) {
             if (!this.chartConfig.param.system) {
-              this.chartConfig.param.system = this.systemData[0].name
+              this.chartConfig.param.datasource[0].type = this.systemData[0].name
               this.groupList = this.systemData[0].group
               this.selectList = this.systemData[0].select
             } else {
-              const system = this.systemData.find(item => item.name === this.chartConfig.param.system)
+              const system = this.systemData.find(item => item.name === this.chartConfig.param.datasource[0].type)
               this.chartConfig.param.system = system.name
               this.groupList = system.group
               this.selectList = system.select
@@ -504,36 +506,53 @@ export default {
           }
           this.chartConfig.param = {
             refer: 1,
-            system: '',
-            systemGroup: '',
-            systemSelect: '',
-            sort: 'desc',
-            limit: 100,
             nullType: 'null',
             statistics: 'last',
-            valueMapping: {
-              show: true,
-              mapping: []
+            valueMapping: [],
+            enable: {
+              legend: true,
+              valueMapping: true,
+              thresholds: true
+            },
+            datasource: [{
+              name: 'A',
+              type: 'asset',
+              systemGroup: '',
+              systemSelect: '',
+              group: '',
+              select: '',
+              limit: 100,
+              sort: 'desc'
             }
+            ]
           }
           break
         case 'table':
           this.chartConfig.param = {
             refer: 1,
             system: '',
-            systemGroup: '',
-            systemSelect: '',
             indexs: '',
             tags: [],
-            sort: 'desc',
-            limit: 100,
             nullType: 'null',
             statistics: 'last',
             columns: [],
-            valueMapping: {
-              show: true,
-              mapping: []
+            valueMapping: [],
+            enable: {
+              legend: true,
+              valueMapping: true,
+              thresholds: true
+            },
+            datasource: [{
+              name: 'A',
+              type: 'asset',
+              systemGroup: '',
+              systemSelect: '',
+              group: '',
+              select: '',
+              limit: 100,
+              sort: 'desc'
             }
+            ]
           }
           break
       }
@@ -541,21 +560,23 @@ export default {
       this.change()
     },
     changeSystem (item) {
-      this.chartConfig.param.system = item.name
-      this.chartConfig.param.systemGroup = ''
-      this.chartConfig.param.systemSelect = ''
+      this.chartConfig.param.datasource[0].type = item.name
+      this.chartConfig.param.datasource[0].systemGroup = ''
+      this.chartConfig.param.datasource[0].systemSelect = ''
+      this.chartConfig.param.datasource[0].group = ''
+      this.chartConfig.param.datasource[0].select = ''
       this.groupList = item.group
       this.selectList = JSON.parse(JSON.stringify(item.select))
     },
-    systemGroupChange () {
-      this.chartConfig.param.group = this.chartConfig.param.systemGroup.map(item => {
+    systemGroupChange (index) {
+      this.chartConfig.param.datasource[index].group = this.chartConfig.param.datasource[index].systemGroup.map(item => {
         const obj = this.groupList.find(group => group.name === item)
         return obj
       })
       this.change()
     },
-    systemSelectChange () {
-      this.chartConfig.param.select = this.selectList.find(item => item.name === this.chartConfig.param.systemSelect)
+    systemSelectChange (index) {
+      this.chartConfig.param.datasource[index].select = this.selectList.find(item => item.name === this.chartConfig.param.datasource[index].systemSelect)
       this.change()
     }
   },
diff --git a/nezha-fronted/src/components/page/dashboard/panel.vue b/nezha-fronted/src/components/page/dashboard/panel.vue
index f23646b22..e519f26ae 100644
--- a/nezha-fronted/src/components/page/dashboard/panel.vue
+++ b/nezha-fronted/src/components/page/dashboard/panel.vue
@@ -202,6 +202,11 @@ export default {
           stack: 0,
           nullType: 'null',
           legend: { placement: 'bottom', values: [], show: true },
+          enable: {
+            legend: true,
+            valueMapping: true,
+            thresholds: true
+          },
           thresholdShow: true,
           thresholds: [{ value: undefined, color: randomcolor() }]
         },