From 6e4632b1666f370f842644c76092f33687919cc3 Mon Sep 17 00:00:00 2001 From: A_Bo Date: Wed, 13 Dec 2023 10:32:59 +0800 Subject: [PATCH] docs: add simple pie demos (#5921) * docs: add simple pie demos * docs: add simple pie demos * docs: update pie demo screenshot --------- Co-authored-by: liwenbo --- site/examples/general/pie/demo/donut-base.ts | 69 +++++++++++++++++++ site/examples/general/pie/demo/meta.json | 26 ++++++- .../general/pie/demo/pie-base-facet.ts | 65 +++++++++++++++++ site/examples/general/pie/demo/pie-base.ts | 34 +++++++++ 4 files changed, 193 insertions(+), 1 deletion(-) create mode 100644 site/examples/general/pie/demo/donut-base.ts create mode 100644 site/examples/general/pie/demo/pie-base-facet.ts create mode 100644 site/examples/general/pie/demo/pie-base.ts diff --git a/site/examples/general/pie/demo/donut-base.ts b/site/examples/general/pie/demo/donut-base.ts new file mode 100644 index 0000000000..5658762bad --- /dev/null +++ b/site/examples/general/pie/demo/donut-base.ts @@ -0,0 +1,69 @@ +import { Chart } from '@antv/g2'; + +const data = [ + { item: '事例一', count: 40, percent: 0.4 }, + { item: '事例二', count: 21, percent: 0.21 }, + { item: '事例三', count: 17, percent: 0.17 }, + { item: '事例四', count: 13, percent: 0.13 }, + { item: '事例五', count: 9, percent: 0.09 }, +]; + +const chart = new Chart({ + container: 'container', + autoFit: true, +}); + +chart.coordinate({ type: 'theta', outerRadius: 0.8, innerRadius: 0.5 }); + +chart + .interval() + .data(data) + .transform({ type: 'stackY' }) + .encode('y', 'percent') + .encode('color', 'item') + .legend('color', { position: 'bottom', layout: { justifyContent: 'center' } }) + .label({ + position: 'outside', + text: (data) => `${data.item}: ${data.percent * 100}%`, + }) + .tooltip((data) => ({ + name: data.item, + value: `${data.percent * 100}%`, + })); + +chart + .text() + .style('text', '主机') + // Relative position + .style('x', '50%') + .style('y', '50%') + .style('dy', -25) + .style('fontSize', 34) + .style('fill', '#8c8c8c') + .style('textAlign', 'center'); + +chart + .text() + .style('text', '200') + // Relative position + .style('x', '50%') + .style('y', '50%') + .style('dx', -25) + .style('dy', 25) + .style('fontSize', 44) + .style('fill', '#8c8c8c') + .style('textAlign', 'center'); + +chart + .text() + .style('text', '台') + // Relative position + .style('x', '50%') + .style('y', '50%') + .style('dx', 35) + .style('dy', 25) + .style('fontSize', 34) + .style('fill', '#8c8c8c') + .style('textAlign', 'center'); + +chart.render(); diff --git a/site/examples/general/pie/demo/meta.json b/site/examples/general/pie/demo/meta.json index 7f2e94cdc9..422e7b5e50 100644 --- a/site/examples/general/pie/demo/meta.json +++ b/site/examples/general/pie/demo/meta.json @@ -4,6 +4,30 @@ "en": "Category" }, "demos": [ + { + "filename": "pie-base.ts", + "title": { + "zh": "简单饼图", + "en": "Simple pie chart" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*1yoaSJ0rfrYAAAAAAAAAAAAADmJ7AQ/original" + }, + { + "filename": "donut-base.ts", + "title": { + "zh": "简单环图", + "en": "Simple donut chart" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*06RqSKmmVbEAAAAAAAAAAAAADmJ7AQ/original" + }, + { + "filename": "pie-base-facet.ts", + "title": { + "zh": "2018 年第一季度短视频用户性别分布", + "en": "Gender distribution of short video users" + }, + "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*enGVRIWj9KUAAAAAAAAAAAAADmJ7AQ/original" + }, { "filename": "pie.ts", "title": { @@ -45,4 +69,4 @@ "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*DziRQb4LMbAAAAAAAAAAAAAADmJ7AQ/original" } ] -} \ No newline at end of file +} diff --git a/site/examples/general/pie/demo/pie-base-facet.ts b/site/examples/general/pie/demo/pie-base-facet.ts new file mode 100644 index 0000000000..183489ab0d --- /dev/null +++ b/site/examples/general/pie/demo/pie-base-facet.ts @@ -0,0 +1,65 @@ +import { Chart } from '@antv/g2'; + +const data = [ + { type: '男性', percent: 56.4, color: '#0a9afe' }, + { type: '女性', percent: 43.6, color: '#f0657d' }, +]; + +const chart = new Chart({ + container: 'container', + autoFit: true, +}); + +const facetRect = chart + .facetRect() + .data(data) + .encode('x', 'type') + .axis(false) + .legend(false) + .view() + .attr('frame', false) + .coordinate({ type: 'theta', innerRadius: 0.5, outerRadius: 0.8 }); + +facetRect + .interval() + .encode('y', 100) + .scale('y', { zero: true }) + .style('fill', '#e8e8e8') + .tooltip(false) + .animate(false); + +facetRect + .interval() + .encode('y', 'percent') + .encode('color', 'color') + .scale('color', { type: 'identity' }) + .tooltip((data) => ({ + name: data.type, + value: data.percent, + })) + .animate('enter', { type: 'waveIn', duration: 1000 }); + +facetRect + .text() + .encode('text', 'type') + .style('textAlign', 'center') + .style('textBaseline', 'middle') + .style('fontSize', 20) + .style('color', '#8c8c8c') + .style('x', '50%') + .style('y', '50%') + .style('dy', -20); + +facetRect + .text() + .encode('text', 'percent') + .style('textAlign', 'center') + .style('textBaseline', 'middle') + .style('fontSize', 30) + .style('fontWeight', 500) + .style('color', '#000') + .style('x', '50%') + .style('y', '50%') + .style('dy', 20); + +chart.render(); diff --git a/site/examples/general/pie/demo/pie-base.ts b/site/examples/general/pie/demo/pie-base.ts new file mode 100644 index 0000000000..a20df18edb --- /dev/null +++ b/site/examples/general/pie/demo/pie-base.ts @@ -0,0 +1,34 @@ +import { Chart } from '@antv/g2'; + +const data = [ + { item: '事例一', count: 40, percent: 0.4 }, + { item: '事例二', count: 21, percent: 0.21 }, + { item: '事例三', count: 17, percent: 0.17 }, + { item: '事例四', count: 13, percent: 0.13 }, + { item: '事例五', count: 9, percent: 0.09 }, +]; + +const chart = new Chart({ + container: 'container', + autoFit: true, +}); + +chart.coordinate({ type: 'theta', outerRadius: 0.8 }); + +chart + .interval() + .data(data) + .transform({ type: 'stackY' }) + .encode('y', 'percent') + .encode('color', 'item') + .legend('color', { position: 'bottom', layout: { justifyContent: 'center' } }) + .label({ + position: 'outside', + text: (data) => `${data.item}: ${data.percent * 100}%`, + }) + .tooltip((data) => ({ + name: data.item, + value: `${data.percent * 100}%`, + })); + +chart.render();