echarts 图表监听窗口变化和实际大小不一致

echarts yekong

数据可视化数据大屏一般都会要求是宽高自适应的,页面会根据窗口的宽高进行调整,但是实际开发中会遇到窗口大小变化了,但是图表的大小并没有和实际的div宽度一致。

解决办法
我们使用ResizeObserver来监听窗口的宽高变化,立即执行resize不能获取到实际宽高,我们延迟300毫秒后执行.

const viewElem = document.body;
    const resizeObserver = new ResizeObserver(() => {
    if (myChart) {
      setTimeout(() => {
        myChart.resize();
      }, 300)
    }
});
resizeObserver.observe(viewElem);
喜欢