AntV G2Plot 基础条形图：颜色渐变填充

在 AntV G2Plot 中，可以使用颜色渐变填充来美化基础条形图。在条形图的配置项中，可以设置 'color' 属性为一个函数，该函数返回一个渐变色值数组，如下所示：

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

const data = [
  { year: '1951 年', sales: 38 },
  { year: '1952 年', sales: 52 },
  { year: '1956 年', sales: 61 },
  { year: '1957 年', sales: 145 },
  { year: '1958 年', sales: 48 },
];

const color = (value) => {
  const gradient = context.createLinearGradient(0, 0, 0, 1);
  gradient.addColorStop(0, '#7A2F8F');
  gradient.addColorStop(1, '#E1008C');
  return gradient;
};

const bar = new Bar('container', {
  data,
  xField: 'sales',
  yField: 'year',
  color,
});

bar.render();

在上面的代码中，我们定义了一个名为 'color' 的函数，该函数返回一个渐变色值数组。在该函数中，我们使用了 'createLinearGradient' 方法来创建一个线性渐变对象，并设置渐变起点和终点的坐标，然后使用 'addColorStop' 方法来添加渐变色值，最后将渐变对象返回。在条形图的配置项中，我们将 'color' 属性设置为该函数，这样就可以实现基础条形图的颜色渐变填充。