饼图在多个spider label的场景下,即便设置了overlapDodgeY,label一样会碰撞 #6480
Amaz-Ning posted onGitHub
问题描述
饼图在多个spider label的场景下,即便设置了overlapDodgeY,label一样会碰撞
重现链接
No response
重现步骤
`const data = [ { item: '事例一', count: 40, percent: 0.01 }, { item: '事例二', count: 21, percent: 0.01 }, { item: '事例三', count: 17, percent: 0.01 }, { item: '事例四', count: 13, percent: 0.01 }, { item: '事例五', count: 9, percent: 0.96 }, ];
const chart = new Chart({ container: 'container', autoFit: true, });
chart.coordinate({ type: 'theta', outerRadius: 0.8, innerRadius: 0.5 });
chart
.interval()
.data(data)
.transform({ type: 'stackY' })
.encode('y', 'percent')
.encode('color', 'item')
.legend('color', { position: 'bottom', layout: { justifyContent: 'center' } })
.label({
transform: [
{
type: 'overlapDodgeY',
},
],
position: 'spider',
text: (data) => 111111111111111
,
})
.label({
transform: [
{
type: 'overlapDodgeY',
},
],
style: {
dy: 10,
fill: 'red'
},
position: 'spider',
text: (data) => 222222222222222
,
})
chart.render();`
官网示例,添加多个label
预期行为
预期不碰撞,实际碰撞
平台
- 操作系统: [macOS, Windows, Linux, React Native ...]
- 网页浏览器: [Google Chrome, Safari, Firefox]
屏幕截图或视频(可选)
补充说明(可选)
No response