获取ECharts（SVGRenderer）图例项包围盒以避免图例与网格重叠

方案1：直接获取整体图例的包围盒高度 #

这是最省心的方式，直接拿到整个图例组件的DOM，用原生API取高度：

// 先拿到图例组件实例
const legend = myChart.getComponent('legend');
if (legend) {
  // 获取图例对应的SVG元素
  const legendDom = legend.getDom();
  // 用getBoundingClientRect拿到包围盒信息
  const rect = legendDom.getBoundingClientRect();
  const legendTotalHeight = rect.height;
  
  // 用这个高度调整grid的位置，避免重叠，这里加20是留个间距
  myChart.setOption({
    grid: {
      top: legendTotalHeight + 20
    }
  });
}

方案2：逐个计算图例项高度（适合自定义/多行图例） #

如果图例是多行布局或者有自定义样式，单个项的高度累加更准确：

const legend = myChart.getComponent('legend');
if (legend) {
  const legendDom = legend.getDom();
  // 选中所有图例项元素
  const itemNodes = legendDom.querySelectorAll('.echarts-legend-item');
  let totalHeight = 0;
  
  itemNodes.forEach(item => {
    // 累加每个项的高度
    totalHeight += item.getBoundingClientRect().height;
    // 别忘了加上项之间的margin，不然会少算间距
    const itemStyle = window.getComputedStyle(item);
    totalHeight += parseInt(itemStyle.marginBottom) || 0;
  });
  
  // 根据总高度调整grid的bottom值
  myChart.setOption({
    grid: {
      bottom: totalHeight + 30
    }
  });
}

关键注意点 #

• 一定要等ECharts渲染完再执行，不然拿不到正确的DOM和尺寸：

  // 可以在setOption的回调里执行，或者监听finished事件
  myChart.setOption(yourChartOption, true);
  myChart.on('finished', () => {
    // 这里放获取包围盒的代码
  });
  

• 如果图例是动态变化的（比如切换系列显示隐藏），要在legendselectchanged事件里重新计算并更新grid参数
• SVGRenderer和CanvasRenderer的图例DOM类名是一致的，上面的代码两种渲染器都能用

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