From f6b1792416c5de4a9458bed2e49bf118454a86e1 Mon Sep 17 00:00:00 2001 From: hustcc Date: Tue, 16 May 2023 15:43:28 +0800 Subject: [PATCH] docs: add demo of funnel and pyramid --- site/.dumirc.ts | 2 +- site/examples/general/funnel/demo/funnel.ts | 40 +++++++++ site/examples/general/funnel/demo/meta.json | 32 +++++++ .../general/funnel/demo/mirror-funnel.ts | 85 +++++++++++++++++++ site/examples/general/funnel/demo/pyramid.ts | 54 ++++++++++++ site/examples/general/funnel/index.en.md | 4 + site/examples/general/funnel/index.zh.md | 4 + 7 files changed, 220 insertions(+), 1 deletion(-) create mode 100644 site/examples/general/funnel/demo/funnel.ts create mode 100644 site/examples/general/funnel/demo/meta.json create mode 100644 site/examples/general/funnel/demo/mirror-funnel.ts create mode 100644 site/examples/general/funnel/demo/pyramid.ts create mode 100644 site/examples/general/funnel/index.en.md create mode 100644 site/examples/general/funnel/index.zh.md diff --git a/site/.dumirc.ts b/site/.dumirc.ts index 2d4dbb3335..f7d4707d92 100644 --- a/site/.dumirc.ts +++ b/site/.dumirc.ts @@ -243,7 +243,7 @@ export default defineConfig({ { slug: 'general', title: { - zh: '基础', + zh: '基础图表', en: 'General', }, icon: 'other', diff --git a/site/examples/general/funnel/demo/funnel.ts b/site/examples/general/funnel/demo/funnel.ts new file mode 100644 index 0000000000..ff30f85613 --- /dev/null +++ b/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(); diff --git a/site/examples/general/funnel/demo/meta.json b/site/examples/general/funnel/demo/meta.json new file mode 100644 index 0000000000..65e3e1941e --- /dev/null +++ b/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" + } + ] +} diff --git a/site/examples/general/funnel/demo/mirror-funnel.ts b/site/examples/general/funnel/demo/mirror-funnel.ts new file mode 100644 index 0000000000..56d6a8f0bc --- /dev/null +++ b/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(); diff --git a/site/examples/general/funnel/demo/pyramid.ts b/site/examples/general/funnel/demo/pyramid.ts new file mode 100644 index 0000000000..24488f57c9 --- /dev/null +++ b/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(); diff --git a/site/examples/general/funnel/index.en.md b/site/examples/general/funnel/index.en.md new file mode 100644 index 0000000000..7625ad01db --- /dev/null +++ b/site/examples/general/funnel/index.en.md @@ -0,0 +1,4 @@ +--- +title: Funnel +order: 17 +--- \ No newline at end of file diff --git a/site/examples/general/funnel/index.zh.md b/site/examples/general/funnel/index.zh.md new file mode 100644 index 0000000000..11500d2601 --- /dev/null +++ b/site/examples/general/funnel/index.zh.md @@ -0,0 +1,4 @@ +--- +title: 漏斗图 +order: 17 +--- \ No newline at end of file