docs: add the two axis charts demo (#5740)

* feat: add two-axis-chart demos and finish code

* feat: add demo info in meta.json

* feat: add screenshot link to meta.json and format code style

* fix: fix the chart title in meta.json

* fix: change the chart name in English

site/examples/general/dual/demo/dual-axis-bar.ts

@@ -0,0 +1,37 @@
+import { Chart } from '@antv/g2';
+
+const chart = new Chart({
+  container: 'container',
+  autoFit: true,
+});
+
+const data = [
+  { time: '10:10', call: 4, waiting: 2, people: 2 },
+  { time: '10:15', call: 2, waiting: 6, people: 3 },
+  { time: '10:20', call: 13, waiting: 2, people: 5 },
+  { time: '10:25', call: 9, waiting: 9, people: 1 },
+  { time: '10:30', call: 5, waiting: 2, people: 3 },
+  { time: '10:35', call: 8, waiting: 2, people: 1 },
+  { time: '10:40', call: 13, waiting: 1, people: 2 },
+];
+
+chart.data(data);
+
+chart
+  .interval()
+  .encode('x', 'time')
+  .encode('y', 'waiting')
+  .encode('color', () => 'waiting')
+  .encode('series', () => 'waiting')
+  .axis('y', { title: 'Waiting' });
+
+chart
+  .interval()
+  .encode('x', 'time')
+  .encode('y', 'people')
+  .encode('color', () => 'people')
+  .encode('series', () => 'people')
+  .scale('y', { independent: true })
+  .axis('y', { position: 'right', grid: null, title: 'People' });
+
+chart.render();

site/examples/general/dual/demo/dual-axis-line-bar.ts

@@ -0,0 +1,45 @@
+import { Chart } from '@antv/g2';
+
+const chart = new Chart({
+  container: 'container',
+  autoFit: true,
+});
+
+const data = [
+  { time: '10:10', call: 4, waiting: 2, people: 2 },
+  { time: '10:15', call: 2, waiting: 6, people: 3 },
+  { time: '10:20', call: 13, waiting: 2, people: 5 },
+  { time: '10:25', call: 9, waiting: 9, people: 1 },
+  { time: '10:30', call: 5, waiting: 2, people: 3 },
+  { time: '10:35', call: 8, waiting: 2, people: 1 },
+  { time: '10:40', call: 13, waiting: 1, people: 2 },
+];
+
+chart.data(data);
+
+chart
+  .interval()
+  .encode('x', 'time')
+  .encode('y', 'waiting')
+  .encode('color', () => 'waiting')
+  .encode('series', () => 'waiting')
+  .axis('y', { title: 'Waiting' })
+  .scale('y', { nice: true });
+
+chart
+  .interval()
+  .encode('x', 'time')
+  .encode('y', 'people')
+  .encode('color', () => 'people')
+  .encode('series', () => 'people')
+  .scale('y', { independent: true })
+  .axis('y', { position: 'right', grid: null, title: 'People' });
+
+chart
+  .line()
+  .encode('x', 'time')
+  .encode('y', 'call')
+  .encode('color', () => 'call')
+  .scale('series', { independent: true });
+
+chart.render();

site/examples/general/dual/demo/dual-axis-multi-line-bar.ts

@@ -0,0 +1,53 @@
+import { Chart } from '@antv/g2';
+
+const chart = new Chart({
+  container: 'container',
+  autoFit: true,
+});
+
+const data = [
+  { time: '10:10', call: 4, waiting: 2, people: 2, mock: 3 },
+  { time: '10:15', call: 2, waiting: 6, people: 3, mock: 4 },
+  { time: '10:20', call: 13, waiting: 2, people: 5, mock: 1 },
+  { time: '10:25', call: 9, waiting: 9, people: 1, mock: 2 },
+  { time: '10:30', call: 5, waiting: 2, people: 3, mock: 5 },
+  { time: '10:35', call: 8, waiting: 2, people: 1, mock: 3 },
+  { time: '10:40', call: 13, waiting: 1, people: 2, mock: 2 },
+];
+
+chart.data(data);
+
+chart
+  .interval()
+  .encode('x', 'time')
+  .encode('y', 'waiting')
+  .encode('color', () => 'waiting')
+  .encode('series', () => 'waiting')
+  .axis('y', { title: null })
+  .scale('y', { nice: true });
+
+chart
+  .interval()
+  .encode('x', 'time')
+  .encode('y', 'people')
+  .encode('color', () => 'people')
+  .encode('series', () => 'people')
+  .scale('y', { key: '2' })
+  .axis('y', { position: 'right', grid: null, title: null });
+
+chart
+  .line()
+  .encode('x', 'time')
+  .encode('y', 'call')
+  .encode('color', () => 'call')
+  .scale('series', { independent: true });
+
+chart
+  .line()
+  .encode('x', 'time')
+  .encode('y', 'mock')
+  .encode('color', () => 'mock')
+  .scale('y', { key: '2' })
+  .scale('series', { independent: true });
+
+chart.render();

site/examples/general/dual/demo/dual-axis-stacked-group-bar.ts

@@ -0,0 +1,49 @@
+import { Chart } from '@antv/g2';
+
+const chart = new Chart({
+  container: 'container',
+  autoFit: true,
+});
+
+const data = [
+  { time: '10:10', call: 4, waiting: 2, people: 2, mock: 3 },
+  { time: '10:15', call: 2, waiting: 6, people: 3, mock: 4 },
+  { time: '10:20', call: 13, waiting: 2, people: 5, mock: 1 },
+  { time: '10:25', call: 9, waiting: 9, people: 1, mock: 2 },
+  { time: '10:30', call: 5, waiting: 2, people: 3, mock: 5 },
+  { time: '10:35', call: 8, waiting: 2, people: 1, mock: 3 },
+  { time: '10:40', call: 13, waiting: 1, people: 2, mock: 2 },
+];
+
+chart.data(data);
+
+chart
+  .interval()
+  .data({
+    transform: [{ type: 'fold', fields: ['call', 'waiting'] }],
+  })
+  .encode('x', 'time')
+  .encode('y', 'value')
+  .encode('color', 'key')
+  .encode('series', () => 'a')
+  .transform({ type: 'stackY' })
+  .scale('y', { nice: true })
+  .axis('y', { title: null });
+
+chart
+  .interval()
+  .encode('x', 'time')
+  .encode('y', 'people')
+  .encode('color', () => 'people')
+  .encode('series', () => 'b');
+
+chart
+  .interval()
+  .encode('x', 'time')
+  .encode('y', 'mock')
+  .encode('color', () => 'mock')
+  .encode('series', () => 'c')
+  .scale('y', { independent: true })
+  .axis('y', { position: 'right' });
+
+chart.render();

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

@@ -35,6 +35,38 @@
         "en": "Pareto Chart"
       },
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*COKsS6s75kYAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "dual-axis-bar.ts",
+      "title": {
+        "zh": "双轴条形图",
+        "en": "Dual Axis Bar Chart"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*gZCnTpDcG_UAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "dual-axis-line-bar.ts",
+      "title": {
+        "zh": "双轴折线条形图",
+        "en": "Dual Axis Line Bar Chart"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*xyKZRYhgvMMAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "dual-axis-multi-line-bar.ts",
+      "title": {
+        "zh": "双轴多折线条形图",
+        "en": "Dual Axis Multiple Line Bar Chart"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*xyXJRIAxTKgAAAAAAAAAAAAADmJ7AQ/original"
+    },
+    {
+      "filename": "dual-axis-stacked-group-bar.ts",
+      "title": {
+        "zh": "双轴堆叠分组条形图",
+        "en": "Dual Axis Stacked Group Bar Chart"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*O-pVR7pt2DkAAAAAAAAAAAAADmJ7AQ/original"
     }
   ]
-}
+}