docs(demo): add a new demo about how to handle element multiple selected (#3253)

Author: visiky

examples/case/interactions/demo/element-selected.ts

@@ -0,0 +1,104 @@
+import { Column } from '@antv/g2plot';
+
+const data = [
+  {
+    name: 'London',
+    月份: 'Jan.',
+    月均降雨量: 18.9,
+  },
+  {
+    name: 'London',
+    月份: 'Feb.',
+    月均降雨量: 28.8,
+  },
+  {
+    name: 'London',
+    月份: 'Mar.',
+    月均降雨量: 39.3,
+  },
+  {
+    name: 'London',
+    月份: 'Apr.',
+    月均降雨量: 81.4,
+  },
+  {
+    name: 'London',
+    月份: 'May',
+    月均降雨量: 47,
+  },
+  {
+    name: 'London',
+    月份: 'Jun.',
+    月均降雨量: 20.3,
+  },
+  {
+    name: 'London',
+    月份: 'Jul.',
+    月均降雨量: 24,
+  },
+  {
+    name: 'London',
+    月份: 'Aug.',
+    月均降雨量: 35.6,
+  },
+  {
+    name: 'Berlin',
+    月份: 'Jan.',
+    月均降雨量: 12.4,
+  },
+  {
+    name: 'Berlin',
+    月份: 'Feb.',
+    月均降雨量: 23.2,
+  },
+  {
+    name: 'Berlin',
+    月份: 'Mar.',
+    月均降雨量: 34.5,
+  },
+  {
+    name: 'Berlin',
+    月份: 'Apr.',
+    月均降雨量: 99.7,
+  },
+  {
+    name: 'Berlin',
+    月份: 'May',
+    月均降雨量: 52.6,
+  },
+  {
+    name: 'Berlin',
+    月份: 'Jun.',
+    月均降雨量: 35.5,
+  },
+  {
+    name: 'Berlin',
+    月份: 'Jul.',
+    月均降雨量: 37.4,
+  },
+  {
+    name: 'Berlin',
+    月份: 'Aug.',
+    月均降雨量: 42.4,
+  },
+];
+
+const plot = new Column('container', {
+  data,
+  isGroup: true,
+  xField: '月份',
+  yField: '月均降雨量',
+  seriesField: 'name',
+  interactions: [{ type: 'element-selected' }]
+});
+
+plot.render();
+// 如果业务中还有单选联动，可以考虑使用按住某个键来区分交互 (或者多选之后，让用户自己去触发查询)
+document.addEventListener('keyup', (evt) => {
+  if (evt.key === 'Shift') {
+    const states = plot.getStates();
+    // 获取选中元素
+    // states.filter(d => d.state === 'selected')
+  }
+});
+

examples/case/interactions/demo/funnel-element-selected.ts

@@ -0,0 +1,29 @@
+import { Funnel } from '@antv/g2plot';
+
+const data = [
+  { stage: '简历筛选', number: 253 },
+  { stage: '初试人数', number: 151 },
+  { stage: '复试人数', number: 113 },
+  { stage: '录取人数', number: 87 },
+  { stage: '入职人数', number: 59 },
+];
+
+const funnelPlot = new Funnel('container', {
+  data: data,
+  xField: 'stage',
+  yField: 'number',
+  legend: false,
+  interactions: [{ type: 'element-active' }, { type: 'element-selected' }],
+});
+
+funnelPlot.render();
+// 如果业务中还有单选联动，可以考虑使用按住某个键来区分交互 (或者多选之后，让用户自己去触发查询)
+document.addEventListener('keyup', (evt) => {
+  if (evt.key === 'Shift') {
+    console.info(evt);
+    const states = funnelPlot.getStates();
+    console.info(states.filter((d) => d.state === 'selected'));
+    // 获取选中元素
+    // states.filter(d => d.state === 'selected')
+  }
+});

examples/case/interactions/demo/meta.json

@@ -0,0 +1,32 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "element-selected",
+      "title": {
+        "zh": "元素多选交互",
+        "en": "Element selected"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/VoiPvFL%26U5/pie-tooltip.gif"
+    },
+    {
+      "filename": "pie-element-selected",
+      "title": {
+        "zh": "饼图 - 元素多选交互",
+        "en": "Element selected"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/VoiPvFL%26U5/pie-tooltip.gif"
+    },
+    {
+      "filename": "funnelelement-selected",
+      "title": {
+        "zh": "漏斗图 元素多选交互",
+        "en": "Element selected"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/VoiPvFL%26U5/pie-tooltip.gif"
+    }
+  ]
+}

examples/case/interactions/demo/pie-element-selected.ts

@@ -0,0 +1,40 @@
+import { Pie } from '@antv/g2plot';
+
+const data = [
+  { type: '分类一', value: 27 },
+  { type: '分类二', value: 25 },
+  { type: '分类三', value: 18 },
+  { type: '分类四', value: 15 },
+  { type: '分类五', value: 10 },
+  { type: '其他', value: 5 },
+];
+
+const piePlot = new Pie('container', {
+  appendPadding: 10,
+  data,
+  angleField: 'value',
+  colorField: 'type',
+  radius: 0.9,
+  label: {
+    type: 'inner',
+    offset: '-30%',
+    content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
+    style: {
+      fontSize: 14,
+      textAlign: 'center',
+    },
+  },
+  interactions: [{ type: 'element-active' }, { type: 'element-selected' }],
+});
+
+piePlot.render();
+// 如果业务中还有单选联动，可以考虑使用按住某个键来区分交互 (或者多选之后，让用户自己去触发查询)
+document.addEventListener('keyup', (evt) => {
+  if (evt.key === 'Shift') {
+    console.info(evt);
+    const states = piePlot.getStates();
+    console.info(states.filter((d) => d.state === 'selected'));
+    // 获取选中元素
+    // states.filter(d => d.state === 'selected')
+  }
+});

examples/case/interactions/index.en.md

@@ -0,0 +1,4 @@
+---
+title: Advanced interactions
+order: 4
+---

examples/case/interactions/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: 高级交互
+order: 4
+---