From 9cb1e2b9498b02bd16d2ea16189d88954e197cf6 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Fri, 30 Jul 2021 12:34:37 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BB=AA=E8=A1=A8=E6=9D=BF=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E8=A7=86=E5=9B=BE=E6=A0=B7=E5=BC=8F=E5=9B=9E=E6=98=BE?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component-style/LegendSelector.vue        | 28 +++++++------
 .../component-style/SplitSelector.vue         | 32 ++++++++-------
 .../component-style/TitleSelector.vue         | 30 ++++++++------
 .../component-style/XAxisSelector.vue         | 40 ++++++++++---------
 .../component-style/YAxisSelector.vue         | 40 ++++++++++---------
 .../components/shape-attr/LabelSelector.vue   | 36 +++++++++--------
 .../components/shape-attr/SizeSelector.vue    | 28 +++++++------
 .../components/shape-attr/TooltipSelector.vue | 28 +++++++------
 frontend/src/views/chart/view/ChartEdit.vue   | 10 +++--
 9 files changed, 153 insertions(+), 119 deletions(-)

diff --git a/frontend/src/views/chart/components/component-style/LegendSelector.vue b/frontend/src/views/chart/components/component-style/LegendSelector.vue
index d515035912..069954d350 100644
--- a/frontend/src/views/chart/components/component-style/LegendSelector.vue
+++ b/frontend/src/views/chart/components/component-style/LegendSelector.vue
@@ -101,25 +101,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 51cb426320..f9be20bc1c 100644
--- a/frontend/src/views/chart/components/component-style/SplitSelector.vue
+++ b/frontend/src/views/chart/components/component-style/SplitSelector.vue
@@ -81,27 +81,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 5851a92787..f67c4b42cd 100644
--- a/frontend/src/views/chart/components/component-style/TitleSelector.vue
+++ b/frontend/src/views/chart/components/component-style/TitleSelector.vue
@@ -91,26 +91,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 76648397c1..9b7ae420b0 100644
--- a/frontend/src/views/chart/components/component-style/XAxisSelector.vue
+++ b/frontend/src/views/chart/components/component-style/XAxisSelector.vue
@@ -112,31 +112,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 4aebe4c68c..2af4893f26 100644
--- a/frontend/src/views/chart/components/component-style/YAxisSelector.vue
+++ b/frontend/src/views/chart/components/component-style/YAxisSelector.vue
@@ -112,31 +112,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 0b164606bc..cf1351262e 100644
--- a/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/LabelSelector.vue
@@ -12,7 +12,7 @@
             <!--            <el-form-item :label="$t('chart.show')" class="form-item">-->
             <!--              <el-checkbox v-model="labelForm.show" @change="changeLabelAttr">{{ $t('chart.show') }}</el-checkbox>-->
             <!--            </el-form-item>-->
-            <el-form-item :label="$t('chart.pie_label_line_show')" class="form-item">
+            <el-form-item v-show="chart.type && !chart.type.includes('pie')" :label="$t('chart.pie_label_line_show')" class="form-item">
               <el-checkbox v-model="labelForm.labelLine.show" @change="changeLabelAttr">{{ $t('chart.pie_label_line_show') }}</el-checkbox>
             </el-form-item>
             <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
@@ -116,28 +116,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 b3d714eb4c..e4f8812044 100644
--- a/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/SizeSelector.vue
@@ -183,25 +183,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 6160b55a01..bfb39a51b1 100644
--- a/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
+++ b/frontend/src/views/chart/components/shape-attr/TooltipSelector.vue
@@ -95,25 +95,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) {
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index 373047ff31..73b02504d0 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -1128,10 +1128,12 @@ export default {
     },
 
     changeChart() {
-      this.view.tableId = this.changeTable.id
-      this.view.xaxis = []
-      this.view.yaxis = []
-      this.view.customFilter = []
+      if (this.view.tableId !== this.changeTable.id) {
+        this.view.tableId = this.changeTable.id
+        this.view.xaxis = []
+        this.view.yaxis = []
+        this.view.customFilter = []
+      }
       this.save(true, 'chart', false)
     },