feat: add forward pyramid diagram

Author: Orcish-Y

__tests__/integration/snapshots/static/alphabetIntervalPyramidReverse.svg

@@ -0,0 +1,39 @@
+import { G2Spec } from '../../../src';
+
+export function alphabetIntervalPyramidReverse(): G2Spec {
+  return {
+    type: 'interval',
+    coordinate: {
+      transform: [{ type: 'transpose' }],
+    },
+    data: [
+      { text: '页面', value: 200 },
+      { text: '页面1', value: 400 },
+      { text: '页面2', value: 600 },
+      { text: '页面3', value: 800 },
+    ],
+    transform: [
+      {
+        type: 'symmetryY',
+      },
+    ],
+    axis: {
+      x: false,
+      y: false,
+    },
+    style: {
+      stroke: '#ff0000',
+      reverse: true,
+    },
+    encode: {
+      x: 'text',
+      y: 'value',
+      color: 'text',
+      shape: 'pyramid',
+    },
+    scale: {
+      x: { paddingOuter: 0, paddingInner: 0 },
+      color: { type: 'ordinal', range: ['red', 'green', 'blue', '#e45ca2'] },
+    },
+  };
+}

__tests__/plots/static/alphabet-interval-pyramid-reverse.ts

@@ -13,6 +13,7 @@ export { alphabetIntervalLabelOverflowStroke } from './alphabet-interval-label-o
 export { alphabetIntervalDataSort } from './alphabet-interval-data-sort';
 export { alphabetIntervalFunnel } from './alphabet-interval-funnel';
 export { alphabetIntervalPyramid } from './alphabet-interval-pyramid';
+export { alphabetIntervalPyramidReverse } from './alphabet-interval-pyramid-reverse';
 export { bodyPointScatterPlot } from './body-point-scatter-plot';
 export { bodyPointScatterPlotSizeOpacity } from './body-point-scatter-plot-size-opacity';
 export { bodyPointScatterPlotOpacity } from './body-point-scatter-plot-opacity';

__tests__/plots/static/index.ts

@@ -275,6 +275,74 @@ chart.render();
 - 通过相同的颜色编码对应相同的阶段，便于比较
 - 可以清晰地观察到不同渠道在各个阶段的转化效率差异
 
+例子 4：**金字塔模型**
+
+收入金字塔结构，把整个社会按照收入高低划分为几个层级，不同收入群体在总人口中的比例和收入水平的差异，体现出贫富分化的现象。
+
+```js | ob { inject: true  }
+import { Chart } from '@antv/g2';
+
+const chart = new Chart({
+  container: 'container',
+  theme: 'classic',
+});
+
+chart.options({
+    type: 'interval',
+    coordinate: {
+      transform: [{ type: 'transpose' }],
+    },
+    data: [
+      { text: '顶层', value: 5 },
+      { text: '中上层', value: 10 },
+      { text: '中等', value: 20 },
+      { text: '中下层', value: 25 },
+      { text: '底层', value: 40 },
+    ],
+    transform: [
+      {
+        type: 'symmetryY',
+      },
+    ],
+    axis: {
+      x: false,
+      y: false,
+    },
+    style: {
+      reverse: true,
+    },
+    encode: {
+      x: 'text',
+      y: 'value',
+      color: 'text',
+      shape: 'pyramid',
+    },
+    scale: {
+      x: { paddingOuter: 0, paddingInner: 0 },
+      color: { type: 'ordinal' },
+    },
+    labels: [
+      { 
+        text: (d) => d.text, 
+        position: "inside" 
+      },
+      { 
+        text: (d) => d.value + "%", 
+        position: "inside", 
+        style: { dy: 15 } 
+      },
+    ]
+  })
+
+chart.render();
+```
+
+**说明**：
+- 人数比例应逐层递减，反映“底宽顶尖”的结构
+- 各层级人口占比清晰标注，便于比较不同群体的数量或比例
+- 金字塔形状直观展现阶层分布和分层特点
+
+
 ### 不适合的场景
 
 例子 1: **不适合展示无序或无明显层级关系的数据**

site/docs/charts/funnel.zh.md

@@ -28,6 +28,14 @@
       },
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*VpuRSZGqnlUAAAAAAAAAAAAADmJ7AQ/original"
     },
+    {
+      "filename": "pyramid-forward.ts",
+      "title": {
+        "zh": "正向金字塔图",
+        "en": "pyramid-forward"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*oKnDQINKBvAAAAAAQpAAAAgAemJ7AQ/original"
+    },
     {
       "filename": "mirror-funnel.ts",
       "title": {

site/examples/general/funnel/demo/meta.json

@@ -0,0 +1,43 @@
+import { Chart } from '@antv/g2';
+
+const data = [
+  { text: '顶层', value: 5 },
+  { text: '中上层', value: 10 },
+  { text: '中等', value: 20 },
+  { text: '中下层', value: 25 },
+  { text: '底层', value: 40 },
+];
+
+const chart = new Chart({
+  container: 'container',
+  autoFit: true,
+});
+
+chart.coordinate({
+  transform: [{ type: 'transpose' }],
+});
+
+chart.data(data);
+
+chart
+  .interval()
+  .encode('x', 'text')
+  .encode('y', 'value')
+  .encode('color', 'text')
+  .encode('shape', 'pyramid')
+  .transform({ type: 'symmetryY' })
+  .scale('x', { paddingOuter: 0, paddingInner: 0 })
+  .scale('color', { type: 'ordinal' })
+  .label({
+    text: (d) => d.text,
+    position: 'inside',
+  })
+  .label({
+    text: (d) => d.value + '%',
+    position: 'inside',
+    style: { dy: 15 },
+  })
+  .style('reverse', true)
+  .axis(false);
+
+chart.render();

site/examples/general/funnel/demo/pyramid-forward.ts

@@ -9,7 +9,9 @@ export type FunnelOptions = {
   adjustPoints?: (
     points: Vector2[],
     nextPoints: Vector2[],
+    previousPoints: Vector2[],
     coordinate: Coordinate,
+    reverse: boolean,
   ) => Vector2[];
   [key: string]: any;
 };
@@ -20,15 +22,45 @@ export type FunnelOptions = {
 function getFunnelPoints(
   points: Vector2[],
   nextPoints: Vector2[],
+  previousPoints: Vector2[],
   coordinate: Coordinate,
+  reverse: boolean,
 ) {
   const [p0, p1, p2, p3] = points;
-
   if (isTranspose(coordinate)) {
+    if (reverse) {
+      const newP0: Vector2 = [
+        previousPoints ? previousPoints[1][0] : p0[0],
+        p0[1],
+      ];
+
+      const newP3: Vector2 = [
+        previousPoints ? previousPoints[2][0] : p3[0],
+        p3[1],
+      ];
+
+      return [newP0, p1, p2, newP3];
+    }
+
     const newP1: Vector2 = [nextPoints ? nextPoints[0][0] : p1[0], p1[1]];
     const newP2: Vector2 = [nextPoints ? nextPoints[3][0] : p2[0], p2[1]];
     return [p0, newP1, newP2, p3];
   }
+
+  if (reverse) {
+    const newP0: Vector2 = [
+      p0[0],
+      previousPoints ? previousPoints[1][1] : p0[1],
+    ];
+
+    const newP3: Vector2 = [
+      p3[0],
+      previousPoints ? previousPoints[2][1] : p3[1],
+    ];
+
+    return [newP0, p1, p2, newP3];
+  }
+
   const newP1: Vector2 = [p1[0], nextPoints ? nextPoints[0][1] : p1[1]];
   const newP2: Vector2 = [p2[0], nextPoints ? nextPoints[3][1] : p2[1]];
   return [p0, newP1, newP2, p3];
@@ -125,7 +157,14 @@ export const Funnel: SC<FunnelOptions> = (options, context) => {
     const { index } = value;
     const { color: defaultColor, ...rest } = defaults;
     const nextPoints = point2d[index + 1];
-    const funnelPoints = adjustPoints(points, nextPoints, coordinate);
+    const previousPoints = point2d[index - 1];
+    const funnelPoints = adjustPoints(
+      points,
+      nextPoints,
+      previousPoints,
+      coordinate,
+      style.reverse,
+    );
     const tpShape = !!isTranspose(coordinate);
     const [p0, p1, p2, p3] = tpShape ? reorder(funnelPoints) : funnelPoints;
     const { color = defaultColor, opacity } = value;