G2 图表点击图例触发事件实现方法

要在 G2 图表中实现点击图例触发事件，可以使用 G2 提供的 on 方法来绑定事件监听器。以下是一个示例代码，演示了如何在点击图例时触发事件：

import { Chart } from '@antv/g2';

// 创建一个图表实例
const chart = new Chart({
  container: 'chart-container',
  width: 400,
  height: 300,
});

// 假设有一个柱状图
chart.data(data);
chart.interval().position('year*sales');

// 监听图例点击事件
chart.on('legend-item:on-click', (ev) => {
  const clickedItem = ev.item;  // 获取点击的图例项
  const checked = clickedItem.get('checked');  // 获取图例项的选中状态

  // 在这里可以根据选中状态执行相应的操作
  if (checked) {
    console.log('图例项被选中');
  } else {
    console.log('图例项被取消选中');
  }
});

// 渲染图表
chart.render();

在上述代码中，我们通过 chart.on('legend-item:on-click', callback) 来监听图例项的点击事件。当图例项被点击时，回调函数 callback 会被调用，并且 ev 参数中包含了与点击相关的信息。我们可以通过 ev.item 获取到被点击的图例项，然后使用 get('checked') 方法获取该图例项的选中状态。

根据选中状态，我们可以执行相应的操作。在上述示例中，我们简单地使用 console.log() 输出选中状态。你可以根据需要来编写具体的事件处理逻辑。