diff --git a/nezha-fronted/src/components/chart/chartList.vue b/nezha-fronted/src/components/chart/chartList.vue
index 25771bdb3..370ba37c0 100644
--- a/nezha-fronted/src/components/chart/chartList.vue
+++ b/nezha-fronted/src/components/chart/chartList.vue
@@ -210,6 +210,8 @@ export default {
       if (!this.isGroup) {
         this.moveChart()
         this.onScroll(this.scrollTop)
+      } else {
+        bus.$emit('groupChildMove')
       }
     },
     containerResizedEvent (i, newH, newW, newHPx, newWPx) {
@@ -346,6 +348,65 @@ export default {
     },
     refreshPanel () {
       bus.$emit('refreshPanel')
+    },
+    createChartSuccess (params) {
+      const arr = this.copyDataList.filter(item => !item.staic)
+      const charts = []
+      let weight = 0
+      arr.forEach(item => {
+        const chart = {
+          id: item.id,
+          x: item.x,
+          y: item.y,
+          span: item.span,
+          height: item.height,
+          groupId: item.groupId,
+          weight: weight
+        }
+        if (!params.groupId && chart.y >= params.y) {
+          chart.y = chart.y + 1
+        }
+        if (params.id == item.id) {
+          chart.y = params.y
+          chart.x = params.x
+        }
+        charts.push(chart)
+
+        weight++
+        if (item.type === 'group') {
+          item.children && item.children.forEach(children => {
+            const childrenChart = {
+              id: children.id,
+              x: children.x,
+              y: children.y,
+              span: children.span,
+              height: children.height,
+              groupId: children.groupId,
+              weight: weight
+            }
+            if (item.id === params.groupId && children.y >= params.y) {
+              childrenChart.y = childrenChart.y + 1
+            }
+            if (params.id == childrenChart.id) {
+              childrenChart.y = params.y
+              childrenChart.x = params.x
+            }
+            charts.push(childrenChart)
+            weight++
+          })
+        }
+      })
+      const chartParams = {
+        panelId: this.panelId,
+        charts: charts
+      }
+      if (charts && charts.length) {
+        this.$put('/visual/panel/chart/weights', chartParams).then(() => {
+          if (params.cb) {
+            params.cb()
+          }
+        })
+      }
     }
   },
   created () {
@@ -355,6 +416,8 @@ export default {
     this.init()
     if (!this.isGroup) {
       bus.$on('groupMove', this.changeGroupHeight)
+      bus.$on('creat-chart-success', this.createChartSuccess)
+      bus.$on('groupChildMove', this.moveChart)
       this.$store.commit('setChartListId', `chartList${this.timestamp}`)
       window.addEventListener('resize', this.resize)
     }
diff --git a/nezha-fronted/src/components/chart/chartMixin.js b/nezha-fronted/src/components/chart/chartMixin.js
index 3e8224aef..181536364 100644
--- a/nezha-fronted/src/components/chart/chartMixin.js
+++ b/nezha-fronted/src/components/chart/chartMixin.js
@@ -261,7 +261,6 @@ export default {
       }
     },
     resize () {
-      console.log('reszie')
       setTimeout(() => {
         getChart(this.chartId) && getChart(this.chartId).resize()
       }, 100)
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
index 48aa7572f..e392ea405 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
@@ -207,6 +207,8 @@ export default {
     },
     // 保存endpoint
     save () {
+      const self = this
+      let resetFlag = false // 页面是否需要重排
       const arr = [this.$refs.chartForm.validate()]
       arr.push(this.$refs['childrenFrom' + this.editChart.datasource].$refs.chartForm.validate())
       Promise.all(arr).then(res => {
@@ -245,6 +247,7 @@ export default {
         if (params.x + params.span > 12) {
           params.x = 0
           params.y += 1
+          resetFlag = true
         }
         delete params.panel
         if (params.type === 'table') {
@@ -257,8 +260,18 @@ export default {
           this.$put('visual/panel/chart', params).then(response => {
             if (response.code === 200) {
               this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
-              this.$emit('on-create-success', { id: this.panelId, name: this.panelName })
-              this.esc(true)
+              if (resetFlag) {
+                bus.$emit('creat-chart-success', {
+                  ...params,
+                  cb: function () {
+                    self.$emit('on-create-success', { id: this.panelId, name: this.panelName })
+                    self.esc(true)
+                  }
+                })
+              } else {
+                self.$emit('on-create-success', { id: this.panelId, name: this.panelName })
+                self.esc(true)
+              }
             } else {
               this.$message.error(response.msg)
             }
@@ -267,8 +280,18 @@ export default {
           this.$post('visual/panel/chart', params).then(response => {
             if (response.code === 200) {
               this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
-              this.$emit('on-create-success', { id: this.panelId, name: this.panelName })
-              this.esc(true)
+              if (resetFlag) {
+                bus.$emit('creat-chart-success', {
+                  ...params,
+                  cb: function () {
+                    self.$emit('on-create-success', { id: this.panelId, name: this.panelName })
+                    self.esc(true)
+                  }
+                })
+              } else {
+                self.$emit('on-create-success', { id: this.panelId, name: this.panelName })
+                self.esc(true)
+              }
             } else {
               this.$message.error(response.msg)
             }