echarts 饼图文本显示不全

### 关于 ECharts 饼图文本显示不全的解决方案 在处理 ECharts 饼图时，如果遇到文本显示不全的情况，通常可以通过调整 `avoidLabelOverlap` 属性以及优化标签的位置来解决问题。以下是具体的解决方法： #### 调整 `avoidLabelOverlap` ECharts 的饼图系列配置项中有一个属性叫做 `avoidLabelOverlap`，该属性用于控制是否启用防止标签重叠的功能，默认值为 `true`[^1]。当这个功能被禁用时（即设置为 `false`），可能会导致部分标签由于位置冲突而无法正常显示。 因此，在确保其他参数合理的情况下，可以尝试开启此选项或者微调其行为以改善视觉效果： ```javascript series: [{ type: 'pie', radius: ['50%', '70%'], // 设置内外半径比例 avoidLabelOverlap: true, labelLine: { normal: { length: 30, // 连接线长度 length2: 40 // 延伸线长度 } }, data: [...your_data...] }] ``` #### 自定义 Label 样式 除了利用内置机制外，还可以通过自定义样式来自由设定每一块扇区对应的文字展示方式。比如改变字体大小、颜色甚至旋转角度等都可以有效缓解拥挤状况带来的遮挡现象。 ```javascript label: { normal: { formatter: '{b|{b}}\n{d|{d}%}', // 使用富文本格式化器增强可读性 rich: { // 定义不同区域内的风格差异 b: { fontSize: 14, fontWeight: 'bold' }, d: { padding: [0, 0, 0, 8], align: 'left' } }, position: 'outside' // 把标注移到外部减少干扰 } } ``` 另外需要注意的是，有时候即使设置了上述所有措施仍然存在某些极端情况下仍会有少量溢出情况发生，则建议适当缩小图表尺寸或将多余信息转移到提示框(`tooltip`)当中去呈现给用户查看[^2][^3]。 最后附上完整的示例代码供参考： ```javascript let option = ({ title : { text: '某站点用户访问来源', subtext: '', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b}: {c} ({d}%)" }, legend: { orient: 'vertical', left: 'right', data: [] }, series : [ { name:'访问来源', type:'pie', radius : ['50%', '70%'], avoidLabelOverlap:true, label:{ normal:{ show:false, position:"inside", formatter:function(params){ return params.name+'\n'+params.value+'('+params.percent.toFixed(1)+'%)'; } }, emphasis:{show:true} }, labelLine:{ normal:{ lineStyle:{width:1}, smooth:.2, length:10, length2:20 } }, data:[] } ] }); ```