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' 属性互换即可。