antv/g2 水波纹渐变色

要将 antv/g2 水波纹背景设置为渐变色，可以使用 G2 的自定义渲染功能来实现。以下是一个简单的例子：

首先，需要引入必要的依赖：

import { Chart } from '@antv/g2';
import { Gradient } from '@antv/g2/lib/util/color';

然后，创建一个 Chart 实例并定义数据源：

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

const data = [
  { value: 0.2 },
  { value: 0.4 },
  { value: 0.6 },
  { value: 0.8 },
  { value: 1 },
];

接下来，定义一个自定义渲染函数并将其传递给 G2 的 background 方法：

chart.background((chart) => {
  const canvas = chart.get('canvas');
  const context = canvas.get('context');

  // 创建渐变色对象
  const gradient = new Gradient(context, {
    colors: ['#0085FF', '#00FFA8'],
    gradient: 'linear',
    direction: [0, 0, 0, 1],
  });

  // 绘制水波纹背景
  const width = canvas.get('width');
  const height = canvas.get('height');
  const cx = width / 2;
  const cy = height / 2;
  const radius = Math.min(width, height) / 2;
  const lineWidth = 2;
  const amplitude = 10;
  const waveLength = 300;
  const phase = 0.5;
  const frequency = 2 * Math.PI / waveLength;
  const yOffset = cy + radius * (1 - 2 * data[0].value);

  for (let i = 0; i < 4; i++) {
    const alpha = (1 - i / 4) * 0.5;
    context.beginPath();
    context.strokeStyle = gradient.at(i / 4);
    context.globalAlpha = alpha;
    context.lineWidth = lineWidth;
    for (let x = 0; x < width; x += 20) {
      const y = amplitude * Math.sin(frequency * x + phase * i) + yOffset;
      if (x === 0) {
        context.moveTo(x, y);
      } else {
        context.lineTo(x, y);
      }
    }
    context.stroke();
  }
});

在这个渲染函数中，我们首先创建了一个渐变色对象，然后使用它来设置水波纹的颜色。接下来，我们根据数据源中的值来计算水波纹的振幅和相位，并使用 canvas API 绘制水波纹背景。

最后，调用 chart.render() 方法来渲染图表：

chart.render();

这样就可以将 antv/g2 水波纹背景设置为渐变色了。