如何获取Apache ECharts初始化后的自动barWidth值？

核心原因 #

当未手动设置barWidth时，ECharts会在渲染阶段动态计算该值，但这个计算结果不会被写入图表的option中，因此通过getOption()无法直接获取。

解决方案：通过ZRender获取渲染后的图形元素 #

ECharts基于ZRender渲染，所有可视化元素都会被存储在ZRender的实例中，我们可以通过遍历这些元素来提取自动计算的barWidth：

步骤 #

• 监听图表渲染完成事件：确保在图表完全渲染后再执行获取逻辑，避免元素未生成。
• 获取ZRender实例：通过图表实例的getZr()方法获取。
• 筛选柱状图元素：根据元素的__ecComponentInfo属性识别柱状图的矩形元素。
• 提取宽度值：从元素的shape属性中读取width，即为自动计算的barWidth。

代码示例 #

// 假设myChart是你的ECharts实例
myChart.on('finished', () => {
  const zr = myChart.getZr();
  const allElements = zr.storage.getDisplayList();
  
  // 筛选出所有柱状图的矩形元素
  const barElements = allElements.filter(element => {
    const compInfo = element.__ecComponentInfo;
    return compInfo 
      && compInfo.mainType === 'series' 
      && compInfo.subType === 'bar';
  });
  
  if (barElements.length > 0) {
    // 取第一个柱子的宽度作为自动计算的barWidth（若有多个系列可按需筛选）
    const autoBarWidth = barElements[0].shape.width;
    console.log('自动计算的barWidth:', autoBarWidth);
  }
});

注意事项 #

• 如果存在多个柱状图系列，可以通过compInfo.seriesIndex或compInfo.seriesName进一步筛选指定系列的柱子。
• 若图表存在动态更新（如数据变化、窗口 resize），需要在更新完成后重新执行上述逻辑获取最新的barWidth。

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