feat(图表): 支持分组堆叠柱状图

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

@@ -15,7 +15,7 @@ import {
   DEFAULT_YAXIS_STYLE
 } from '@/views/chart/components/editor/util/chart'
 import _ from 'lodash'
-import { ViewSpec } from '@/views/chart/components/js/panel/charts/g2/bar/barUtil'
+import { Transform, ViewSpec } from '@/views/chart/components/js/panel/charts/g2/bar/barUtil'
 
 const { t } = useI18n()
 const DEFAULT_DATA: any[] = []
@@ -74,9 +74,9 @@ export class Bar extends G2ChartView<ViewSpec, G2Column> {
         shared: true
       }
     },
-    transform: [{ type: 'dodgeX' }],
+    transform: [{ type: 'dodgeX' } as Transform],
     data: []
-  }
+  } as ViewSpec
 
   async drawChart(drawOptions: G2DrawOptions<G2Column>): Promise<G2Column> {
     const { chart, container, action } = drawOptions

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

@@ -1,7 +1,11 @@
 import { parseJson } from '@/views/chart/components/js/util'
 import { G2Spec } from '@antv/g2'
 
-export type ViewSpec = { children?: G2Spec[] } & G2Spec
+export type ViewSpec = { children?: G2Spec[]; [key: string]: any } & G2Spec
+export type Transform = {
+  type: string
+  [key: string]: any
+}
 
 export function handleEmptyDataStrategy<O extends ViewSpec>(chart: Chart, options: O): O {
   const { data } = options.children[0]

core/core-frontend/src/views/chart/components/js/panel/charts/g2/bar/group-stack-bar.ts

@@ -0,0 +1,81 @@
+import {
+  BAR_AXIS_TYPE,
+  BAR_EDITOR_PROPERTY_INNER
+} from '@/views/chart/components/js/panel/charts/g2/bar/common'
+import { flow, parseJson } from '@/views/chart/components/js/util'
+import { StackBar } from '@/views/chart/components/js/panel/charts/g2/bar/stack-bar'
+import { Transform, ViewSpec } from '@/views/chart/components/js/panel/charts/g2/bar/barUtil'
+import { valueFormatter } from '@/views/chart/components/js/formatter'
+
+/**
+ * 分组堆叠柱状图
+ */
+export class GroupStackBar extends StackBar {
+  propertyInner = {
+    ...this['propertyInner'],
+    'label-selector': [...BAR_EDITOR_PROPERTY_INNER['label-selector'], 'vPosition']
+  }
+
+  protected configLabel(chart: Chart, options: ViewSpec): ViewSpec {
+    const customAttr = parseJson(chart.customAttr)
+    const { label: labelAttr } = customAttr
+    if (!labelAttr || !labelAttr.show) return options
+
+    const { children } = options
+    const position = {
+      position: labelAttr.position === 'middle' ? 'inside' : labelAttr.position,
+      textAlign: 'center',
+      dy: labelAttr.position === 'top' ? -10 : 0,
+      dx: 0
+    }
+    const transform = labelAttr.fullDisplay
+      ? {}
+      : { transform: [{ type: 'exceedAdjust' }, { type: 'overlapHide' }] }
+
+    const label = {
+      text: 'value',
+      fillOpacity: 1,
+      fill: labelAttr.color,
+      fontSize: labelAttr.fontSize,
+      ...position,
+      formatter: (value, _data) => valueFormatter(value, labelAttr.labelFormatter),
+      ...transform
+    }
+    return {
+      ...options,
+      children: [
+        {
+          ...children[0],
+          labels: [label]
+        },
+        ...children.slice(1)
+      ]
+    }
+  }
+
+  protected setupOptions(chart: Chart, options: ViewSpec): ViewSpec {
+    return flow(
+      this.configTheme,
+      this.configEmptyDataStrategy,
+      this.configColor,
+      this.configBasicStyle,
+      this.configLabel,
+      this.configTooltip,
+      this.configLegend,
+      this.configXAxis,
+      this.configYAxis,
+      this.configAnalyse,
+      this.configBarConditions
+    )(chart, options, {}, this)
+  }
+
+  constructor(name = 'bar-group-stack') {
+    super(name)
+    this.intervalOptions.encode = {
+      ...this.intervalOptions.encode,
+      series: d => d.group
+    }
+    this.intervalOptions.transform = [{ type: 'stackY', groupBy: ['x', 'series'] } as Transform]
+    this.axis = [...BAR_AXIS_TYPE, 'xAxisExt', 'extStack']
+  }
+}