docs: add grouped stacked column line demo

site/examples/statistics/dual-axes/demo/grouped-stacked-column-line.js

@@ -0,0 +1,81 @@
+import { DualAxes } from '@ant-design/plots';
+import React from 'react';
+import { createRoot } from 'react-dom';
+
+const DemoDualAxes = () => {
+  const uvBillData = [
+    { time: '2025-03', value: 350, group: 'uv', type: 'a' },
+    { time: '2025-04', value: 900, group: 'uv', type: 'a' },
+    { time: '2025-05', value: 300, group: 'uv', type: 'a' },
+    { time: '2025-06', value: 450, group: 'uv', type: 'a' },
+    { time: '2025-07', value: 470, group: 'uv', type: 'a' },
+
+    { time: '2025-03', value: 350, group: 'uv', type: 'b' },
+    { time: '2025-04', value: 900, group: 'uv', type: 'b' },
+    { time: '2025-05', value: 300, group: 'uv', type: 'b' },
+    { time: '2025-06', value: 450, group: 'uv', type: 'b' },
+    { time: '2025-07', value: 470, group: 'uv', type: 'b' },
+
+    { time: '2025-03', value: 220, group: 'bill', type: 'c' },
+    { time: '2025-04', value: 300, group: 'bill', type: 'c' },
+    { time: '2025-05', value: 250, group: 'bill', type: 'c' },
+    { time: '2025-06', value: 220, group: 'bill', type: 'c' },
+    { time: '2025-07', value: 362, group: 'bill', type: 'c' },
+  ];
+
+  const transformData = [
+    { time: '2025-03', count: 800 },
+    { time: '2025-04', count: 600 },
+    { time: '2025-05', count: 400 },
+    { time: '2025-06', count: 380 },
+    { time: '2025-07', count: 220 },
+  ];
+
+  const config = {
+    xField: 'time',
+    legend: {
+      color: {
+        itemMarker: (datum) => {
+          if (datum === 'count') {
+            return 'dash';
+          } else {
+            return 'square';
+          }
+        },
+      },
+    },
+    children: [
+      {
+        data: uvBillData,
+        type: 'interval',
+        yField: 'value',
+        colorField: 'type',
+        seriesField: 'group',
+        stack: {
+          groupBy: ['x', 'series'],
+        },
+        group: true,
+        tooltip: {
+          items: [
+            (datum) => {
+              return {
+                name: `${datum.group}_${datum.type}`,
+                value: datum.value,
+              };
+            },
+          ],
+        },
+      },
+      {
+        data: transformData,
+        type: 'line',
+        yField: 'count',
+        style: { lineWidth: 2 },
+        axis: { y: { position: 'right' } },
+      },
+    ],
+  };
+  return <DualAxes {...config} />;
+};
+
+createRoot(document.getElementById('container')).render(<DemoDualAxes />);

site/examples/statistics/dual-axes/demo/meta.json

@@ -171,6 +171,14 @@
         "en": "Grouped column multi line"
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*xzh4RYzYTFcAAAAAAAAAAAAAARQnAQ"
+    },
+    {
+      "filename": "grouped-stacked-column-line.js",
+      "title": {
+        "zh": "分组堆叠柱线图表",
+        "en": "Grouped stacked column line"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*hhUWS6yU84YAAAAAQWAAAAgAemJ7AQ/fmt.avif"
     }
   ]
 }