如何在ECharts中获取已渲染元素的宽高？

嘿，我刚好遇到过类似的需求，确实ECharts官方文档里没有直接给出获取这类组件宽高的API，但有两个靠谱的方法能实现，我给你梳理下：

方法一：直接抓取组件对应的DOM元素 #

ECharts渲染完成后，每个组件（比如legend、visualMap）都会生成对应的DOM节点，你可以通过它们的类名定位到元素，再用原生JS的offsetWidth和offsetHeight拿到实际宽高。

不过要注意必须等组件完全渲染好再去拿，不然可能得到0或者null，所以最好把逻辑放在ECharts的finished事件里：

// 假设你的ECharts实例是myChart
myChart.on('finished', function() {
  // 定位legend组件的DOM
  const legendDom = document.querySelector('.ec-legend');
  if (legendDom) {
    const legendWidth = legendDom.offsetWidth;
    const legendHeight = legendDom.offsetHeight;
    console.log('Legend的宽高：', legendWidth, legendHeight);
  }

  // 定位visualMap组件的DOM
  const visualMapDom = document.querySelector('.ec-visual-map');
  if (visualMapDom) {
    const vmWidth = visualMapDom.offsetWidth;
    const vmHeight = visualMapDom.offsetHeight;
    console.log('VisualMap的宽高：', vmWidth, vmHeight);
  }
});

如果页面有多个ECharts实例，记得给你的图表容器加个专属类（比如my-target-chart），然后用document.querySelector('.my-target-chart .ec-legend')来精准定位，避免拿到其他图表的组件。

方法二：利用ECharts内部的布局信息 #

ECharts在渲染时会悄悄计算每个组件的布局数据，这些信息存在实例的内部属性里（虽然是内部属性，但目前多个版本都稳定可用）。你可以通过组件的标识找到对应的布局信息，直接拿到宽高：

myChart.on('finished', function() {
  // 获取legend组件的布局数据
  const legendComponent = myChart._componentsMap.legend;
  if (legendComponent) {
    const { width, height } = legendComponent.layoutInfo;
    console.log('Legend的宽高：', width, height);
  }

  // 获取visualMap组件的布局数据
  const visualMapComponent = myChart._componentsMap.visualMap;
  if (visualMapComponent) {
    const { width, height } = visualMapComponent.layoutInfo;
    console.log('VisualMap的宽高：', width, height);
  }
});

⚠️ 小提醒：这个方法依赖ECharts的内部属性，万一未来大版本更新改了内部结构可能会失效，所以如果追求长期稳定性，优先选第一种方法。

额外注意点 #

• 如果组件是动态显示/隐藏的（比如通过代码切换legend的显示状态），要在状态变化后重新执行获取逻辑，或者监听组件的变化事件。
• 尽量避免用setTimeout延迟获取，虽然简单但不可靠，finished事件才是最稳妥的时机。

备注：内容来源于stack exchange，提问作者erzen