docs: add demo of funnel and pyramid (#5033)

site/.dumirc.ts

@@ -243,7 +243,7 @@ export default defineConfig({
       {
         slug: 'general',
         title: {
-          zh: '基础',
+          zh: '基础图表',
           en: 'General',
         },
         icon: 'other',

site/examples/general/funnel/demo/funnel.ts

@@ -0,0 +1,40 @@
+import { Chart } from '@antv/g2';
+
+const data = [
+  { action: '浏览网站', pv: 50000 },
+  { action: '放入购物车', pv: 35000 },
+  { action: '生成订单', pv: 25000 },
+  { action: '支付订单', pv: 15000 },
+  { action: '完成交易', pv: 8000 },
+];
+
+const chart = new Chart({
+  container: 'container',
+  theme: 'classic',
+  autoFit: true,
+  paddingRight: 100,
+});
+
+chart.coordinate({
+  transform: [{ type: 'transpose' }],
+});
+
+chart.data(data);
+
+chart
+  .interval()
+  .encode('x', 'action')
+  .encode('y', 'pv')
+  .encode('color', 'action')
+  .encode('shape', 'funnel')
+  .transform({ type: 'symmetryY' })
+  .scale('x', { padding: 0 })
+  .animate('enter', { type: 'fadeIn' })
+  .label({
+    text: (d) => `${d.action}\n${d.pv}`,
+    position: 'inside',
+    transform: [{ type: 'contrastReverse' }],
+  })
+  .axis(false);
+
+chart.render();

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

@@ -0,0 +1,32 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "funnel.ts",
+      "title": {
+        "zh": "漏斗图",
+        "en": "Funnel"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*6syuS6eMD1AAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "pyramid.ts",
+      "title": {
+        "zh": "金字塔图",
+        "en": "Pyramid"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*8SagQbsQk6gAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "mirror-funnel.ts",
+      "title": {
+        "zh": "对比漏斗图",
+        "en": "Mirror Funnel"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ejYqRJVJ12gAAAAAAAAAAAAADmJ7AQ/original"
+    }
+  ]
+}

site/examples/general/funnel/demo/mirror-funnel.ts

@@ -0,0 +1,85 @@
+import { Chart } from '@antv/g2';
+
+const data = [
+  { action: '访问', visitor: 500, site: '站点1' },
+  { action: '浏览', visitor: 400, site: '站点1' },
+  { action: '交互', visitor: 300, site: '站点1' },
+  { action: '下单', visitor: 200, site: '站点1' },
+  { action: '完成', visitor: 100, site: '站点1' },
+  { action: '访问', visitor: 550, site: '站点2' },
+  { action: '浏览', visitor: 420, site: '站点2' },
+  { action: '交互', visitor: 280, site: '站点2' },
+  { action: '下单', visitor: 150, site: '站点2' },
+  { action: '完成', visitor: 80, site: '站点2' },
+];
+
+const chart = new Chart({
+  container: 'container',
+  theme: 'classic',
+  autoFit: true,
+});
+
+chart.data(data);
+
+chart.scale('x', { padding: 0 });
+chart.scale('color', {
+  range: ['#0050B3', '#1890FF', '#40A9FF', '#69C0FF', '#BAE7FF'],
+});
+chart.axis(false);
+
+chart.coordinate({
+  transform: [{ type: 'transpose' }],
+});
+
+chart
+  .interval()
+  .data({
+    transform: [
+      {
+        type: 'filter',
+        callback: (d) => d.site === '站点1',
+      },
+    ],
+  })
+  .encode('x', 'action')
+  .encode('y', 'visitor')
+  .encode('color', 'action')
+  .encode('shape', 'funnel')
+  .label({
+    text: 'visitor',
+    position: 'inside',
+    transform: [{ type: 'contrastReverse' }],
+  })
+  .label({
+    text: 'action',
+    position: 'right',
+    dx: (d) => {
+      return d.action === '完成' ? 48 : 16;
+    },
+  })
+  .style('stroke', '#FFF')
+  .animate('enter', { type: 'fadeIn' });
+
+chart
+  .interval()
+  .data({
+    transform: [
+      {
+        type: 'filter',
+        callback: (d) => d.site === '站点2',
+      },
+    ],
+  })
+  .encode('x', 'action')
+  .encode('y', (d) => -d.visitor)
+  .encode('color', 'action')
+  .encode('shape', 'funnel')
+  .label({
+    text: 'visitor',
+    position: 'inside',
+    transform: [{ type: 'contrastReverse' }],
+  })
+  .style('stroke', '#FFF')
+  .animate('enter', { type: 'fadeIn' });
+
+chart.render();

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

@@ -0,0 +1,54 @@
+import { Chart } from '@antv/g2';
+
+const data = [
+  { action: '浏览网站', pv: 50000 },
+  { action: '放入购物车', pv: 35000 },
+  { action: '生成订单', pv: 25000 },
+  { action: '支付订单', pv: 15000 },
+  { action: '完成交易', pv: 8000 },
+];
+
+const chart = new Chart({
+  container: 'container',
+  theme: 'classic',
+  autoFit: true,
+  paddingRight: 100,
+});
+
+chart.coordinate({
+  transform: [{ type: 'transpose' }],
+});
+
+chart.data({
+  type: 'inline',
+  value: data,
+  transform: [
+    {
+      type: 'custom',
+      callback: (data) => data.map((d) => ({ ...d, rate: d.pv / data[0].pv })),
+    },
+  ],
+});
+
+chart
+  .interval()
+  .encode('x', 'action')
+  .encode('y', 'pv')
+  .encode('color', 'action')
+  .encode('shape', 'pyramid')
+  .transform({ type: 'symmetryY' })
+  .scale('x', { padding: 0 })
+  .animate('enter', { type: 'fadeIn' })
+  .label({
+    text: (d) => `${d.action} ${d.pv}`,
+    textAlign: 'left',
+  })
+  .label({
+    text: (d) => `${(d.rate * 100).toFixed(1)}%`,
+    position: 'inside',
+    transform: [{ type: 'contrastReverse' }],
+  })
+  .legend('color', { position: 'bottom' })
+  .axis(false);
+
+chart.render();

site/examples/general/funnel/index.en.md

@@ -0,0 +1,4 @@
+---
+title: Funnel
+order: 17
+---

site/examples/general/funnel/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: 漏斗图
+order: 17
+---