diff --git a/frontend/src/views/chart/chart/common/common_antv.js b/frontend/src/views/chart/chart/common/common_antv.js index ebc0c25254..486200c06c 100644 --- a/frontend/src/views/chart/chart/common/common_antv.js +++ b/frontend/src/views/chart/chart/common/common_antv.js @@ -200,13 +200,31 @@ export function getLabel(chart) { f.formatterCfg.thousandSeparator = false } res = valueFormatter(param.value, f.formatterCfg) - } else if (equalsAny(chart.type, 'bar-group', 'bar-group-stack')) { + } else if (equalsAny(chart.type, 'bar-group')) { const f = yAxis[0] if (f.formatterCfg) { res = valueFormatter(param.value, f.formatterCfg) } else { res = valueFormatter(param.value, formatterItem) } + } else if (equalsAny(chart.type, 'bar-group-stack')) { + const f = yAxis[0] + let formatterCfg = formatterItem + if (f.formatterCfg) { + formatterCfg = f.formatterCfg + } + const labelContent = l.labelContent ?? ['quota'] + const contentItems = [] + if (labelContent.includes('group')) { + contentItems.push(param.group) + } + if (labelContent.includes('stack')) { + contentItems.push(param.category) + } + if (labelContent.includes('quota')) { + contentItems.push(valueFormatter(param.value, formatterCfg)) + } + res = contentItems.join('\n') } else { for (let i = 0; i < yAxis.length; i++) { const f = yAxis[i] @@ -363,7 +381,14 @@ export function getTooltip(chart) { if (chart.type === 'bar-group') { obj = { name: param.category, value: param.value } } else { - obj = { name: param.group, value: param.value } + let name = '' + if (param.group) { + name = param.name + '-' + } + if (param.category) { + name += param.category + } + obj = { name: name, value: param.value } } for (let i = 0; i < yAxis.length; i++) { const f = yAxis[i] diff --git a/frontend/src/views/chart/chart/util.js b/frontend/src/views/chart/chart/util.js index ce0b9696d0..af5e81d5ff 100644 --- a/frontend/src/views/chart/chart/util.js +++ b/frontend/src/views/chart/chart/util.js @@ -886,7 +886,8 @@ export const TYPE_CONFIGS = [ 'show', 'fontSize', 'color', - 'position-v' + 'position-v', + 'labelContent' ], 'tooltip-selector-ant-v': [ 'show', @@ -3553,3 +3554,13 @@ export function resetRgbOpacity(sourceColor, times) { } return sourceColor } + +export function getDefaultLabelContent(chart) { + if (chart?.type?.includes('pie')) { + return ['dimension', 'proportion'] + } + if (chart?.type?.includes('bar')) { + return ['quota'] + } + return [] +} diff --git a/frontend/src/views/chart/components/shapeAttr/LabelSelectorAntV.vue b/frontend/src/views/chart/components/shapeAttr/LabelSelectorAntV.vue index 4772ddac22..ba980c4edb 100644 --- a/frontend/src/views/chart/components/shapeAttr/LabelSelectorAntV.vue +++ b/frontend/src/views/chart/components/shapeAttr/LabelSelectorAntV.vue @@ -314,11 +314,6 @@ export default { { name: this.$t('chart.reserve_zero'), value: 0 }, { name: this.$t('chart.reserve_one'), value: 1 }, { name: this.$t('chart.reserve_two'), value: 2 } - ], - labelContentOptions: [ - { name: this.$t('chart.dimension'), value: 'dimension' }, - { name: this.$t('chart.quota'), value: 'quota' }, - { name: this.$t('chart.proportion'), value: 'proportion' } ] } }, @@ -403,6 +398,25 @@ export default { showProperty(property) { return this.propertyInner.includes(property) } + }, + computed: { + labelContentOptions() { + if (this.chart.type.includes('pie')) { + return [ + { name: this.$t('chart.dimension'), value: 'dimension' }, + { name: this.$t('chart.quota'), value: 'quota' }, + { name: this.$t('chart.proportion'), value: 'proportion' } + ] + } + if (this.chart.type.includes('bar')) { + return [ + { name: this.$t('chart.chart_group'), value: 'group' }, + { name: this.$t('chart.stack_item'), value: 'stack' }, + { name: this.$t('chart.quota'), value: 'quota' } + ] + } + return [] + } } } diff --git a/frontend/src/views/chart/group/Group.vue b/frontend/src/views/chart/group/Group.vue index 89ec69c2ec..6482f85092 100644 --- a/frontend/src/views/chart/group/Group.vue +++ b/frontend/src/views/chart/group/Group.vue @@ -513,6 +513,7 @@ import { } from '../chart/chart' import { checkViewTitle } from '@/components/canvas/utils/utils' import { adaptCurTheme } from '@/components/canvas/utils/style' +import { getDefaultLabelContent } from '@/views/chart/chart/util' export default { name: 'Group', @@ -1060,6 +1061,7 @@ export default { if (type === 'pie-donut-rose') { attr.size.pieInnerRadius = Math.round(attr.size.pieOuterRadius * 0.5) } + attr.label.labelContent = getDefaultLabelContent(view) } else if (type.includes('line')) { attr.label.position = 'top' } else if (type.includes('treemap')) { diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue index d99817e159..5319f4ba77 100644 --- a/frontend/src/views/chart/view/ChartEdit.vue +++ b/frontend/src/views/chart/view/ChartEdit.vue @@ -1748,6 +1748,7 @@ import CalcChartFieldEdit from '@/views/chart/view/CalcChartFieldEdit' import { equalsAny } from '@/utils/StringUtils' import PositionAdjust from '@/views/chart/view/PositionAdjust' import MarkMapDataEditor from '@/views/chart/components/map/MarkMapDataEditor' +import { getDefaultLabelContent } from '@/views/chart/chart/util' export default { name: 'ChartEdit', @@ -3313,6 +3314,7 @@ export default { this.view.customAttr.label.position = 'middle' } } + customAttr.label.labelContent = getDefaultLabelContent(this.view) // reset custom colors this.view.customAttr.color.seriesColors = [] },