G2Plot 条形图颜色渐变设置教程 - 使用 colorField 和 color 属性

在 G2Plot 中，您可以通过设置 color 属性来设置条形图的颜色，而颜色渐变可以通过设置 colorField 属性和 color 的值为一个数组来实现。具体操作步骤如下：

1. 设置 colorField 属性为需要设置颜色渐变的字段名，例如：

const plot = new BarPlot('container', {
  data: data,
  xField: 'x',
  yField: 'y',
  colorField: 'color',
  ...
});

2. 设置 color 的值为一个数组，其中第一个元素为起始颜色，最后一个元素为结束颜色，中间元素为颜色渐变过程中的颜色，例如：

const plot = new BarPlot('container', {
  data: data,
  xField: 'x',
  yField: 'y',
  colorField: 'color',
  color: ['#3B76FF', '#3B76FF', '#FFB900'],
  ...
});

其中，起始颜色和结束颜色都设置为蓝色（'#3B76FF'），中间颜色设置为黄色（'#FFB900'），这样就实现了颜色渐变的效果。

注意：colorField 和 color 的值要对应，即 colorField 的字段值对应 color 数组中的颜色渐变过程。

完整的代码示例：

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

const data = [
  { x: 'A', y: 10, color: 'a' },
  { x: 'B', y: 20, color: 'a' },
  { x: 'C', y: 30, color: 'b' },
  { x: 'D', y: 40, color: 'b' },
];

const plot = new BarPlot('container', {
  data: data,
  xField: 'x',
  yField: 'y',
  colorField: 'color',
  color: ['#3B76FF', '#3B76FF', '#FFB900'],
});

plot.render();