G2Plot 条形图颜色渐变设置教程 - 实现数据可视化 - 常规

在 G2Plot 中，可以通过设置颜色映射函数来实现条形图颜色的渐变效果。以下是一个示例：

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',
  autoFit: true,
  padding: [20, 60, 40, 60],
  data: data,
  xField: 'sales',
  yField: 'year',
  color: (value) => {
    if (value < 50) {
      return '#1890ff';
    } else if (value < 100) {
      return '#2fc25b';
    } else if (value < 150) {
      return '#facc14';
    } else {
      return '#f04864';
    }
  },
  xAxis: {
    min: 0,
  },
  yAxis: {
    type: 'cat',
  },
  label: {
    position: 'right',
    offset: 4,
  },
  barSize: 16,
});

plot.render();

在上面的代码中，我们通过 color 属性设置了颜色映射函数，根据不同的 value 值返回不同的颜色值，从而实现了条形图颜色的渐变效果。在这个例子中，我们将小于 50 的数据设为蓝色，小于 100 的数据设为绿色，小于 150 的数据设为黄色，其余的数据设为红色。

除了使用函数设置颜色映射外，G2Plot 还支持使用数组和字符串设置颜色映射，具体可以参考官方文档。