refactor: 视图样式配置项调整

frontend/src/views/chart/components/shape-attr/LabelSelector.vue

@@ -17,7 +17,7 @@
           <el-form-item :label="$t('chart.text_color')" class="form-item">
             <el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
           </el-form-item>
-          <el-form-item v-show="chart.type && chart.type !== 'liquid'" :label="$t('chart.label_position')" class="form-item">
+          <el-form-item v-show="chart.type && chart.type !== 'liquid' && !chart.type.includes('line') && chart.type !== 'treemap'" :label="$t('chart.label_position')" class="form-item">
             <el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr">
               <el-option v-for="option in labelPosition" :key="option.value" :label="option.name" :value="option.value" />
             </el-select>
@@ -84,27 +84,35 @@ export default {
       labelForm: JSON.parse(JSON.stringify(DEFAULT_LABEL)),
       fontSize: [],
       isSetting: false,
-      labelPosition: [
+      labelPosition: [],
+      labelPositionPie: [
         { name: this.$t('chart.inside'), value: 'inside' },
-        { name: this.$t('chart.outside'), value: 'outside' },
+        { name: this.$t('chart.outside'), value: 'outside' }
-        { name: this.$t('chart.center'), value: 'center' },
+      ],
-        { name: this.$t('chart.text_pos_top'), value: 'top' },
+      labelPositionH: [
-        { name: this.$t('chart.text_pos_bottom'), value: 'bottom' },
         { name: this.$t('chart.text_pos_left'), value: 'left' },
+        { name: this.$t('chart.center'), value: 'inside' },
         { name: this.$t('chart.text_pos_right'), value: 'right' }
       ],
+      labelPositionV: [
+        { name: this.$t('chart.text_pos_top'), value: 'top' },
+        { name: this.$t('chart.center'), value: 'inside' },
+        { name: this.$t('chart.text_pos_bottom'), value: 'bottom' }
+      ],
       predefineColors: COLOR_PANEL
     }
   },
   watch: {
     'chart': {
       handler: function() {
+        this.initOptions()
         this.initData()
       }
     }
   },
   mounted() {
     this.init()
+    this.initOptions()
     this.initData()
   },
   methods: {
@@ -140,6 +148,18 @@ export default {
         this.isSetting = false
       }
       this.$emit('onLabelChange', this.labelForm)
+    },
+    initOptions() {
+      const type = this.chart.type
+      if (type) {
+        if (type.includes('horizontal')) {
+          this.labelPosition = this.labelPositionH
+        } else if (type.includes('pie')) {
+          this.labelPosition = this.labelPositionPie
+        } else {
+          this.labelPosition = this.labelPositionV
+        }
+      }
     }
   }
 }

frontend/src/views/chart/components/shape-attr/LabelSelectorAntV.vue

@@ -17,7 +17,7 @@
           <el-form-item :label="$t('chart.text_color')" class="form-item">
             <el-color-picker v-model="labelForm.color" class="color-picker-style" :predefine="predefineColors" @change="changeLabelAttr" />
           </el-form-item>
-          <el-form-item v-show="chart.type && chart.type !== 'liquid' && chart.type !== 'pie-rose'" :label="$t('chart.label_position')" class="form-item">
+          <el-form-item v-show="chart.type && chart.type !== 'liquid' && chart.type !== 'pie-rose' && !chart.type.includes('line') && chart.type !== 'treemap'" :label="$t('chart.label_position')" class="form-item">
             <el-select v-model="labelForm.position" :placeholder="$t('chart.label_position')" @change="changeLabelAttr">
               <el-option v-for="option in labelPosition" :key="option.value" :label="option.name" :value="option.value" />
             </el-select>
@@ -62,29 +62,35 @@ export default {
       labelForm: JSON.parse(JSON.stringify(DEFAULT_LABEL)),
       fontSize: [],
       isSetting: false,
-      labelPosition: [
+      labelPosition: [],
-        { name: this.$t('chart.inside'), value: 'middle' },
+      labelPositionPie: [
-        { name: this.$t('chart.outside'), value: 'outside' },
+        { name: this.$t('chart.inside'), value: 'inner' },
-        { name: this.$t('chart.center'), value: 'center' },
+        { name: this.$t('chart.outside'), value: 'outer' }
-        { name: this.$t('chart.text_pos_top'), value: 'top' },
+      ],
-        { name: this.$t('chart.text_pos_bottom'), value: 'bottom' },
+      labelPositionH: [
         { name: this.$t('chart.text_pos_left'), value: 'left' },
+        { name: this.$t('chart.center'), value: 'middle' },
         { name: this.$t('chart.text_pos_right'), value: 'right' }
       ],
+      labelPositionV: [
+        { name: this.$t('chart.text_pos_top'), value: 'top' },
+        { name: this.$t('chart.center'), value: 'middle' },
+        { name: this.$t('chart.text_pos_bottom'), value: 'bottom' }
+      ],
       predefineColors: COLOR_PANEL
     }
   },
   watch: {
     'chart': {
       handler: function() {
-        this.initLabelPosition()
+        this.initOptions()
         this.initData()
       }
     }
   },
   mounted() {
     this.init()
-    this.initLabelPosition()
+    this.initOptions()
     this.initData()
   },
   methods: {
@@ -121,22 +127,16 @@ export default {
       }
       this.$emit('onLabelChange', this.labelForm)
     },
-    initLabelPosition() {
+    initOptions() {
-      if (this.chart && this.chart.type && this.chart.type.includes('pie')) {
+      const type = this.chart.type
-        this.labelPosition = [
+      if (type) {
-          { name: this.$t('chart.inside'), value: 'inner' },
+        if (type.includes('horizontal')) {
-          { name: this.$t('chart.outside'), value: 'outer' }
+          this.labelPosition = this.labelPositionH
-        ]
+        } else if (type.includes('pie')) {
-      } else {
+          this.labelPosition = this.labelPositionPie
-        this.labelPosition = [
+        } else {
-          { name: this.$t('chart.inside'), value: 'middle' },
+          this.labelPosition = this.labelPositionV
-          { name: this.$t('chart.outside'), value: 'outside' },
+        }
-          { name: this.$t('chart.center'), value: 'center' },
-          { name: this.$t('chart.text_pos_top'), value: 'top' },
-          { name: this.$t('chart.text_pos_bottom'), value: 'bottom' },
-          { name: this.$t('chart.text_pos_left'), value: 'left' },
-          { name: this.$t('chart.text_pos_right'), value: 'right' }
-        ]
       }
     }
   }

frontend/src/views/chart/view/ChartEdit.vue

@@ -141,7 +141,7 @@
                                 class="render-select"
                                 style="width: 100px"
                                 size="mini"
-                                @change="calcData(true,'chart',true,true)"
+                                @change="changeChartType()"
                               >
                                 <el-option
                                   v-for="item in renderOptions"
@@ -158,7 +158,7 @@
                                 v-model="view.type"
                                 style="width: 100%"
                                 :disabled="!hasDataPermission('manage',param.privileges)"
-                                @change="calcData(true,'chart',true,true)"
+                                @change="changeChartType()"
                               >
                                 <chart-type :chart="view" style="height: 480px" />
                               </el-radio-group>
@@ -2066,6 +2066,36 @@ export default {
 
     reset() {
       this.getData(this.param.id)
+    },
+
+    changeChartType() {
+      this.setChartDefaultOptions()
+      this.calcData(true, 'chart', true, true)
+    },
+
+    setChartDefaultOptions() {
+      const type = this.view.type
+      if (type.includes('pie')) {
+        if (this.view.render === 'echarts') {
+          this.view.customAttr.label.position = 'inside'
+        } else {
+          this.view.customAttr.label.position = 'inner'
+        }
+      } else if (type.includes('line')) {
+        this.view.customAttr.label.position = 'top'
+      } else if (type.includes('treemap')) {
+        if (this.view.render === 'echarts') {
+          this.view.customAttr.label.position = 'inside'
+        } else {
+          this.view.customAttr.label.position = 'middle'
+        }
+      } else {
+        if (this.view.render === 'echarts') {
+          this.view.customAttr.label.position = 'inside'
+        } else {
+          this.view.customAttr.label.position = 'middle'
+        }
+      }
     }
   }
 }