Merge pull request #1624 from dataease/pr@dev@refactor_chart_style

frontend/src/views/chart/chart/chart.js

@@ -13,11 +13,11 @@ export const DEFAULT_SIZE = {
   barDefault: true,
   barWidth: 40,
   barGap: 0.4,
-  lineWidth: 1,
+  lineWidth: 2,
   lineType: 'solid',
   lineSymbol: 'circle',
   lineSymbolSize: 4,
-  lineSmooth: false,
+  lineSmooth: true,
   lineArea: false,
   pieInnerRadius: 0,
   pieOuterRadius: 80,

frontend/src/views/chart/chart/liquid/liquid.js

@@ -5,7 +5,7 @@ import { DEFAULT_SIZE } from '@/views/chart/chart/chart'
 export function baseLiquid(plot, container, chart) {
   let value = 0
   const colors = []
-  let max, radius, outlineBorder, outlineDistance, waveLength, waveCount, bgColor, shape, labelContent, title
+  let max, radius, bgColor, shape, labelContent, title
   if (chart.data) {
     if (chart.data.series.length > 0) {
       value = chart.data.series[0].data[0]
@@ -26,10 +26,6 @@ export function baseLiquid(plot, container, chart) {
       const size = JSON.parse(JSON.stringify(customAttr.size))
       max = size.liquidMax ? size.liquidMax : DEFAULT_SIZE.liquidMax
       radius = parseFloat((size.liquidSize ? size.liquidSize : DEFAULT_SIZE.liquidSize) / 100)
-      outlineBorder = parseInt(size.liquidOutlineBorder ? size.liquidOutlineBorder : DEFAULT_SIZE.liquidOutlineBorder)
-      outlineDistance = parseInt((size.liquidOutlineDistance || size.liquidOutlineDistance === 0) ? size.liquidOutlineDistance : DEFAULT_SIZE.liquidOutlineDistance)
-      waveLength = parseInt(size.liquidWaveLength ? size.liquidWaveLength : DEFAULT_SIZE.liquidWaveLength)
-      waveCount = parseInt(size.liquidWaveCount ? size.liquidWaveCount : DEFAULT_SIZE.liquidWaveCount)
       shape = size.liquidShape ? size.liquidShape : DEFAULT_SIZE.liquidShape
     }
     // label
@@ -86,14 +82,6 @@ export function baseLiquid(plot, container, chart) {
     percent: (parseFloat(value) / parseFloat(max)),
     radius: radius,
     shape: shape,
-    outline: {
-      border: outlineBorder,
-      distance: outlineDistance
-    },
-    wave: {
-      length: waveLength,
-      count: waveCount
-    },
     statistic: {
       // title: title,
       content: labelContent

frontend/src/views/chart/components/normal/LabelNormal.vue

@@ -6,7 +6,7 @@
       id="label-content"
       :style="content_class"
     >
-      <span v-if="quotaShow" :style="label_class">
+      <span :style="label_class">
         <p v-for="item in chart.data.series" :key="item.name" :style="label_content_class">
           {{ item.data[0] }}
         </p>

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.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.outside'), value: 'outside' }
+      ],
+      labelPositionH: [
         { 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: [
-        { name: this.$t('chart.inside'), value: 'middle' },
-        { 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' },
+      labelPosition: [],
+      labelPositionPie: [
+        { name: this.$t('chart.inside'), value: 'inner' },
+        { name: this.$t('chart.outside'), value: 'outer' }
+      ],
+      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() {
-      if (this.chart && this.chart.type && this.chart.type.includes('pie')) {
-        this.labelPosition = [
-          { name: this.$t('chart.inside'), value: 'inner' },
-          { name: this.$t('chart.outside'), value: 'outer' }
-        ]
+    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 = [
-          { name: this.$t('chart.inside'), value: 'middle' },
-          { 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' }
-        ]
+          this.labelPosition = this.labelPositionV
+        }
       }
     }
   }

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

@@ -128,9 +128,6 @@
       </el-form>
 
       <el-form v-show="chart.type && chart.type.includes('text')" ref="sizeFormPie" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="100px" size="mini">
-        <el-form-item :label="$t('chart.quota_show')" class="form-item">
-          <el-checkbox v-model="sizeForm.quotaShow" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>
-        </el-form-item>
         <el-form-item :label="$t('chart.quota_font_size')" class="form-item">
           <el-select v-model="sizeForm.quotaFontSize" :placeholder="$t('chart.quota_font_size')" @change="changeBarSizeCase">
             <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />

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

@@ -125,9 +125,6 @@
       </el-form>
 
       <el-form v-show="chart.type && chart.type.includes('text')" ref="sizeFormPie" :disabled="param && !hasDataPermission('manage',param.privileges)" :model="sizeForm" label-width="100px" size="mini">
-        <el-form-item :label="$t('chart.quota_show')" class="form-item">
-          <el-checkbox v-model="sizeForm.quotaShow" @change="changeBarSizeCase">{{ $t('chart.show') }}</el-checkbox>
-        </el-form-item>
         <el-form-item :label="$t('chart.quota_font_size')" class="form-item">
           <el-select v-model="sizeForm.quotaFontSize" :placeholder="$t('chart.quota_font_size')" @change="changeBarSizeCase">
             <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
@@ -244,18 +241,6 @@
         <el-form-item :label="$t('chart.radar_size')" class="form-item form-item-slider">
           <el-slider v-model="sizeForm.liquidSize" show-input :show-input-controls="false" input-size="mini" :min="1" :max="100" @change="changeBarSizeCase" />
         </el-form-item>
-        <el-form-item :label="$t('chart.liquid_outline_border')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.liquidOutlineBorder" show-input :show-input-controls="false" input-size="mini" :min="1" :max="20" @change="changeBarSizeCase" />
-        </el-form-item>
-        <el-form-item :label="$t('chart.liquid_outline_distance')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.liquidOutlineDistance" show-input :show-input-controls="false" input-size="mini" :min="0" :max="20" @change="changeBarSizeCase" />
-        </el-form-item>
-        <el-form-item :label="$t('chart.liquid_wave_length')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.liquidWaveLength" show-input :show-input-controls="false" input-size="mini" :min="10" :max="500" @change="changeBarSizeCase" />
-        </el-form-item>
-        <el-form-item :label="$t('chart.liquid_wave_count')" class="form-item form-item-slider">
-          <el-slider v-model="sizeForm.liquidWaveCount" show-input :show-input-controls="false" input-size="mini" :min="2" :max="10" @change="changeBarSizeCase" />
-        </el-form-item>
       </el-form>
     </el-col>
   </div>

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'
+        }
+      }
     }
   }
 }