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 @@ /> + + + + +
+ + + + + + + + +