AntV G2Plot 条形图颜色渐变设置教程

在 G2Plot 中，可以通过设置颜色映射函数来实现条形图颜色渐变的效果。具体步骤如下：

1. 导入颜色映射函数

import { getTheme } from '@antv/g2';
import { getInterpolateTheme } from '@antv/g2/lib/theme/interpolate';

2. 创建颜色映射函数

const theme = getTheme('default');
const colorMap = getInterpolateTheme(theme);
const color = (value) => {
  const color = colorMap(value).join(',');
  return `rgb(${color})`;
}

3. 在图表中使用颜色映射函数

const data = [
  { name: 'A', value: 10 },
  { name: 'B', value: 20 },
  { name: 'C', value: 30 },
  { name: 'D', value: 40 },
];

const chart = new Bar('container', {
  data,
  xField: 'value',
  yField: 'name',
  color: ({ value }) => color(value),
});

chart.render();

在上述代码中，我们使用了 getInterpolateTheme 函数来创建颜色映射函数，并在 color 函数中调用该映射函数来获取对应数值的颜色值。最后将 color 函数作为 color 配置项的值传入条形图中即可实现颜色渐变的效果。