AntV G2Plot 条形图渐变填充教程

在 AntV G2Plot 中，可以使用 'interval' 几何标记来创建条形图，并通过 'style' 属性设置 'fill' 属性为渐变色，从而实现渐变填充的效果。

以下是一个示例代码：

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

// 数据
const data = [
  { year: '2010', sales: 100 },
  { year: '2011', sales: 200 },
  { year: '2012', sales: 300 },
  { year: '2013', sales: 400 },
  { year: '2014', sales: 500 },
];

// 渐变色
const gradient = {
  type: 'linear',
  x1: 0,
  y1: 0,
  x2: 0,
  y2: 1,
  colorStops: [
    { offset: 0, color: '#008dff' },
    { offset: 1, color: '#00bfff' },
  ],
};

// 创建图表
const chart = new Chart({
  container: 'container',
  autoFit: true,
  height: 400,
});

// 设置数据
chart.data(data);

// 绘制柱状图
chart.interval().position('year*sales').style({
  fill: gradient,
});

// 渲染图表
chart.render();

在上面的示例中，使用 'linear' 渐变类型，从上到下渐变，起始颜色为 '#008dff'，结束颜色为 '#00bfff'。并通过 'style' 方法设置 'fill' 属性为渐变色。