G2Plot 分组柱状图 Column 最多选择三个图例

在 G2Plot 分组柱状图 Column 中，可以通过设置 legend 的选项来控制最多选择三个图例。具体的做法如下：

设置数据源中的图例字段，如：

const data = [
  { name: '类型1', value: 100, category: '类别A' },
  { name: '类型2', value: 200, category: '类别A' },
  { name: '类型3', value: 150, category: '类别A' },
  { name: '类型1', value: 120, category: '类别B' },
  { name: '类型2', value: 80, category: '类别B' },
  { name: '类型3', value: 90, category: '类别B' },
];

其中，name 字段表示图例的名称，category 字段表示柱状图的分组。

在创建柱状图时，设置 legend 选项，如：

const plot = new Column('container', {
  data,
  xField: 'category',
  yField: 'value',
  seriesField: 'name',
  legend: {
    maxItemWidth: 80, // 控制每个图例项的最大宽度
    flipPage: true, // 开启分页模式
    maxItemCount: 3, // 最多显示 3 个图例项
  },
});

其中，maxItemWidth 选项可以控制每个图例项的最大宽度；flipPage 选项可以开启分页模式；maxItemCount 选项可以控制最多显示的图例项数量。通过这些选项的设置，就可以在 G2Plot 分组柱状图 Column 中，最多选择三个图例了。