feat(图表): 堆叠条形图标签支持显示总计 #16795

core/core-frontend/src/views/chart/components/js/panel/charts/bar/horizontal-bar.ts

@@ -8,11 +8,12 @@ import {
   configPlotTooltipEvent,
   configRoundAngle,
   getPadding,
+  getLabel,
   getTooltipContainer,
   setGradientColor,
   TOOLTIP_TPL
 } from '@/views/chart/components/js/panel/common/common_antv'
-import { cloneDeep, defaults } from 'lodash-es'
+import { cloneDeep, defaults, each, groupBy } from 'lodash-es'
 import {
   convertToAlphaColor,
   flow,
@@ -21,7 +22,7 @@ import {
   parseJson,
   setUpStackSeriesColor
 } from '@/views/chart/components/js/util'
-import { valueFormatter } from '@/views/chart/components/js/formatter'
+import { formatterItem, valueFormatter } from '@/views/chart/components/js/formatter'
 import {
   BAR_AXIS_TYPE,
   BAR_EDITOR_PROPERTY,
@@ -347,41 +348,74 @@ export class HorizontalStackBar extends HorizontalBar {
   }
   propertyInner = {
     ...this['propertyInner'],
-    'label-selector': ['color', 'fontSize', 'hPosition', 'labelFormatter'],
+    'label-selector': [
+      'color',
+      'fontSize',
+      'hPosition',
+      'labelFormatter',
+      'showTotal',
+      'showStackQuota'
+    ],
     'tooltip-selector': ['fontSize', 'color', 'backgroundColor', 'tooltipFormatter', 'show'],
     'legend-selector': [...BAR_EDITOR_PROPERTY_INNER['legend-selector'], 'legendSort']
   }
   protected configLabel(chart: Chart, options: BarOptions): BarOptions {
-    const baseOptions = super.configLabel(chart, options)
-    if (!baseOptions.label) {
-      return baseOptions
+    let label = getLabel(chart)
+    if (!label) {
+      return { ...options, label }
     }
+    options = { ...options, label }
     const { label: labelAttr } = parseJson(chart.customAttr)
-    baseOptions.label.style.fill = labelAttr.color
-    const label = {
-      ...baseOptions.label,
-      formatter: function (data: Datum) {
-        const value = valueFormatter(data.value, labelAttr.labelFormatter)
-        const group = new Group({})
-        group.addShape({
-          type: 'text',
-          attrs: {
-            x: 0,
-            y: 0,
-            data,
-            text: value,
-            textAlign: 'start',
-            textBaseline: 'top',
-            fontSize: labelAttr.fontSize,
-            fontFamily: chart.fontFamily,
-            fill: labelAttr.color
-          }
-        })
-        return group
+    if (labelAttr.showStackQuota || labelAttr.showStackQuota === undefined) {
+      options.label.style.fill = labelAttr.color
+      label = {
+        ...options.label,
+        formatter: function (data: Datum) {
+          const value = valueFormatter(data.value, labelAttr.labelFormatter)
+          const group = new Group({})
+          group.addShape({
+            type: 'text',
+            attrs: {
+              x: 0,
+              y: 0,
+              data,
+              text: value,
+              textAlign: 'start',
+              textBaseline: 'top',
+              fontSize: labelAttr.fontSize,
+              fontFamily: chart.fontFamily,
+              fill: labelAttr.color
+            }
+          })
+          return group
+        }
       }
+    } else {
+      label = false
+    }
+    if (labelAttr.showTotal) {
+      const formatterCfg = labelAttr.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.annotations = []
+        }
+        options.annotations.push({
+          type: 'text',
+          position: [key, total],
+          content: `${value}`,
+          style: {
+            textAlign: 'start',
+            fontSize: labelAttr.fontSize,
+            fill: labelAttr.color
+          },
+          offsetX: parseInt(labelAttr.fontSize as unknown as string) / 2
+        })
+      })
     }
     return {
-      ...baseOptions,
+      ...options,
       label
     }
   }

core/core-frontend/src/views/chart/components/js/panel/types/impl/g2plot.ts

@@ -139,7 +139,7 @@ export abstract class G2PlotChartView<
   }
 
   protected configAnalyseHorizontal(chart: Chart, options: O): O {
-    const annotations = getAnalyseHorizontal(chart)
+    const annotations = [...(options.annotations ?? []), ...getAnalyseHorizontal(chart)]
     return { ...options, annotations }
   }