diff --git a/core/frontend/src/views/chart/chart/bar/bar_antv.js b/core/frontend/src/views/chart/chart/bar/bar_antv.js
index 5a6e7aa0b5..ec183ee775 100644
--- a/core/frontend/src/views/chart/chart/bar/bar_antv.js
+++ b/core/frontend/src/views/chart/chart/bar/bar_antv.js
@@ -15,7 +15,8 @@ import {
configAxisLabelLengthLimit
} from '@/views/chart/chart/common/common_antv'
import { antVCustomColor, getColors, handleEmptyDataStrategy, hexColorToRGBA, handleStackSort } from '@/views/chart/chart/util'
-import { cloneDeep, find } from 'lodash-es'
+import { cloneDeep, find, groupBy, each } from 'lodash-es'
+import { formatterItem, valueFormatter } from '@/views/chart/chart/formatter'
export function baseBarOptionAntV(container, chart, action, isGroup, isStack) {
// theme
@@ -141,6 +142,22 @@ export function baseBarOptionAntV(container, chart, action, isGroup, isStack) {
}
})
}
+ // total label
+ if (chart.type === 'bar-stack' && customAttr.label.showTotal) {
+ const yAxis = JSON.parse(chart.yaxis)
+ const formatterCfg = yAxis?.[0]?.formatterCfg ?? formatterItem
+ each(groupBy(data, 'field'), (values, key) => {
+ const total = values.reduce((a, b) => a + b.value, 0)
+ const value = valueFormatter(total, formatterCfg)
+ analyse.push({
+ type: 'text',
+ position: [key, total],
+ content: `${value}`,
+ style: { textAlign: 'center', fontSize: customAttr.label.totalFontSize, fill: customAttr.label.totalColor },
+ offsetY: -(parseInt(customAttr.label.totalFontSize) / 2)
+ })
+ })
+ }
// 目前只有百分比堆叠柱状图需要这个属性,先直接在这边判断而不作为参数传过来
options.isPercent = chart.type === 'percentage-bar-stack'
// custom color
diff --git a/core/frontend/src/views/chart/chart/chart.js b/core/frontend/src/views/chart/chart/chart.js
index 1d5cd5e9e0..2ef733afe1 100644
--- a/core/frontend/src/views/chart/chart/chart.js
+++ b/core/frontend/src/views/chart/chart/chart.js
@@ -222,7 +222,10 @@ export const DEFAULT_LABEL = {
reserveDecimalCount: 2,
labelContent: ['dimension', 'proportion'],
showConversion: false,
- conversionLabel: '转换率'
+ conversionLabel: '转换率',
+ showTotal: false,
+ totalFontSize: '12',
+ totalColor: '#909399'
}
export const DEFAULT_TOOLTIP = {
show: true,
diff --git a/core/frontend/src/views/chart/chart/util.js b/core/frontend/src/views/chart/chart/util.js
index 61b94354c4..81dc6fbe37 100644
--- a/core/frontend/src/views/chart/chart/util.js
+++ b/core/frontend/src/views/chart/chart/util.js
@@ -836,7 +836,10 @@ export const TYPE_CONFIGS = [
'show',
'fontSize',
'color',
- 'position-v'
+ 'position-v',
+ 'showTotal',
+ 'totalColor',
+ 'totalFontSize'
],
'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 12ba2a716e..86367d3cd3 100644
--- a/core/frontend/src/views/chart/components/shapeAttr/LabelSelectorAntV.vue
+++ b/core/frontend/src/views/chart/components/shapeAttr/LabelSelectorAntV.vue
@@ -150,6 +150,50 @@
/>
+