5纬雷达图显示问题

[yuedud]

问题描述

代码 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: 'Test', type: 'a', score: 60 },
{ item: 'Test', type: 'b', score: 70 },
];

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

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

chart
.data(data)
.scale('x', { padding: 0.5, align: 0 })
.scale('y', { tickCount: 5 })
.axis('x', { grid: true })
.axis('y', { zIndex: 1, title: false });

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

chart
.line()
.encode('x', 'item')
.encode('y', 'score')
.encode('color', 'type')
.encode('shape', 'smooth')
.style('lineWidth', 2);

chart.interaction('tooltip', { crosshairsLineDash: [4, 4] });

chart.render();

重现链接

https://g2.antv.antgroup.com/examples/general/radar/#grid-radial

重现步骤

进入官网，复制粘贴
5纬度的雷达图有多余的线

预期行为

没有多余的线

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response