微前端-无界预加载导致Echarts图表高度为零的解决方案无界微前端开启预加载的时候，子应用会导致Echarts无法正常

无界微前端框架

当无界微前端子应用开启预加载的时候会导致Echarts获取不到DOM宽高，如下警告。

无法获取DOM的宽度或高度。请检查dom.clientWidth和dom.clientHeight。它们不应为0。例如，您可能需要在window.onload的回调函数中调用此方法.

[ECharts] Can't get DOM width or Height. Please check dom.clientWidth and dom.clientHeight. They should not be 0.For example, you may need to call this in the callback of window.onload.

解决思路：

当我们打印该元素的时候，会发现该元素宽高都是零，当子应用被正确被挂载的时候，此时元素宽高恢复正常。

所以当宽高变换的时候重新渲染Ecahrts即可，使用ResizeObserver即可解决这个问题。参考使用window.addEventListener("resize",this.resizeChart)的使用方法。

什么是 ResizeObserver？

ResizeObserver 是 现代浏览器提供的 API，用于 监听 DOM 元素尺寸（宽高）变化。

不依赖窗口尺寸变化
可以监听元素本身或其内容变化导致的尺寸改变
非常适合响应式布局、图表自适应、微前端场景

基本用法

// 创建观察器
const observer = new ResizeObserver(entries => {
  for (let entry of entries) {
    console.log("宽度:", entry.contentRect.width);
    console.log("高度:", entry.contentRect.height);
    if(entry.contentRect.width > 0 && entry.contentRect.height > 0){
        //echarts的重新渲染函数
        //和window.addEventListener("resize",this.resizeChart)一个意思
        this.resizeChart()
    }
  }
});

// 获取要监听的元素
const container = document.getElementById("chart-container");

// 开始监听
observer.observe(container);

// 停止监听
observer.disconnect();

🔹 参数解释

entries：一个数组，每个元素是 ResizeObserverEntry
entry.target：被监听的 DOM 元素
entry.contentRect：元素内容区域尺寸（不含 border）

典型应用场景

ECharts 自适应
- 图表容器初始隐藏或尺寸为 0 → 等尺寸变化后再初始化或调用 chart.resize()
动态布局
- 父容器大小变化 → 子元素自动响应
微前端框架
- 子应用挂载到真实 DOM 后，动态初始化组件
隐藏/显示切换
- tab 页面切换显示图表 → 自动 resize

欢迎大家交流更好的解决方案，对应的issused地址github.com/Tencent/wuj…