antv如何在G2Plot分组柱状图legend事件

在G2Plot分组柱状图中，可以通过设置legend选项来控制图例的显示和交互事件。

具体实现方法如下：

1. 设置legend选项中的visible属性为true，表示显示图例。

2. 设置legend选项中的clickable属性为true，表示开启图例的交互事件。

3. 在legend选项中设置custom属性，值为一个函数，用来自定义图例的样式和交互事件。在该函数中，可以使用this关键字来访问当前的图例对象。

例如，下面是一个在G2Plot分组柱状图中实现图例交互事件的示例代码：

import { GroupedColumn } from '@antv/g2plot';

const data = [
  { year: '2019', type: 'Clothes', value: 120 },
  { year: '2019', type: 'Food', value: 300 },
  { year: '2019', type: 'Electronics', value: 200 },
  { year: '2020', type: 'Clothes', value: 200 },
  { year: '2020', type: 'Food', value: 400 },
  { year: '2020', type: 'Electronics', value: 350 },
];

const plot = new GroupedColumn('container', {
  data,
  xField: 'year',
  yField: 'value',
  seriesField: 'type',
  legend: {
    visible: true,
    clickable: true,
    custom: (items) => {
      // 遍历图例项
      items.forEach((item) => {
        // 获取当前图例项的文本和图标
        const { name, marker } = item;
        // 获取当前图例项对应的图形元素
        const shape = item.get('shape');
        // 给图形元素添加交互事件
        shape.on('click', () => {
          // 切换对应系列的可见性
          const view = this.chart.views[0];
          const series = view.geometries.find((g) => g.getAttribute('color') === marker.stroke);
          series.visible ? series.hide() : series.show();
          // 更新图例样式
          const opacity = series.visible ? 1 : 0.3;
          item.update({ marker: { ...marker, opacity } });
        });
      });
    },
  },
});

plot.render();

在上述代码中，通过legend.custom函数来自定义图例的样式和交互事件。在该函数中，首先遍历每个图例项，获取它的文本和图标，以及对应的图形元素。然后给图形元素添加click事件，当点击图例项时，就可以通过this.chart.views[0]来获取当前视图中的图形元素，并根据颜色属性来找到对应的系列。接着切换系列的可见性，并根据可见性更新图例项的样式。这样就实现了一个简单的图例交互功能。