直接复制了官网的案例改也是会重叠
import { Chart, Util } from '@antv/g2';
const data = [
{ type: '一线城市', value: 0.19 },
{ type: '二线城市', value: 0.21 },
{ type: '三线城市', value: 0.27 },
{ type: '四线及以下', value: 0.1 },
{ type: '五线及以下', value: 0.1 },
{ type: '六线及以下', value: 0.07 },
{ type: '七线及以下', value: 0.003 },
{ type: '八线及以下', value: 0.003 },
];
const chart = new Chart({
container: 'container',
autoFit: true,
height: 500,
renderer: 'svg'
});
chart.data(data);
chart.coordinate('theta', {
radius: 0.75
});
chart.tooltip({
showMarkers: false
});
const interval = chart
.interval()
.adjust('stack')
.position('value')
.color('type', ['#063d8a', '#1770d6', '#47abfc', '#38c060'])
.state({
active: {
style: (element) => {
const shape = element.shape;
return {
matrix: Util.zoom(shape, 1.1),
}
}
}
})
.label('type',{
style: {
opacity: 1,
fill: '#000',
fontSize: 12,
},
layout: [{type: 'pie-spider'},{ type: 'hide-overlap' }],
content: (obj) => {
return obj.type + '\n' + obj.value + '%';
},
});
chart.interaction('element-single-selected');
chart.render();
IssueHunt
