antv g2plot中的条形图 图形颜色渐变填充

在 antv g2plot 中，可以使用 color 属性来指定条形图的颜色，同时也支持颜色渐变填充。

以水平条形图为例，可以使用以下代码实现颜色渐变填充：

import { Plot } 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 plot = new Plot({
  container: 'container',
  width: 400,
  height: 300,
  padding: 'auto',
  data,
  xField: 'sales',
  yField: 'year',
  type: 'bar',
  color: {
    field: 'sales',
    type: 'linear',
    min: 0,
    max: 200,
    range: ['#BAE7FF', '#1890FF'],
  },
});

plot.render();

其中，color 属性的 field 值需要指定一个数值型的字段，这里使用 sales 字段。type 属性指定渐变类型为线性渐变，min 和 max 属性指定渐变的最小值和最大值，range 属性指定渐变的颜色范围。在上述代码中，使用了蓝色到深蓝色的渐变填充。如果需要使用其他颜色渐变，可以自行调整 range 属性的值。

对于垂直条形图，使用颜色渐变填充的方式与水平条形图类似，只需要将 xField 和 yField 属性互换即可。