【v5】极坐标 gridline 线，在中心多余 #5430

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

const data = [
  { item: 'Design', type: 'a', score: 70 },
  { item: 'Design', type: 'b', score: 30 },
  { item: 'Development', type: 'a', score: 60 },
  { item: 'Development', type: 'b', score: 70 },
  { item: 'Marketing', type: 'a', score: 50 },
  { item: 'Marketing', type: 'b', score: 60 },
  { item: 'Users', type: 'a', score: 40 },
  { item: 'Users', type: 'b', score: 50 },
  { item: 'User2s', type: 'a', score: 40 },
  { item: 'User2s', type: 'b', score: 50 },
];

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

chart.coordinate({ type: 'polar' });

chart
  .data(data)
  .scale('x', { padding: 0.5, align: 0 })
  .scale('y', { tickCount: 5 })
  .axis('x', { grid: true, gridLineWidth: 4 })

chart
  .area()
  .encode('x', 'item')
  .encode('y', 'score')
  .encode('color', 'type')
  .encode('shape', 'smooth')
  .style('fillOpacity', 0.01)
  .scale('y', { domainMax: 80 });

chart
  .line()
  .encode('x', 'item')
  .encode('y', 'score')
  .encode('color', 'type');

chart.render();