diff --git a/core/core-frontend/src/models/chart/chart-attr.d.ts b/core/core-frontend/src/models/chart/chart-attr.d.ts index 7a0dfd036a..a9f3d7e56f 100644 --- a/core/core-frontend/src/models/chart/chart-attr.d.ts +++ b/core/core-frontend/src/models/chart/chart-attr.d.ts @@ -844,6 +844,22 @@ declare interface ChartLabelAttr { * 转化率标签 */ conversionTag: ConversionTagAtt + /** + * 堆叠柱状图显示总计 + */ + showTotal: boolean + /** + * 总计标签字体大小 + */ + totalFontSize: number + /** + * 总计标签字体颜色 + */ + totalColor: string + /** + * 总计标签格式化设置 + */ + totalFormatter: BaseFormatter } /** * 提示设置 diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue index 6f168a6f29..366e500ab0 100644 --- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue +++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/LabelSelector.vue @@ -220,12 +220,13 @@ const COMPUTED_DEFAULT_LABEL = computed(() => { return DEFAULT_LABEL }) -const state = reactive<{ labelForm: ChartLabelAttr | any }>({ +const state = reactive<{ labelForm: DeepPartial }>({ labelForm: { quotaLabelFormatter: DEFAULT_LABEL.quotaLabelFormatter, seriesLabelFormatter: [], labelFormatter: DEFAULT_LABEL.labelFormatter, - conversionTag: DEFAULT_LABEL.conversionTag + conversionTag: DEFAULT_LABEL.conversionTag, + totalFormatter: DEFAULT_LABEL.totalFormatter } }) @@ -662,6 +663,149 @@ const conversionPrecision = [ /> + + + + { export class StackBar extends Bar { propertyInner = { ...this['propertyInner'], - 'label-selector': [...BAR_EDITOR_PROPERTY_INNER['label-selector'], 'vPosition'], + 'label-selector': [ + ...BAR_EDITOR_PROPERTY_INNER['label-selector'], + 'vPosition', + 'showTotal', + 'totalColor', + 'totalFontSize', + 'totalFormatter' + ], 'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'tooltipFormatter', 'show'] } protected configLabel(chart: Chart, options: ColumnOptions): ColumnOptions { @@ -340,13 +347,58 @@ export class StackBar extends Bar { return options } + protected configTotalLabel(chart: Chart, options: ColumnOptions): ColumnOptions { + if (!options.label) { + return options + } + const { label } = parseJson(chart.customAttr) + if (label.showTotal) { + const formatterCfg = label.labelFormatter ?? formatterItem + each(groupBy(options.data, 'field'), (values, key) => { + const total = values.reduce((a, b) => a + b.value, 0) + const value = valueFormatter(total, formatterCfg) + if (!options.annotations) { + options = { + ...options, + annotations: [] + } + } + options.annotations.push({ + type: 'text', + position: [key, total], + content: `${value}`, + style: { + textAlign: 'center', + fontSize: label.fontSize, + fill: label.color + }, + offsetY: -(parseInt(label.fontSize as unknown as string) / 2) + }) + }) + } + return options + } + public setupSeriesColor(chart: ChartObj, data?: any[]): ChartBasicStyle['seriesColor'] { return setUpStackSeriesColor(chart, data) } protected setupOptions(chart: Chart, options: ColumnOptions): ColumnOptions { - const tmp = super.setupOptions(chart, options) - return flow(this.configData)(chart, tmp, {}, this) + return flow( + this.configTheme, + this.configEmptyDataStrategy, + this.configColor, + this.configBasicStyle, + this.configLabel, + this.configTooltip, + this.configLegend, + this.configXAxis, + this.configYAxis, + this.configSlider, + this.configAnalyse, + this.configData, + this.configTotalLabel + )(chart, options, {}, this) } constructor(name = 'bar-stack') { @@ -439,6 +491,10 @@ export class GroupBar extends StackBar { * 分组堆叠柱状图 */ export class GroupStackBar extends StackBar { + propertyInner = { + ...this['propertyInner'], + 'label-selector': [...BAR_EDITOR_PROPERTY_INNER['label-selector'], 'vPosition'] + } protected configTheme(chart: Chart, options: ColumnOptions): ColumnOptions { const baseOptions = super.configTheme(chart, options) const baseTheme = baseOptions.theme as object diff --git a/core/core-frontend/src/views/chart/components/js/panel/types/impl/g2plot.ts b/core/core-frontend/src/views/chart/components/js/panel/types/impl/g2plot.ts index 93d2ef5934..4e9aa3f752 100644 --- a/core/core-frontend/src/views/chart/components/js/panel/types/impl/g2plot.ts +++ b/core/core-frontend/src/views/chart/components/js/panel/types/impl/g2plot.ts @@ -27,6 +27,7 @@ import { handleEmptyDataStrategy, setupSeriesColor } from '../../../util' +import { Options } from '@antv/g2plot' export interface G2PlotDrawOptions extends AntVDrawOptions { /** @@ -127,7 +128,10 @@ export abstract class G2PlotChartView< protected configAnalyse(chart: Chart, options: O): O { const annotations = getAnalyse(chart) - return { ...options, annotations } + return { + ...options, + annotations: [...annotations, ...((options as unknown as Options).annotations || [])] + } } protected configAnalyseHorizontal(chart: Chart, options: O): O {