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 <[email protected]>

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();

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"
     }
   ]
-}
+}

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();

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();