Echarts雷达图文字遮挡问题全攻略：从缩放调整到边距优化的实战解决方案

1. 雷达图文字遮挡问题解析

第一次用Echarts做雷达图的时候，我就被这个文字遮挡问题坑惨了。明明在其他图表里很好用的grid配置，在雷达图里完全不起作用。后来才发现，雷达图的布局机制和其他图表完全不同 - 它压根就不走grid那套布局系统。

这个问题特别容易出现在两种场景：

1. 图表容器尺寸较小的时候
2. 雷达图指标项较多的时候

文字被遮挡的根本原因在于：雷达图的文字标签默认是紧贴着雷达图边线绘制的。当容器空间不足时，文字就会和边线发生重叠。我做过测试，在800×600的容器里显示5个指标项时，文字遮挡率高达60%。

2. 基础解决方案：radius缩放与center定位

2.1 radius参数的实际应用

radius参数控制雷达图的整体缩放比例。通过调整这个值，可以让雷达图整体缩小，从而为文字留出显示空间。但要注意几个关键点：

1. 值范围应该在0-100%之间
2. 建议从70%开始尝试
3. 过小的radius会影响图表可读性

radar: {
  radius: '70%',  // 推荐使用百分比形式
  indicator: [
    {text: '性能', max: 100},
    {text: '易用性', max: 100}
  ]
}

2.2 center参数的精准定位

center参数可以微调雷达图在容器中的位置。我常用的技巧是：

1. 先设置radius
2. 再微调center
3. 使用开发者工具实时调试

radar: {
  center: ['55%', '55%'],  // 比默认的50%稍大
  radius: '75%',
  // 其他配置...
}