在前端页面中,由于div元素没有相应onresize事件,当ECharts图形在容器div发生变化时,没有像浏览器窗口发生变化的时候能够自适应调整大小。
在窗口变化时,有效
// 正常
window.onresize = () => chart.resize();
在div容器变化时,无效
// 无效
document.querySelector('#chart').onresize = () => chart.resize();
其他JQuery的解决方案都太麻烦了,最简单的就是使用ResizeObserver API监听div容器的变化
(new ResizeObserver(() => chart.resize())).observe(document.querySelector('#chart'));
记得注意下浏览器兼容性