diff --git a/frontend/src/views/chart/components/component-style/LegendSelector.vue b/frontend/src/views/chart/components/component-style/LegendSelector.vue
index 0146a20c2f..02aa399ba2 100644
--- a/frontend/src/views/chart/components/component-style/LegendSelector.vue
+++ b/frontend/src/views/chart/components/component-style/LegendSelector.vue
@@ -148,25 +148,29 @@ export default {
   watch: {
     'chart': {
       handler: function() {
-        const chart = JSON.parse(JSON.stringify(this.chart))
-        if (chart.customStyle) {
-          let customStyle = null
-          if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
-            customStyle = JSON.parse(JSON.stringify(chart.customStyle))
-          } else {
-            customStyle = JSON.parse(chart.customStyle)
-          }
-          if (customStyle.legend) {
-            this.legendForm = customStyle.legend
-          }
-        }
+        this.initData()
       }
     }
   },
   mounted() {
     this.init()
+    this.initData()
   },
   methods: {
+    initData() {
+      const chart = JSON.parse(JSON.stringify(this.chart))
+      if (chart.customStyle) {
+        let customStyle = null
+        if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
+          customStyle = JSON.parse(JSON.stringify(chart.customStyle))
+        } else {
+          customStyle = JSON.parse(chart.customStyle)
+        }
+        if (customStyle.legend) {
+          this.legendForm = customStyle.legend
+        }
+      }
+    },
     init() {
       const arr = []
       for (let i = 10; i <= 60; i = i + 2) {
diff --git a/frontend/src/views/chart/components/component-style/SplitSelector.vue b/frontend/src/views/chart/components/component-style/SplitSelector.vue
index 3c98871534..b828660cb5 100644
--- a/frontend/src/views/chart/components/component-style/SplitSelector.vue
+++ b/frontend/src/views/chart/components/component-style/SplitSelector.vue
@@ -122,27 +122,31 @@ export default {
   watch: {
     'chart': {
       handler: function() {
-        const chart = JSON.parse(JSON.stringify(this.chart))
-        if (chart.customStyle) {
-          let customStyle = null
-          if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
-            customStyle = JSON.parse(JSON.stringify(chart.customStyle))
-          } else {
-            customStyle = JSON.parse(chart.customStyle)
-          }
-          if (customStyle.split) {
-            this.splitForm = customStyle.split
-          } else {
-            this.splitForm = JSON.parse(JSON.stringify(DEFAULT_SPLIT))
-          }
-        }
+        this.initData()
       }
     }
   },
   mounted() {
     this.init()
+    this.initData()
   },
   methods: {
+    initData() {
+      const chart = JSON.parse(JSON.stringify(this.chart))
+      if (chart.customStyle) {
+        let customStyle = null
+        if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
+          customStyle = JSON.parse(JSON.stringify(chart.customStyle))
+        } else {
+          customStyle = JSON.parse(chart.customStyle)
+        }
+        if (customStyle.split) {
+          this.splitForm = customStyle.split
+        } else {
+          this.splitForm = JSON.parse(JSON.stringify(DEFAULT_SPLIT))
+        }
+      }
+    },
     init() {
       const arr = []
       for (let i = 6; i <= 40; i = i + 2) {
diff --git a/frontend/src/views/chart/components/component-style/TitleSelector.vue b/frontend/src/views/chart/components/component-style/TitleSelector.vue
index 626654f877..c2e25ee0d5 100644
--- a/frontend/src/views/chart/components/component-style/TitleSelector.vue
+++ b/frontend/src/views/chart/components/component-style/TitleSelector.vue
@@ -136,26 +136,30 @@ export default {
   watch: {
     'chart': {
       handler: function() {
-        const chart = JSON.parse(JSON.stringify(this.chart))
-        if (chart.customStyle) {
-          let customStyle = null
-          if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
-            customStyle = JSON.parse(JSON.stringify(chart.customStyle))
-          } else {
-            customStyle = JSON.parse(chart.customStyle)
-          }
-          if (customStyle.text) {
-            this.titleForm = customStyle.text
-          }
-          this.titleForm.title = this.chart.title
-        }
+        this.initData()
       }
     }
   },
   mounted() {
     this.init()
+    this.initData()
   },
   methods: {
+    initData() {
+      const chart = JSON.parse(JSON.stringify(this.chart))
+      if (chart.customStyle) {
+        let customStyle = null
+        if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
+          customStyle = JSON.parse(JSON.stringify(chart.customStyle))
+        } else {
+          customStyle = JSON.parse(chart.customStyle)
+        }
+        if (customStyle.text) {
+          this.titleForm = customStyle.text
+        }
+        this.titleForm.title = this.chart.title
+      }
+    },
     init() {
       const arr = []
       for (let i = 10; i <= 60; i = i + 2) {
diff --git a/frontend/src/views/chart/components/component-style/XAxisSelector.vue b/frontend/src/views/chart/components/component-style/XAxisSelector.vue
index 232b2d69b6..21cdf2fbf6 100644
--- a/frontend/src/views/chart/components/component-style/XAxisSelector.vue
+++ b/frontend/src/views/chart/components/component-style/XAxisSelector.vue
@@ -178,31 +178,35 @@ export default {
   watch: {
     'chart': {
       handler: function() {
-        const chart = JSON.parse(JSON.stringify(this.chart))
-        if (chart.customStyle) {
-          let customStyle = null
-          if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
-            customStyle = JSON.parse(JSON.stringify(chart.customStyle))
-          } else {
-            customStyle = JSON.parse(chart.customStyle)
-          }
-          if (customStyle.xAxis) {
-            this.axisForm = customStyle.xAxis
-            if (!this.axisForm.splitLine) {
-              this.axisForm.splitLine = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.splitLine))
-            }
-            if (!this.axisForm.nameTextStyle) {
-              this.axisForm.nameTextStyle = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.nameTextStyle))
-            }
-          }
-        }
+        this.initData()
       }
     }
   },
   mounted() {
     this.init()
+    this.initData()
   },
   methods: {
+    initData() {
+      const chart = JSON.parse(JSON.stringify(this.chart))
+      if (chart.customStyle) {
+        let customStyle = null
+        if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
+          customStyle = JSON.parse(JSON.stringify(chart.customStyle))
+        } else {
+          customStyle = JSON.parse(chart.customStyle)
+        }
+        if (customStyle.xAxis) {
+          this.axisForm = customStyle.xAxis
+          if (!this.axisForm.splitLine) {
+            this.axisForm.splitLine = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.splitLine))
+          }
+          if (!this.axisForm.nameTextStyle) {
+            this.axisForm.nameTextStyle = JSON.parse(JSON.stringify(DEFAULT_XAXIS_STYLE.nameTextStyle))
+          }
+        }
+      }
+    },
     init() {
       const arr = []
       for (let i = 6; i <= 40; i = i + 2) {
diff --git a/frontend/src/views/chart/components/component-style/YAxisSelector.vue b/frontend/src/views/chart/components/component-style/YAxisSelector.vue
index 85423137e0..ef52af5636 100644
--- a/frontend/src/views/chart/components/component-style/YAxisSelector.vue
+++ b/frontend/src/views/chart/components/component-style/YAxisSelector.vue
@@ -178,31 +178,35 @@ export default {
   watch: {
     'chart': {
       handler: function() {
-        const chart = JSON.parse(JSON.stringify(this.chart))
-        if (chart.customStyle) {
-          let customStyle = null
-          if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
-            customStyle = JSON.parse(JSON.stringify(chart.customStyle))
-          } else {
-            customStyle = JSON.parse(chart.customStyle)
-          }
-          if (customStyle.yAxis) {
-            this.axisForm = customStyle.yAxis
-            if (!this.axisForm.splitLine) {
-              this.axisForm.splitLine = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.splitLine))
-            }
-            if (!this.axisForm.nameTextStyle) {
-              this.axisForm.nameTextStyle = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.nameTextStyle))
-            }
-          }
-        }
+        this.initData()
       }
     }
   },
   mounted() {
     this.init()
+    this.initData()
   },
   methods: {
+    initData() {
+      const chart = JSON.parse(JSON.stringify(this.chart))
+      if (chart.customStyle) {
+        let customStyle = null
+        if (Object.prototype.toString.call(chart.customStyle) === '[object Object]') {
+          customStyle = JSON.parse(JSON.stringify(chart.customStyle))
+        } else {
+          customStyle = JSON.parse(chart.customStyle)
+        }
+        if (customStyle.yAxis) {
+          this.axisForm = customStyle.yAxis
+          if (!this.axisForm.splitLine) {
+            this.axisForm.splitLine = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.splitLine))
+          }
+          if (!this.axisForm.nameTextStyle) {
+            this.axisForm.nameTextStyle = JSON.parse(JSON.stringify(DEFAULT_YAXIS_STYLE.nameTextStyle))
+          }
+        }
+      }
+    },
     init() {
       const arr = []
       for (let i = 6; i <= 40; i = i + 2) {
diff --git a/frontend/src/views/chart/components/shape-attr/LabelSelector.vue b/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
index e6d17816f8..a6f2fc4f72 100644
--- a/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
@@ -177,28 +177,32 @@ export default {
   watch: {
     'chart': {
       handler: function() {
-        const chart = JSON.parse(JSON.stringify(this.chart))
-        if (chart.customAttr) {
-          let customAttr = null
-          if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
-            customAttr = JSON.parse(JSON.stringify(chart.customAttr))
-          } else {
-            customAttr = JSON.parse(chart.customAttr)
-          }
-          if (customAttr.label) {
-            this.labelForm = customAttr.label
-            if (!this.labelForm.labelLine) {
-              this.labelForm.labelLine = JSON.parse(JSON.stringify(DEFAULT_LABEL.labelLine))
-            }
-          }
-        }
+        this.initData()
       }
     }
   },
   mounted() {
     this.init()
+    this.initData()
   },
   methods: {
+    initData() {
+      const chart = JSON.parse(JSON.stringify(this.chart))
+      if (chart.customAttr) {
+        let customAttr = null
+        if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
+          customAttr = JSON.parse(JSON.stringify(chart.customAttr))
+        } else {
+          customAttr = JSON.parse(chart.customAttr)
+        }
+        if (customAttr.label) {
+          this.labelForm = customAttr.label
+          if (!this.labelForm.labelLine) {
+            this.labelForm.labelLine = JSON.parse(JSON.stringify(DEFAULT_LABEL.labelLine))
+          }
+        }
+      }
+    },
     init() {
       const arr = []
       for (let i = 10; i <= 20; i = i + 2) {
diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
index 1a542be9f6..bdda5c8fbe 100644
--- a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
@@ -317,25 +317,29 @@ export default {
   watch: {
     'chart': {
       handler: function() {
-        const chart = JSON.parse(JSON.stringify(this.chart))
-        if (chart.customAttr) {
-          let customAttr = null
-          if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
-            customAttr = JSON.parse(JSON.stringify(chart.customAttr))
-          } else {
-            customAttr = JSON.parse(chart.customAttr)
-          }
-          if (customAttr.size) {
-            this.sizeForm = customAttr.size
-          }
-        }
+        this.initData()
       }
     }
   },
   mounted() {
     this.init()
+    this.initData()
   },
   methods: {
+    initData() {
+      const chart = JSON.parse(JSON.stringify(this.chart))
+      if (chart.customAttr) {
+        let customAttr = null
+        if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
+          customAttr = JSON.parse(JSON.stringify(chart.customAttr))
+        } else {
+          customAttr = JSON.parse(chart.customAttr)
+        }
+        if (customAttr.size) {
+          this.sizeForm = customAttr.size
+        }
+      }
+    },
     init() {
       const arr = []
       for (let i = 10; i <= 60; i = i + 2) {
diff --git a/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue b/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
index 02088808d3..f4a76dedbe 100644
--- a/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
@@ -144,25 +144,29 @@ export default {
   watch: {
     'chart': {
       handler: function() {
-        const chart = JSON.parse(JSON.stringify(this.chart))
-        if (chart.customAttr) {
-          let customAttr = null
-          if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
-            customAttr = JSON.parse(JSON.stringify(chart.customAttr))
-          } else {
-            customAttr = JSON.parse(chart.customAttr)
-          }
-          if (customAttr.tooltip) {
-            this.tooltipForm = customAttr.tooltip
-          }
-        }
+        this.initData()
       }
     }
   },
   mounted() {
     this.init()
+    this.initData()
   },
   methods: {
+    initData() {
+      const chart = JSON.parse(JSON.stringify(this.chart))
+      if (chart.customAttr) {
+        let customAttr = null
+        if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
+          customAttr = JSON.parse(JSON.stringify(chart.customAttr))
+        } else {
+          customAttr = JSON.parse(chart.customAttr)
+        }
+        if (customAttr.tooltip) {
+          this.tooltipForm = customAttr.tooltip
+        }
+      }
+    },
     init() {
       const arr = []
       for (let i = 10; i <= 20; i = i + 2) {