Ant Design Charts legend 图例开关

Ant Design Charts 提供了一个 `legend` 属性来控制图例的显示和隐藏。您可以将 `legend` 设置为一个对象来定义图例的样式和行为。下面是一个例子：

import { LineChart } from 'bizcharts';

const data = [
  { year: '1991', value: 3 },
  { year: '1992', value: 4 },
  { year: '1993', value: 3.5 },
  { year: '1994', value: 5 },
  { year: '1995', value: 4.9 },
  { year: '1996', value: 6 },
  { year: '1997', value: 7 },
  { year: '1998', value: 9 },
  { year: '1999', value: 13 },
];

const legend = {
  position: 'top',
  itemName: {
    formatter: val => {
      if (val === 'value') {
        return '销售额(万元)';
      }
      return val;
    },
  },
  marker: {
    symbol: 'circle',
    style: { r: 6 },
  },
  onClick: ev => {
    const item = ev.item;
    const value = item.value;
    const checked = ev.checked;
    const geoms = chart.getAllGeoms();
    for (let i = 0; i < geoms.length; i++) {
      const geom = geoms[i];
      if (geom.getYScale().field === value) {
        if (checked) {
          geom.show();
        } else {
          geom.hide();
        }
      }
    }
  },
};

function LineChartWithLegend(props) {
  return (
    <LineChart data={data} xField="year" yField="value" height={400} legend={legend} />
  );
}

在上面的代码中，我们通过 `legend` 属性来定义图例的样式和行为。`position` 属性指定了图例的位置，`itemName` 属性用于指定图例项的名称，`marker` 属性用于指定标记的样式，`onClick` 属性用于指定点击图例项后的行为。在 `onClick` 回调函数中，我们可以控制与之关联的几何对象的显示和隐藏，从而实现通过图例控制数据的筛选。