AntV G2Plot 条形图颜色渐变设置教程

您可以使用 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 barPlot = new Bar('container', {
  data,
  xField: 'year',
  yField: 'sales',
  color: {
    field: 'sales',
    type: 'linear',
    min: 0,
    max: 150,
    colors: ['#d9f7be', '#52c41a'],
  },
});

barPlot.render();

在上面的代码中，我们使用 'color' 属性来设置颜色渐变。我们指定 'field' 为 'sales'，这将导致条形的颜色根据 'sales' 字段的值进行渐变。我们还指定了 'type' 为 'linear'，这将创建一个线性渐变。我们还指定了渐变的最小和最大值，以及颜色数组。这将创建一个从浅绿色到深绿色的颜色渐变，其中浅绿色表示较低的销售额，深绿色表示较高的销售额。

您可以根据需要调整最小和最大值以及颜色数组，以创建自定义的颜色渐变。