feat: 视图仪表盘改造

frontend/src/views/chart/chart/gauge/gauge_antv.js

@@ -1,10 +1,13 @@
 import { getPadding, getTheme } from '@/views/chart/chart/common/common_antv'
 import { Gauge } from '@antv/g2plot'
-import { DEFAULT_SIZE, DEFAULT_THRESHOLD } from '@/views/chart/chart/chart'
+import { DEFAULT_LABEL, DEFAULT_SIZE, DEFAULT_THRESHOLD } from '@/views/chart/chart/chart'
 import { getScaleValue } from '@/components/canvas/utils/style'
+import { valueFormatter } from '@/views/chart/chart/formatter'
+
+let labelFormatter = null
 
 export function baseGaugeOptionAntV(plot, container, chart, action, scale = 1) {
-  let max, labelContent, startAngel, endAngel
+  let min, max, labelContent, startAngel, endAngel, tickCount
   // theme
   const theme = getTheme(chart)
   // data
@@ -15,7 +18,9 @@ export function baseGaugeOptionAntV(plot, container, chart, action, scale = 1) {
     customAttr = JSON.parse(chart.customAttr)
     if (customAttr.size) {
       const size = JSON.parse(JSON.stringify(customAttr.size))
+      min = size.gaugeMin ? size.gaugeMin : DEFAULT_SIZE.gaugeMin
       max = size.gaugeMax ? size.gaugeMax : DEFAULT_SIZE.gaugeMax
+      tickCount = size.gaugeTickCount ? size.gaugeTickCount : DEFAULT_SIZE.gaugeTickCount
       startAngel = parseInt(size.gaugeStartAngle) * Math.PI / 180
       endAngel = parseInt(size.gaugeEndAngle) * Math.PI / 180
     }
@@ -28,13 +33,23 @@ export function baseGaugeOptionAntV(plot, container, chart, action, scale = 1) {
         style: ({ percent }) => ({
           fontSize: parseInt(label.fontSize),
           color: label.color
-        })
+        }),
+        formatter: function(v) {
+          let value
+          if (labelFormatter.type === 'percent') {
+            value = per
+          } else {
+            value = data
+          }
+          return valueFormatter(value, labelFormatter)
+        }
       }
     } else {
       labelContent = false
     }
+    labelFormatter = label.gaugeLabelFormatter ? label.gaugeLabelFormatter : DEFAULT_LABEL.gaugeLabelFormatter
   }
-  const per = (parseFloat(data) / parseFloat(max))
+  const per = (parseFloat(data) - parseFloat(min)) / (parseFloat(max) - parseFloat(min))
 
   const range = [0]
   let index = 0
@@ -75,9 +90,13 @@ export function baseGaugeOptionAntV(plot, container, chart, action, scale = 1) {
       content: labelContent
     },
     axis: {
+      tickInterval: 1 / tickCount,
       label: {
         style: {
           fontSize: getScaleValue(14, scale) // 刻度值字体大小
+        },
+        formatter: function(v) {
+          return Number(v) * (max - min) + min
         }
       },
       tickLine: {

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

@@ -237,14 +237,13 @@ export const TYPE_CONFIGS = [
         'alpha'
       ],
       'size-selector-ant-v': [
+        'gaugeMin',
         'gaugeMax',
         'gaugeStartAngle',
         'gaugeEndAngle'
       ],
       'label-selector-ant-v': [
-        'show',
+        'labelGauge'
-        'fontSize',
-        'color'
       ],
       'title-selector-ant-v': [
         'show',

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

@@ -31,12 +31,48 @@
           </el-form-item>
         </div>
       </el-form>
+
+      <el-form v-show="showProperty('labelGauge') && chart.type && chart.type.includes('gauge')" ref="labelForm" :model="labelForm" label-width="80px" size="mini">
+        <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>
+        <div v-show="labelForm.show">
+          <el-form-item :label="$t('chart.text_fontsize')" class="form-item">
+            <el-select v-model="labelForm.fontSize" :placeholder="$t('chart.text_fontsize')" size="mini" @change="changeLabelAttr">
+              <el-option v-for="option in fontSize" :key="option.value" :label="option.name" :value="option.value" />
+            </el-select>
+          </el-form-item>
+          <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 :label="$t('chart.value_formatter_type')" class="form-item">
+            <el-select v-model="labelForm.gaugeLabelFormatter.type" @change="changeLabelAttr">
+              <el-option v-for="type in typeList" :key="type.value" :label="$t('chart.' + type.name)" :value="type.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item v-show="labelForm.gaugeLabelFormatter.type !== 'auto'" :label="$t('chart.value_formatter_decimal_count')" class="form-item">
+            <el-input-number v-model="labelForm.gaugeLabelFormatter.decimalCount" :precision="0" :min="0" :max="10" size="mini" @change="changeLabelAttr" />
+          </el-form-item>
+          <el-form-item v-show="labelForm.gaugeLabelFormatter.type !== 'percent'" :label="$t('chart.value_formatter_unit')" class="form-item">
+            <el-select v-model="labelForm.gaugeLabelFormatter.unit" :placeholder="$t('chart.pls_select_field')" size="mini" @change="changeLabelAttr">
+              <el-option v-for="item in unitList" :key="item.value" :label="$t('chart.' + item.name)" :value="item.value" />
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="$t('chart.value_formatter_suffix')" class="form-item">
+            <el-input v-model="labelForm.gaugeLabelFormatter.suffix" size="mini" clearable :placeholder="$t('commons.input_content')" @change="changeLabelAttr" />
+          </el-form-item>
+          <el-form-item :label="$t('chart.value_formatter_thousand_separator')" class="form-item">
+            <el-checkbox v-model="labelForm.gaugeLabelFormatter.thousandSeparator" @change="changeLabelAttr" />
+          </el-form-item>
+        </div>
+      </el-form>
     </el-col>
   </div>
 </template>
 
 <script>
 import { COLOR_PANEL, DEFAULT_LABEL } from '../../chart/chart'
+import { formatterType, unitList } from '@/views/chart/chart/formatter'
 
 export default {
   name: 'LabelSelectorAntV',
@@ -77,7 +113,9 @@ export default {
         { name: this.$t('chart.center'), value: 'middle' },
         { name: this.$t('chart.text_pos_bottom'), value: 'bottom' }
       ],
-      predefineColors: COLOR_PANEL
+      predefineColors: COLOR_PANEL,
+      typeList: formatterType,
+      unitList: unitList
     }
   },
   watch: {
@@ -108,6 +146,9 @@ export default {
           if (!this.labelForm.labelLine) {
             this.labelForm.labelLine = JSON.parse(JSON.stringify(DEFAULT_LABEL.labelLine))
           }
+          if (!this.labelForm.gaugeLabelFormatter) {
+            this.labelForm.gaugeLabelFormatter = JSON.parse(JSON.stringify(DEFAULT_LABEL.gaugeLabelFormatter))
+          }
         }
       }
     },

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

@@ -273,10 +273,16 @@
             @change="changeBarSizeCase('tableColumnMode')"
           />
         </el-form-item>
+      </el-form>
       <!--table-end-->
+
       <!--gauge-begin-->
+      <el-form v-show="chart.type && chart.type.includes('gauge')" ref="sizeFormGauge" :model="sizeForm" label-width="100px" size="mini">
+        <el-form-item v-show="showProperty('gaugeMin')" :label="$t('chart.min')" class="form-item form-item-slider">
+          <el-input-number v-model="sizeForm.gaugeMin" size="mini" @change="changeBarSizeCase" />
+        </el-form-item>
         <el-form-item v-show="showProperty('gaugeMax')" :label="$t('chart.max')" class="form-item form-item-slider">
-          <el-input-number v-model="sizeForm.gaugeMax" size="mini" @change="changeBarSizeCase('gaugeMax')" />
+          <el-input-number v-model="sizeForm.gaugeMax" size="mini" @change="changeBarSizeCase" />
         </el-form-item>
         <el-form-item
           v-show="showProperty('gaugeStartAngle')"
@@ -308,14 +314,22 @@
             @change="changeBarSizeCase('gaugeEndAngle')"
           />
         </el-form-item>
-        <!--gauge-end-->
-        <!--text&label-end-->
         <el-form-item v-show="showProperty('quotaFontSize')" :label="$t('chart.quota_font_size')" class="form-item">
           <el-select
             v-model="sizeForm.quotaFontSize"
             :placeholder="$t('chart.quota_font_size')"
             @change="changeBarSizeCase('quotaFontSize')"
-          >
+          />
+        </el-form-item>
+        <el-form-item :label="$t('chart.tick_count')" class="form-item form-item-slider">
+          <el-input-number v-model="sizeForm.gaugeTickCount" :min="1" :step="1" :precision="0" size="mini" @change="changeBarSizeCase" />
+        </el-form-item>
+      </el-form>
+      <!--gauge-end-->
+
+      <el-form v-show="chart.type && (chart.type.includes('text') || chart.type === 'label')" ref="sizeFormPie" :model="sizeForm" label-width="100px" size="mini">
+        <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" />
           </el-select>
         </el-form-item>
@@ -521,6 +535,8 @@ export default {
 
           this.sizeForm.tableHeaderAlign = this.sizeForm.tableHeaderAlign ? this.sizeForm.tableHeaderAlign : DEFAULT_SIZE.tableHeaderAlign
           this.sizeForm.tableItemAlign = this.sizeForm.tableItemAlign ? this.sizeForm.tableItemAlign : DEFAULT_SIZE.tableItemAlign
+
+          this.sizeForm.gaugeTickCount = this.sizeForm.gaugeTickCount ? this.sizeForm.gaugeTickCount : DEFAULT_SIZE.gaugeTickCount
         }
       }
     },