[折线图]如何能实现在设置color通道之后还能对每根折线设置渐变(相同渐变规则也可以)？

[ChristmasFox]

设置color通道后会分出多条折线，我仍然想让每条折线按照某种规则使其颜色发生渐变，目前使用gradient会发生乱连情况.
例如在5.0.12官网示例"聚合折线图"中，实现每条折线都如同示例"颜色编码折线图"一样的渐变。
聚合折线图

最终效果如下图

[pearmini]

如果颜色渐变不是数据驱动的，可以如下：

import { Chart } from '@antv/g2';

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

chart
  .line()
  .data({
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/cb99c4ab-e0a3-4c76-9586-fe7fa2ff1a8c.csv',
  })
  .encode('x', (d) => new Date(d.date))
  .encode('y', 'price')
  .encode('series', 'symbol') // 拆分成多条线
  .encode('size', 'price')
  .legend('size', false)
  .style("shape", 'smooth')
  .style('strokeWidth', 10)
  .style('stroke', 'linear-gradient(-90deg, white 0%, darkgreen 100%)'); // 设置渐变

chart.render();

[ChristmasFox]

是数据驱动的 目前单根是用color通道设置gradient驱动🍖

[pearmini]

目前的思路是通过 series 通道拆分折线，然后通过 color 指定颜色，如下：

import { Chart } from '@antv/g2';

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

chart
  .line()
  .data({
    type: 'fetch',
    value:
      'https://gw.alipayobjects.com/os/bmw-prod/cb99c4ab-e0a3-4c76-9586-fe7fa2ff1a8c.csv',
  })
  .encode('x', (d) => new Date(d.date))
  .encode('y', 'price')
  .encode('series', 'symbol')
  .encode('color', 'price')
  .legend('size', false)
  .style('gradient', 'y')

chart.render();

不过目前还有点问题，我需要排查一下。

[ChristmasFox]

好的 感谢大佬回复

[pearmini]

看看这个 PR 有没有解决问题：#5225

export function stocksLineSeriesGradient(): G2Spec {
  return {
    type: 'line',
    data: {
      type: 'fetch',
      value: 'data/stocks.csv',
    },
    encode: {
      x: (d) => new Date(d.date),
      y: 'price',
      series: 'symbol',
      color: 'price',
    },
    legend: { size: false },
    style: {
      gradient: 'y',
      strokeWidth: 10,
      shape: 'smooth',
    },
  };
}