diff --git a/core/frontend/src/lang/en.js b/core/frontend/src/lang/en.js index cdf0413b00..8da910de76 100644 --- a/core/frontend/src/lang/en.js +++ b/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', diff --git a/core/frontend/src/lang/tw.js b/core/frontend/src/lang/tw.js index 0fcf394508..4d431ed5ef 100644 --- a/core/frontend/src/lang/tw.js +++ b/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 鍵再點擊可多選', diff --git a/core/frontend/src/lang/zh.js b/core/frontend/src/lang/zh.js index 2e04769207..bce38bb4e7 100644 --- a/core/frontend/src/lang/zh.js +++ b/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 键再点击可多选', diff --git a/core/frontend/src/views/chart/chart/chart.js b/core/frontend/src/views/chart/chart/chart.js index 799e5ebeda..81bc796cc7 100644 --- a/core/frontend/src/views/chart/chart/chart.js +++ b/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, diff --git a/core/frontend/src/views/chart/chart/gauge/gauge_antv.js b/core/frontend/src/views/chart/chart/gauge/gauge_antv.js index 802ccbcfd1..80a7fba93a 100644 --- a/core/frontend/src/views/chart/chart/gauge/gauge_antv.js +++ b/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) { diff --git a/core/frontend/src/views/chart/chart/util.js b/core/frontend/src/views/chart/chart/util.js index 274bb1c0b9..53a765b3f8 100644 --- a/core/frontend/src/views/chart/chart/util.js +++ b/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' diff --git a/core/frontend/src/views/chart/components/dragItem/QuotaItem.vue b/core/frontend/src/views/chart/components/dragItem/QuotaItem.vue index 0f4e27c35c..8109d24d35 100644 --- a/core/frontend/src/views/chart/components/dragItem/QuotaItem.vue +++ b/core/frontend/src/views/chart/components/dragItem/QuotaItem.vue @@ -216,7 +216,7 @@ {{ $t('chart.filter') }}... + + + @@ -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)) {