数据可视化数据大屏一般都会要求是宽高自适应的,页面会根据窗口的宽高进行调整,但是实际开发中会遇到窗口大小变化了,但是图表的大小并没有和实际的div宽度一致。
解决办法
我们使用ResizeObserver来监听窗口的宽高变化,立即执行resize不能获取到实际宽高,我们延迟300毫秒后执行.
const viewElem = document.body;
const resizeObserver = new ResizeObserver(() => {
if (myChart) {
setTimeout(() => {
myChart.resize();
}, 300)
}
});
resizeObserver.observe(viewElem);