G2Plot 条形图填充颜色渐变 - 视觉效果提升指南

G2Plot可以通过使用渐变色填充实现条形图的填充效果。以下是一个示例代码：

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

const data = [
  { year: '2011', value: 45 },
  { year: '2012', value: 47 },
  { year: '2013', value: 53 },
  { year: '2014', value: 55 },
  { year: '2015', value: 60 },
  { year: '2016', value: 62 },
  { year: '2017', value: 68 },
  { year: '2018', value: 70 },
  { year: '2019', value: 75 },
  { year: '2020', value: 80 },
];

const barPlot = new Bar('container', {
  data,
  xField: 'year',
  yField: 'value',
  color: {
    field: 'value',
    type: 'linear',
    min: 45,
    max: 80,
    range: [0, 1],
    colors: ['#FFC7CE', '#FF6B6B'],
  },
});

barPlot.render();

在上面的代码中，我们使用了color配置项来设置渐变色的属性。color配置项中的field属性指定了用于映射颜色的字段，这里我们使用value字段。type属性指定了使用线性渐变色。min和max属性指定了颜色范围的最小值和最大值，这里我们使用了数据集中的最小值和最大值。range属性指定了颜色映射范围的起始点和结束点，这里我们使用了[0, 1]。colors属性指定了渐变色的起始颜色和结束颜色。这里我们使用了粉红色和红色。