AntV G2Plot 条形图颜色渐变填充教程

在 AntV G2Plot 中，可以使用 'interval:gradient' 来实现条形图颜色渐变填充。

具体步骤如下：

引入需要的包和样式：

import { Chart } from '@antv/g2';
import '@antv/g2plot/dist/style.css';

创建图表对象：

const chart = new Chart({
  container: 'container',
  autoFit: true,
  height: 500,
});

准备数据：

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

设置图表数据和属性：

chart.data(data);
chart.scale({
  sales: {
    nice: true,
  },
});
chart.axis('year', {
  tickLine: null,
});
chart.axis('sales', false);
chart.tooltip({
  showMarkers: false,
});
chart.interval().position('year*sales').color('sales', '#bae7ff-#1890ff-#0050b3');

其中 'color' 方法的第二个参数可以设置颜色渐变的范围，使用 '-' 连接多个颜色值即可。

最终效果如下：

gradient-bar-chart