antv G2Plot 柱状图自定义图列

在 antv G2Plot 中，可以通过设置 legend 属性来自定义柱状图的图例。具体步骤如下：

在数据源中为每个数据列设置一个标签，用于作为图例的显示名称。
在 geomColumn 层中设置 color 属性并指定颜色映射规则。这样就可以为每个数据列设置不同的颜色。
在 legend 属性中设置图例的位置、对齐方式、字体样式等属性，以及指定需要显示的数据列。

示例代码如下：

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

const data = [
  { year: '2015', sales: 300, profit: 50 },
  { year: '2016', sales: 600, profit: 80 },
  { year: '2017', sales: 900, profit: 120 },
  { year: '2018', sales: 1200, profit: 150 },
];

const barPlot = new Bar('container', {
  data,
  xField: 'year',
  yField: 'sales',
  seriesField: 'type',
  legend: {
    position: 'top',
    align: 'center',
    itemName: {
      style: {
        fill: 'red',
        fontWeight: 'bold'
      }
    }
  },
  columnStyle: {
    fillOpacity: 0.8,
  },
  label: {
    position: 'middle',
    style: {
      fill: 'white',
    },
  },
  yAxis: {
    label: {
      style: {
        fill: 'black',
      },
    },
  },
  tooltip: {
    formatter: (datum) => {
      return {
        name: datum.type,
        value: '$' + datum.sales,
      };
    },
  },
});

barPlot.render();

在上述代码中，通过设置 seriesField 属性为 type，将数据按照 type 字段进行分组，并将每个数据列的标签设置为 type 字段的值。然后在 geomColumn 层中设置 color 属性为 type 字段的值，并指定颜色映射规则。最后在 legend 属性中设置图例的位置、对齐方式、字体样式等属性，并指定需要显示的数据列为 type。运行代码，即可得到一个带有自定义图例的柱状图。