docs: add radial graph demos (#6116)

* docs: add radial graph demos

* docs: change radial demo screenshot url

* docs: change radial stacked data transform

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

@@ -27,6 +27,30 @@
         "en": "Apple Activity"
       },
       "screenshot": "https://mdn.alipayobjects.com/mdn/huamei_qa8qxu/afts/img/A*o3j-SZCiTZwAAAAAAAAAAAAADmJ7AQ"
+    },
+    {
+      "filename": "radial-bar-with-background.ts",
+      "title": {
+        "zh": "带背景的玉珏图",
+        "en": "Radial bar chart with background"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*9FxwQIEcoDMAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "radial-stacked.ts",
+      "title": {
+        "en": "Radial stacked bar chart",
+        "zh": "径向堆叠条形图"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*T3NtSLBLc0sAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "radial-line.ts",
+      "title": {
+        "en": "Radial bar chart",
+        "zh": "径向条形图"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*h3MESLqnM4QAAAAAAAAAAAAADmJ7AQ/original"
     }
   ]
 }

site/examples/general/radial/demo/radial-bar-with-background.ts

@@ -0,0 +1,65 @@
+import { Chart } from '@antv/g2';
+
+const data = [
+  { type: '1-3秒', value: 0.16 },
+  { type: '4-10秒', value: 0.125 },
+  { type: '11-30秒', value: 0.2 },
+  { type: '1-3分', value: 0.2 },
+  { type: '3-10分', value: 0.05 },
+  { type: '10-30分', value: 0.01 },
+  { type: '30+分', value: 0.015 },
+];
+
+const chart = new Chart({
+  container: 'container',
+  autoFit: true,
+  theme: 'dark',
+});
+
+chart.data(data).coordinate({ type: 'radial', innerRadius: 0.35 });
+
+chart
+  .interval()
+  .encode('x', 'type')
+  .encode('y', 0.2)
+  .style('fill', '#202020')
+  .state({
+    active: { strokeWidth: 0 },
+  })
+  .tooltip(false);
+
+chart
+  .interval()
+  .encode('x', 'type')
+  .encode('y', 'value')
+  .encode('color', [
+    (val) => (val.type === '10-30分' || val.type === '30+分' ? 'high' : 'low'),
+  ])
+  .scale('color', { range: ['#5B8FF9', '#ff4d4f'] })
+  .style('radius', 20)
+  .tooltip([
+    (item) => ({
+      name: item.type,
+      value: item.value,
+    }),
+  ])
+  .axis(false)
+  .legend(false)
+  .state({
+    active: { stroke: '#fff', strokeWidth: 1 },
+  })
+  .interaction('elementHighlight');
+
+chart
+  .image()
+  .style('x', '50%')
+  .style('y', '50%')
+  .style('width', 100)
+  .style('height', 80)
+  .encode(
+    'src',
+    'https://gw.alipayobjects.com/mdn/rms_ef85c6/afts/img/A*0DYiQKP08cQAAAAAAAAAAAAAARQnAQ',
+  )
+  .tooltip(false);
+
+chart.render();

site/examples/general/radial/demo/radial-line.ts

@@ -0,0 +1,62 @@
+import { Chart } from '@antv/g2';
+
+const data = [
+  { term: 'Zombieland', count: 9 },
+  { term: 'Wieners', count: 8 },
+  { term: 'Toy Story', count: 8 },
+  { term: 'trashkannon', count: 7 },
+  { term: 'the GROWLERS', count: 6 },
+  { term: 'mudweiser', count: 6 },
+  { term: 'ThunderCats', count: 4 },
+  { term: 'The Taqwacores - Motion Picture', count: 4 },
+  { term: 'The Shawshank Redemption', count: 2 },
+  { term: 'The Olivia Experiment', count: 1 },
+];
+
+const chart = new Chart({
+  container: 'container',
+  autoFit: true,
+  padding: 50,
+});
+
+chart
+  .data(data)
+  .coordinate({ type: 'radial', innerRadius: 0.2, endAngle: Math.PI });
+
+chart
+  .interval()
+  .encode('x', 'term')
+  .encode('y', 'count')
+  .encode('size', 5)
+  .axis({
+    y: false,
+    x: {
+      title: false,
+    },
+  });
+
+chart
+  .point()
+  .encode('x', 'term')
+  .encode('y', 'count')
+  .encode('shape', 'point')
+  .encode('size', 4)
+  .tooltip({
+    title: (item) => item.term,
+    items: [
+      (item) => ({
+        name: 'count',
+        value: item.count,
+      }),
+    ],
+  });
+
+chart
+  .text()
+  .style('text', 'Music')
+  .style('x', '50%')
+  .style('y', '50%')
+  .style('textAlign', 'center')
+  .style('fontSize', 24);
+
+chart.render();

site/examples/general/radial/demo/radial-stacked.ts

@@ -0,0 +1,62 @@
+import { Chart } from '@antv/g2';
+
+const data = [
+  { State: 'WY', 小于5岁: 25635, '5至13岁': 1890, '14至17岁': 9314 },
+  { State: 'DC', 小于5岁: 30352, '5至13岁': 20439, '14至17岁': 10225 },
+  { State: 'VT', 小于5岁: 38253, '5至13岁': 42538, '14至17岁': 15757 },
+  { State: 'ND', 小于5岁: 51896, '5至13岁': 67358, '14至17岁': 18794 },
+  { State: 'AK', 小于5岁: 72083, '5至13岁': 85640, '14至17岁': 22153 },
+];
+
+const chart = new Chart({
+  container: 'container',
+  autoFit: true,
+});
+
+chart.coordinate({ type: 'radial' });
+
+chart
+  .interval()
+  .data({
+    value: data,
+    transform: [
+      {
+        type: 'fold',
+        fields: ['小于5岁', '5至13岁', '14至17岁'],
+        key: '年龄段',
+        value: '人口数量',
+        retains: ['State'],
+      },
+    ],
+  })
+  .encode('x', 'State')
+  .encode('y', '人口数量')
+  .encode('color', '年龄段')
+  .scale('y', { domainMax: 200000 })
+  .scale('color', { range: ['#6395FA', '#62DAAB', '#657798'] })
+  .transform({ type: 'stackY' })
+  .axis({
+    x: {
+      title: false,
+      line: true,
+    },
+    y: {
+      line: true,
+      grid: true,
+      gridLineDash: [4, 4],
+      tickCount: 10,
+      tickFilter: (datum) => datum != 200000,
+    },
+  })
+  .legend({
+    color: {
+      position: 'bottom',
+      layout: { justifyContent: 'center' },
+    },
+  })
+  .interaction('elementHighlightByX')
+  .interaction('tooltip', {
+    shared: true,
+  });
+
+chart.render();