diff --git a/core/frontend/src/views/chart/chart/treemap/treemap_antv.js b/core/frontend/src/views/chart/chart/treemap/treemap_antv.js index 91ef3ea58d..16cd60c631 100644 --- a/core/frontend/src/views/chart/chart/treemap/treemap_antv.js +++ b/core/frontend/src/views/chart/chart/treemap/treemap_antv.js @@ -1,12 +1,13 @@ import { configPlotTooltipEvent, - getLabel, getLegend, getPadding, getTheme, getTooltip } from '@/views/chart/chart/common/common_antv' import { Treemap } from '@antv/g2plot' +import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter' +import { parseJson } from '@/views/chart/chart/util' export function baseTreemapOptionAntV(container, chart, action) { // theme @@ -57,3 +58,35 @@ export function baseTreemapOptionAntV(container, chart, action) { configPlotTooltipEvent(chart, plot) return plot } + +function getLabel(chart) { + const { label: labelAttr } = JSON.parse(chart.customAttr) + if (!labelAttr?.show) { + return false + } + const yAxis = parseJson(chart.yaxis) + const labelFormatter = yAxis?.[0].formatterCfg ?? formatterItem + return { + style: { + fill: labelAttr.color, + fontSize: labelAttr.fontSize + }, + formatter: function(param) { + const labelContent = labelAttr.labelContent ?? ['quota'] + const contentItems = [] + if (labelContent.includes('dimension')) { + contentItems.push(param.field) + } + if (labelContent.includes('quota')) { + contentItems.push(valueFormatter(param.value, labelFormatter)) + } + if (labelContent.includes('proportion')) { + const percentage = `${(((param.value / param.parent.value) * 10000) / 100).toFixed( + labelAttr.reserveDecimalCount + )}%` + contentItems.push(percentage) + } + return contentItems.join('\n') + } + } +} diff --git a/core/frontend/src/views/chart/chart/util.js b/core/frontend/src/views/chart/chart/util.js index 1b7dcd1700..5a3fecfd66 100644 --- a/core/frontend/src/views/chart/chart/util.js +++ b/core/frontend/src/views/chart/chart/util.js @@ -1819,7 +1819,9 @@ export const TYPE_CONFIGS = [ 'label-selector-ant-v': [ 'show', 'fontSize', - 'color' + 'color', + 'labelContent', + 'reserveDecimalCount' ], 'tooltip-selector-ant-v': [ 'show', diff --git a/core/frontend/src/views/chart/components/shapeAttr/LabelSelectorAntV.vue b/core/frontend/src/views/chart/components/shapeAttr/LabelSelectorAntV.vue index c8aea7c09c..12ba2a716e 100644 --- a/core/frontend/src/views/chart/components/shapeAttr/LabelSelectorAntV.vue +++ b/core/frontend/src/views/chart/components/shapeAttr/LabelSelectorAntV.vue @@ -350,13 +350,6 @@ export default { }, 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' }, @@ -364,7 +357,11 @@ export default { { name: this.$t('chart.quota'), value: 'quota' } ] } - return [] + return [ + { name: this.$t('chart.dimension'), value: 'dimension' }, + { name: this.$t('chart.quota'), value: 'quota' }, + { name: this.$t('chart.proportion'), value: 'proportion' } + ] } }, watch: {