interval 和 line 有颜色编码的时候渲染失败 #5076

• 版本：5.0.8
• 问题：和比例同步有关，但不一定是一个 bug，需要深入排查一下。

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

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

chart.data({
  type: 'fetch',
  value: 'https://assets.antv.antgroup.com/g2/movies.json',
});

chart
  .interval()
  .transform({ type: 'groupX', y: 'sum' })
  .axis('y', { labelFormatter: '~s' })
  .axis('x', { labelTransform: 'rotate(90)' })
  .encode('x', 'Major Genre')
  .encode('y', 'Worldwide Gross')
  .encode('color', () => 'Worldwide Gross')
  .tooltip({ channel: 'y', valueFormatter: '~s' });


chart
  .line()
  .transform({ type: 'groupX', y: 'sum' })
  .encode('x', 'Major Genre')
  .encode('y', 'US Gross')
  .encode('color', () => 'US Gross')
  .scale('series', { independent: true }) // 不加这一行无法正常渲染。
  .tooltip({ channel: 'y', valueFormatter: '~s' });

chart.render();