显示同一维度上占比关系，中心可展示汇总数据或关键指标
const config = {
data,
angleField: 'value',
colorField: 'type',
radius: 0.85,
innerRadius: 0.65, // 内径比例，形成环形（移动端建议0.55），增大内径给标签和中心文字更多空间
color: ['#5B8FF9', '#5AD8A6', '#F6BD16', '#945FB9'],
label: {
type: 'inner',
offset: '-50%', // 响应式offset，让标签位于环形中间位置，避免与中心文字重叠
content: ({ percent }) => {
const percentage = (percent * 100).toFixed(0);
return percentage + '%';
},
style: {
fill: '#fff',
fontSize: 11, // 移动端建议9px
fontWeight: 600,
textAlign: 'center',
textBaseline: 'middle',
},
autoRotate: false, // 禁用自动旋转，保持水平显示
},
legend: false,
interactions: [{ type: 'element-active' }],
pieStyle: { lineWidth: 2, stroke: '#fff' },
};
radius: 0.65, // 减小外半径，为外部标签留出空间
label: {
type: 'spider',
labelHeight: 20, // 减小标签高度，让标签更紧凑
content: '{name}\n{percentage}',
style: { fontSize: 11, fill: '#1D1D1F' },
},
statistic: {
title: {
content: 'Total',
style: { fontSize: 11, color: '#1D1D1F' },
},
content: {
content: '3846',
style: { fontSize: 16, fontWeight: 700 },
},
},
innerRadius: 0.85, // 更大的内径比例，形成细环 label: false,