如何避免ECharts饼图的图例与扇区标签重叠？

我在用ECharts制作小型仪表盘样式的饼图时，遇到了图例（CityB）和扇区标签（CityC）重叠的问题。当前的配置代码如下：

option = {
  title: {
    text: 'Weather Statistics',
    subtext: 'Fake Data',
    left: 'center'
  }
}

我的需求是：

1. 让图表自适应空间，不溢出到图例区域，但grid配置对饼图无效；
2. 希望在标签重叠或达到响应式断点时自动禁用扇区标签；
   目前只想到设置百分比半径，但无法预知容器尺寸，想问还有其他解决方案吗？

可行解决方案 #

• 调整图例位置与布局
  给图例设置精准的位置参数，避开饼图标签的显示区域。比如把图例放在饼图右侧并采用垂直布局，减少横向空间占用：

  legend: {
    right: 10,
    orient: 'vertical',
    itemGap: 10 // 调整图例项间距，避免过于拥挤
  }
  

  如果图例项较多，还可以开启分页功能，通过legend.pageButtonPosition控制分页按钮位置，防止图例占用过多空间。

• 优化扇区标签的显示逻辑
  利用ECharts自带的标签配置，解决重叠或响应式隐藏问题：

  1. 开启自动避让：在series.label中设置avoidLabelOverlap: true，让ECharts自动调整标签位置，避免重叠；
  2. 按占比隐藏小标签：通过格式化函数判断，占比低于阈值的扇区不显示标签：

     label: {
       show: true,
       formatter: (params) => {
         return params.percent > 5 ? `${params.name}: ${params.percent}%` : '';
       }
     }
     

  3. 响应式隐藏标签：监听容器尺寸变化，达到断点时动态切换标签显示状态：

     const chart = echarts.init(document.getElementById('your-chart-id'));
     window.addEventListener('resize', () => {
       const container = chart.getDom();
       const opt = chart.getOption();
       // 当容器宽度小于300px时隐藏标签
       opt.series[0].label.show = container.offsetWidth >= 300;
       chart.setOption(opt);
     });
     

• 动态计算饼图半径
  虽然无法预知容器尺寸，但可以通过DOM获取容器实际大小，动态计算饼图半径，给图例留出足够空间：

  const chart = echarts.init(document.getElementById('your-chart-id'));
  const updateRadius = () => {
    const dom = chart.getDom();
    const containerWidth = dom.offsetWidth;
    // 预估图例宽度，或通过DOM获取实际宽度
    const legendReservedWidth = 120;
    // 计算饼图最大可用半径（百分比形式）
    const maxRadius = ((containerWidth - legendReservedWidth) / 2 / containerWidth) * 100;
    const opt = chart.getOption();
    opt.series[0].radius = ['40%', `${maxRadius}%`];
    chart.setOption(opt);
  };
  // 初始化时计算
  updateRadius();
  // 窗口 resize 时重新计算
  window.addEventListener('resize', updateRadius);
  

• 优化视觉引导线
  开启并调整标签引导线，让标签指向扇区的同时避开图例区域：

  labelLine: {
    show: true,
    length: 15, // 第一段引导线长度
    length2: 8, // 第二段引导线长度
    smooth: true // 引导线平滑弯曲，减少空间占用
  }
  

内容的提问来源于stack exchange，提问作者ss ulrey