AntV G2 4.1.46版本的折柱图（Line and Bar Chart）并legend能够过滤

AntV G2 4.1.46版本的折柱图（Line and Bar Chart）可以通过配置 `legend` 实现过滤。以下是一个简单的示例：

<div id="container"></div>

import G2 from '@antv/g2';

// 数据源
const data = [
  { year: '2010', sales: 10, profits: 3 },
  { year: '2011', sales: 15, profits: 4 },
  { year: '2012', sales: 13, profits: 2 },
  { year: '2013', sales: 20, profits: 5 },
  { year: '2014', sales: 25, profits: 6 },
  { year: '2015', sales: 30, profits: 7 },
];

// 初始化图表
const chart = new G2.Chart({
  container: 'container',
  forceFit: true,
  height: 400,
});

// 绘制折线图
chart.line().position('year*sales').color('sales');
// 绘制柱状图
chart.interval().position('year*profits').color('profits');

// 添加 legend，并配置点击事件
chart.legend({
  position: 'right',
  clickable: true,
  itemFormatter: (val) => {
    // 根据 val 返回对应的图例名称
    if (val === 'sales') {
      return '销售额';
    } else {
      return '利润';
    }
  },
  onClick: (ev) => {
    const item = ev.item;
    const value = item.value;
    const checked = item.checked;
    
    // 根据 value 获取对应的图例名称
    let name;
    if (value === 'sales') {
      name = '销售额';
    } else {
      name = '利润';
    }

    // 根据图例名称筛选数据
    const filterData = data.filter((d) => {
      return d[name] !== null && d[name] !== undefined;
    });

    // 更新图表数据
    chart.changeData(filterData);

    // 更新图例状态
    const legendItems = chart.get('legendController').legends.top[0].items;
    for (let i = 0, len = legendItems.length; i < len; i++) {
      const item = legendItems[i];
      if (item.value === value) {
        if (checked) {
          item.marker = 'square';
        } else {
          item.marker = 'check';
        }
      }
    }
    chart.repaint();
  },
});
// 渲染图表
chart.render();

上述示例中，我们使用了 `legend` 配置项来添加图例，并配置了点击事件，根据点击的图例名称筛选数据并更新图表。在更新数据后，我们还需要手动更新图例状态，以便正确显示选中和未选中状态。