diff --git a/nezha-fronted/src/components/charts/richTextEditor.vue b/nezha-fronted/src/components/charts/richTextEditor.vue
index b19349109..60f60bc01 100644
--- a/nezha-fronted/src/components/charts/richTextEditor.vue
+++ b/nezha-fronted/src/components/charts/richTextEditor.vue
@@ -62,6 +62,7 @@ export default {
         })
         this.$nextTick(() => {
           this.$emit('after-init')
+          this.$emit('textChange')
         })
       }
     },
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
index e3dc9961e..371bc85b2 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
@@ -665,8 +665,8 @@ export default {
           name: this.$t('dashboard.panel.chartForm.typeVal.point.label')
         },
         {
-          id: 'singleStat',
-          name: this.$t('dashboard.panel.chartForm.typeVal.singleStat.label')
+          id: 'stat',
+          name: this.$t('dashboard.panel.chartForm.typeVal.stat.label')
         },
         {
           id: 'bar',
@@ -731,7 +731,7 @@ export default {
             this.chartConfig.param.thresholds.push({ value: undefined, color: '#eeeeeeff' })
           })
           break
-        case 'singleStat':
+        case 'stat':
         case 'bar':
         case 'treemap':
         case 'pie':
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
index a8aa2d176..e051fb13a 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
@@ -58,17 +58,17 @@
           <span>{{$t('dashboard.panel.chartForm.dataConfig')}}</span>
         </div>
         <el-tabs v-model="editChart.datasource" @tab-click="datasourceChange" type="card">
-          <el-tab-pane label="Metrics" name="1">
-            <chart-config  ref="childrenFrom1" :type="'metrics'" v-if="editChart.datasource == 1" :params.sync="editChart" @change="editChartChange"/>
+          <el-tab-pane label="Metrics" name="metrics">
+            <chart-config  ref="childrenFrommetrics" :type="'metrics'" v-if="editChart.datasource == 'metrics'" :params.sync="editChart" @change="editChartChange"/>
           </el-tab-pane>
-          <el-tab-pane label="Logs" name="2">
-            <chart-config ref="childrenFrom2" :type="'log'" v-if="editChart.datasource == 2" :params.sync="editChart" @change="editChartChange"/>
+          <el-tab-pane label="Logs" name="logs">
+            <chart-config ref="childrenFromlogs" :type="'log'" v-if="editChart.datasource == 'logs'" :params.sync="editChart" @change="editChartChange"/>
           </el-tab-pane>
-          <el-tab-pane label="System" name="3">
-            <system-chart-config ref="childrenFrom3" v-if="editChart.datasource == 3" :params.sync="editChart"/>
+          <el-tab-pane label="System" name="system">
+            <system-chart-config ref="childrenFromsystem" v-if="editChart.datasource == 'system'" :params.sync="editChart" @change="editChartChange"/>
           </el-tab-pane>
-          <el-tab-pane label="Misc" name="4">
-            <other-chart-config ref="childrenFrom4" v-if="editChart.datasource == 4" :params.sync="editChart"/>
+          <el-tab-pane label="Misc" name="misc">
+            <other-chart-config ref="childrenFrommisc" v-if="editChart.datasource == 'misc'" :params.sync="editChart" @change="editChartChange"/>
           </el-tab-pane>
         </el-tabs>
       </el-form>
@@ -161,10 +161,14 @@ export default {
       const arr = [this.$refs.chartForm.validate()]
       arr.push(this.$refs['childrenFrom' + this.editChart.datasource].$refs.chartForm.validate())
       Promise.all(arr).then(res => {
-        this.editChart.param = JSON.stringify(this.editChart.param)
         this.editChart.panelId = this.panelId
-        if (this.editChart.id) { // 修改
-          this.$put('visual/panel/chart', this.editChart).then(response => {
+        const params = JSON.parse(JSON.stringify(this.editChart))
+        delete params.panel
+        if (!params.groupId) {
+          params.groupId = -1
+        }
+        if (params.id) { // 修改
+          this.$put('visual/panel/chart', params).then(response => {
             if (response.code === 200) {
               this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
               this.esc(true)
@@ -173,7 +177,7 @@ export default {
             }
           })
         } else { // 新增
-          this.$post('visual/panel/chart', this.editChart).then(response => {
+          this.$post('visual/panel/chart', params).then(response => {
             if (response.code === 200) {
               this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
               this.esc(true)
@@ -221,7 +225,7 @@ export default {
       })
     },
     datasourceChange () {
-      if (this.editChart.datasource == 1) {
+      if (this.editChart.datasource == 'metrics') {
         this.editChart = {
           ...this.editChart,
           span: 4,
@@ -238,7 +242,7 @@ export default {
           }
         }
       }
-      if (this.editChart.datasource == 2) {
+      if (this.editChart.datasource == 'logs') {
         this.editChart = {
           ...this.editChart,
           span: 4,
@@ -251,13 +255,13 @@ export default {
           }
         }
       }
-      if (this.editChart.datasource == 3) {
+      if (this.editChart.datasource == 'system') {
         this.editChart = {
           ...this.editChart,
           span: 4,
           height: 4,
           unit: 2,
-          type: 'singleStat',
+          type: 'stat',
           param: {
             refer: 1,
             system: '',
@@ -275,7 +279,7 @@ export default {
         }
         delete this.editChart.elements
       }
-      if (this.editChart.datasource == 4) {
+      if (this.editChart.datasource == 'misc') {
         this.editChart = {
           ...this.editChart,
           span: 4,
@@ -324,6 +328,13 @@ export default {
           this.editChart.groupId = ''
         }
       }
+    },
+    'editChart.type': {
+      handler (n) {
+        if (n === 'group') {
+          this.editChart.groupId = ''
+        }
+      }
     }
   }
 }
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartTypeShow.js b/nezha-fronted/src/components/common/rightBox/chart/chartTypeShow.js
index c019541b8..80855e33d 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/chartTypeShow.js
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartTypeShow.js
@@ -7,7 +7,7 @@ export default {
         case 'point':
           return true
         case 'table':
-        case 'singleStat':
+        case 'stat':
         case 'bar':
         case 'treemap':
         case 'guage':
@@ -23,7 +23,7 @@ export default {
         case 'point':
           return false
         case 'table':
-        case 'singleStat':
+        case 'stat':
         case 'bar':
         case 'treemap':
         case 'guage':
@@ -39,7 +39,7 @@ export default {
         case 'point':
           return true
         case 'table':
-        case 'singleStat':
+        case 'stat':
         case 'bar':
         case 'guage':
         case 'treemap':
@@ -55,7 +55,7 @@ export default {
         case 'point':
         case 'table':
           return false
-        case 'singleStat':
+        case 'stat':
         case 'bar':
         case 'guage':
         case 'treemap':
@@ -71,7 +71,7 @@ export default {
         case 'line':
         case 'stackArea':
         case 'point':
-        case 'singleStat':
+        case 'stat':
         case 'bar':
         case 'guage':
         case 'treemap':
@@ -88,7 +88,7 @@ export default {
         case 'line':
         case 'stackArea':
         case 'point':
-        case 'singleStat':
+        case 'stat':
         case 'bar':
         case 'treemap':
         case 'pie':
diff --git a/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
index 410cc486d..81856583e 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/otherChartConfig.vue
@@ -106,7 +106,7 @@
       </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-input id="chart-box-url" v-model="chartConfig.param.url" maxlength="1024" show-word-limit size="small" type="textarea" @change="change"></el-input>
       </el-form-item>
       <!--topoData-->
       <el-form-item v-if="isDiagram(chartConfig.type)" >
@@ -118,7 +118,9 @@
       <!--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-item  v-if="isText(chartConfig.type)"  :rules="{ required: true,  message: $t('validate.required'), trigger: 'change' }" prop="param.text">
+        <rich-text-editor ref="richTextEditor" :edit-data="chartConfig.param.text" @textChange="textChange"></rich-text-editor>
+      </el-form-item>
     </el-form>
   </div>
 </template>
@@ -135,6 +137,13 @@ export default {
     diagram,
     richTextEditor
   },
+  watch: {
+    'chartConfig.param.text': {
+      handler (n) {
+        this.change()
+      }
+    }
+  },
   data () {
     return {
       rules: {},
@@ -195,6 +204,9 @@ export default {
         this.chartConfig.param.topo = data
         this.change()
       }
+    },
+    textChange () {
+      this.chartConfig.param.text = this.$refs.richTextEditor.getContent()
     }
   },
   created () {
diff --git a/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js b/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
index fdb1d72ba..9abbe7a27 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
+++ b/nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
@@ -67,7 +67,7 @@ export default {
           name: this.$t('dashboard.panel.chartForm.typeVal.line.label')
         },
         {
-          id: 'stackArea',
+          id: 'area',
           name: this.$t('dashboard.panel.chartForm.typeVal.stackArea.label')
         },
         {
@@ -75,7 +75,7 @@ export default {
           name: this.$t('dashboard.panel.chartForm.typeVal.point.label')
         },
         {
-          id: 'singleStat',
+          id: 'stat',
           name: this.$t('dashboard.panel.chartForm.typeVal.singleStat.label')
         },
         {
@@ -106,7 +106,7 @@ export default {
           name: this.$t('dashboard.panel.chartForm.typeVal.line.label')
         },
         {
-          id: 'stackArea',
+          id: 'area',
           name: this.$t('dashboard.panel.chartForm.typeVal.stackArea.label')
         },
         {
@@ -114,7 +114,7 @@ export default {
           name: this.$t('dashboard.panel.chartForm.typeVal.point.label')
         },
         {
-          id: 'singleStat',
+          id: 'stat',
           name: this.$t('dashboard.panel.chartForm.typeVal.singleStat.label')
         },
         {
diff --git a/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
index 5d6384952..39f8f888c 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
@@ -400,7 +400,7 @@ export default {
       selectList: [],
       chartTypeList: [
         {
-          id: 'singleStat',
+          id: 'stat',
           name: this.$t('dashboard.panel.chartForm.typeVal.singleStat.label')
         },
         {
@@ -456,7 +456,7 @@ export default {
     },
     chartTypeChange (type) {
       switch (type) {
-        case 'singleStat':
+        case 'stat':
         case 'bar':
         case 'pie':
         case 'guage':