作者:爱飞扬无限_316 | 来源:互联网 | 2023-06-08 08:10
解决页面echarts 图表 resize问题
左侧的菜单栏模块是可以收缩的,点击左上角的 icon 可以收缩,但是点击左上角的icon后,右侧的echarts图并未进行对应的收缩,使用 element-resize-detector 插件能够解决问题(如何解决Vue项目中使用echarts,宽度变化导致图不能resize问题)但是会有点卡顿,所以采用原生的方法来处理,再结合windows 自带的原生 resize 事件处理 浏览器宽度高度变化,可以不使用插件来处理问题了。
核心代码
// 使用浏览器原生的MutationObserver来处理
const observer = new MutationObserver(() => {
setTimeout(this.myChart.resize, 201);
});
const cOnfig= { attributes: true, childList: true, subtree: false };
this.observe = observer;
observer.observe(document.getElementsByClassName("spoc-menu")[0], config);
// 处理浏览器窗口大小变化触发resize
window.addEventListener("resize", this.resizeEchart, true);
关于MutationObserver的使用 参考
最后注意需要beforeDestroy 里面销毁掉 监听的时间和 MutationObserver 监听的事件,避免事件一直在页面里面,消耗内存。
最后开发完后,对比了下和之前使用的插件,原生js处理的体验比插件反应快,插件给人的感觉盾一点