ECharts饼图自定义标签与emphasis标签重叠，avoidLabelOverlap无效如何解决

问题原因 #

1. 你当前配置中avoidLabelOverlap被手动设置为false，关闭了标签防重叠能力
2. 所有扇区的普通label都固定设置position: 'center'，所有标签默认都堆叠在饼图中心区域，avoidLabelOverlap仅对标签位置为outer/inner等非固定中心的场景生效，中心固定位置下该配置不会生效，自然会出现hover时高亮标签和其他普通标签重叠的问题
3. 当前label的formatter返回固定内容TEST，就算不重叠展示内容也无区分度，也会加重视觉重叠的感受

解决方案 #

方案1：默认隐藏中心普通标签，仅hover时展示高亮标签（最适配需求）

仅需要修改普通label的show属性为false，平时中心无内容，hover时仅显示当前选中扇区的高亮标签，完全不会出现重叠问题：

label: {
  show: false, // 仅修改这一行即可
  position: 'center',
  formatter:  function (params) {
        return 'TEST';
      }
},
emphasis: {
  label: {
    show: true,
    fontSize: '40',
    fontWeight: 'bold'
  }
},

方案2：保留中心常驻标签，仅显示当前激活扇区的内容

如果需要饼图中心默认展示内容，可以配合ECharts的高亮事件实现：

1. 初始化图表后默认选中第一个扇区高亮
2. 监听鼠标hover事件，切换激活的扇区，同时仅让激活扇区的标签显示
   示例代码：

// 初始化图表渲染
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
// 默认高亮第一个扇区
myChart.dispatchAction({
  type: 'highlight',
  seriesIndex: 0,
  dataIndex: 0
});
// 监听hover事件切换高亮
myChart.on('mouseover', function (params) {
  myChart.dispatchAction({
    type: 'downplay',
    seriesIndex: 0
  });
  myChart.dispatchAction({
    type: 'highlight',
    seriesIndex: 0,
    dataIndex: params.dataIndex
  });
});

方案3：修改标签展示位置，开启防重叠配置

如果不需要标签固定在中心，可以将标签改为扇区内/外围展示，同时开启avoidLabelOverlap即可自动避免重叠：

series: [
  {
    avoidLabelOverlap: true, // 开启防重叠
    label: {
      show: true,
      position: 'inner', // 可选inner（扇区内）/outer（外围）
      formatter:  function (params) {
            return `${params.name}\n${params.value}`; // 可自定义展示内容
          }
    },
    // 其余配置保持不变
  }
]

内容的提问来源于stack exchange，提问作者蔡驛洋