feat(视图): 仪表盘刻度可显示具体值 #8117

core/frontend/src/lang/en.js

@@ -1681,6 +1681,7 @@ export default {
     map_line_color_target_color: 'End Color',
     map_line_theta_offset: 'Radian',
     gauge_axis_label: 'Axis Label',
+    gauge_percentage_tick: 'Percentage tick',
     word_size_range: 'Word Size Range',
     word_spacing: 'Word Spacing',
     axis_multi_select_tip: 'Hold down the Ctrl/Cmd or Shift key and click to select more than one',

core/frontend/src/lang/tw.js

@@ -1673,6 +1673,7 @@ export default {
     map_line_color_target_color: '結束顏色',
     map_line_theta_offset: '弧度',
     gauge_axis_label: '刻度標籤',
+    gauge_percentage_tick: '百分比刻度',
     word_size_range: '字號區間',
     word_spacing: '文字間隔',
     axis_multi_select_tip: '按住 Ctrl/Cmd 鍵或者 Shift 鍵再點擊可多選',

core/frontend/src/lang/zh.js

@@ -1673,6 +1673,7 @@ export default {
     map_line_color_target_color: '结束颜色',
     map_line_theta_offset: '弧度',
     gauge_axis_label: '刻度标签',
+    gauge_percentage_tick: '百分比刻度',
     word_size_range: '字号区间',
     word_spacing: '文字间隔',
     axis_multi_select_tip: '按住 Ctrl/Cmd 键或者 Shift 键再点击可多选',

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

@@ -124,6 +124,7 @@ export const DEFAULT_SIZE = {
   gaugeEndAngle: -45,
   gaugeAxisLine: true,
   gaugeTickCount: 5,
+  gaugePercentLabel: true,
   dimensionFontSize: 18,
   quotaFontSize: 18,
   spaceSplit: 10,

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

@@ -2,7 +2,8 @@ import { getPadding, getTheme, setGradientColor } from '@/views/chart/chart/comm
 import { Gauge } from '@antv/g2plot'
 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'
+import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter'
+import { parseJson } from '@/views/chart/chart/util'
 
 let labelFormatter = null
 
@@ -14,14 +15,6 @@ export function baseGaugeOptionAntV(container, chart, action, scale = 1) {
   const data = chart.data.series[0].data[0]
   // size
   let customAttr = {}
-  let axisLabel = {
-    style: {
-      fontSize: getScaleValue(14, scale) // 刻度值字体大小
-    },
-    formatter: function(v) {
-      return v === '0' ? v : (v * 100 + '%')
-    }
-  }
   if (chart.customAttr) {
     customAttr = JSON.parse(chart.customAttr)
     if (customAttr.size) {
@@ -41,11 +34,25 @@ export function baseGaugeOptionAntV(container, chart, action, scale = 1) {
       }
       startAngel = parseInt(size.gaugeStartAngle) * Math.PI / 180
       endAngel = parseInt(size.gaugeEndAngle) * Math.PI / 180
-      if (customAttr.size.gaugeAxisLine === false) {
-        axisLabel = false
-      }
     }
   }
+  let axisLabel = {
+    style: {
+      fontSize: getScaleValue(14, scale) // 刻度值字体大小
+    },
+    formatter: function(v) {
+      const gaugePercentLabel = customAttr?.size?.gaugePercentLabel
+      if (gaugePercentLabel === false) {
+        const yAxis = parseJson(chart.yaxis)?.[0]
+        const formatter = yAxis?.formatterCfg ?? formatterItem
+        return valueFormatter(v * max, formatter)
+      }
+      return v === '0' ? v : (v * 100 + '%')
+    }
+  }
+  if (customAttr.size.gaugeAxisLine === false) {
+    axisLabel = false
+  }
   const per = (parseFloat(data) - parseFloat(min)) / (parseFloat(max) - parseFloat(min))
   // label
   if (customAttr.label) {

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

@@ -323,7 +323,8 @@ export const TYPE_CONFIGS = [
         'gaugeStartAngle',
         'gaugeEndAngle',
         'gaugeTickCount',
-        'gaugeAxisLine'
+        'gaugeAxisLine',
+        'gaugePercentLabel'
       ],
       'label-selector-ant-v': [
         'labelGauge'

core/frontend/src/views/chart/components/dragItem/QuotaItem.vue

@@ -216,7 +216,7 @@
             <span>{{ $t('chart.filter') }}...</span>
           </el-dropdown-item>
           <el-dropdown-item
-            v-if="chart.render === 'antv' && chart.type !== 'gauge' && chart.type !== 'liquid' && chart.type !== 'bar-time-range'"
+            v-if="chart.render === 'antv' && chart.type !== 'liquid' && chart.type !== 'bar-time-range'"
             icon="el-icon-notebook-2"
             divided
             :command="beforeClickItem('formatter')"

core/frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue

@@ -916,6 +916,16 @@
             @change="changeBarSizeCase('gaugeAxisLine')"
           />
         </el-form-item>
+        <el-form-item
+          v-if="showProperty('gaugePercentLabel') && sizeForm.gaugeAxisLine"
+          :label="$t('chart.gauge_percentage_tick')"
+          class="form-item"
+        >
+          <el-checkbox
+            v-model="sizeForm.gaugePercentLabel"
+            @change="changeBarSizeCase('gaugePercentLabel')"
+          />
+        </el-form-item>
         <!--        <el-form-item v-if="showProperty('gaugeTickCount')" :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('gaugeTickCount')" />-->
         <!--        </el-form-item>-->
@@ -1837,7 +1847,7 @@ export default {
           }
           this.sizeForm.wordSizeRange = this.sizeForm.wordSizeRange ?? DEFAULT_SIZE.wordSizeRange
           this.sizeForm.wordSpacing = this.sizeForm.wordSpacing ?? DEFAULT_SIZE.wordSpacing
-
+          this.sizeForm.gaugePercentLabel = this.sizeForm.gaugePercentLabel === false ? false : DEFAULT_SIZE.gaugePercentLabel
           if (this.chart.type !== 'table-pivot') {
             let { xaxis, yaxis } = this.chart
             if (!(xaxis instanceof Object)) {