关于vue 结合原生js 解决echarts resize问题

解决页面echarts 图表 resize问题

左侧的菜单栏模块是可以收缩的，点击左上角的 icon 可以收缩，但是点击左上角的icon后，右侧的echarts图并未进行对应的收缩，使用 element-resize-detector 插件能够解决问题（如何解决Vue项目中使用echarts，宽度变化导致图不能resize问题）但是会有点卡顿，所以采用原生的方法来处理，再结合windows 自带的原生 resize 事件处理 浏览器宽度高度变化，可以不使用插件来处理问题了。

#leftEchartPie {
 width: 100%;
 height: calc(100% - 60px);
}

核心代码

 // 使用浏览器原生的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处理的体验比插件反应快，插件给人的感觉盾一点

ok 这就是关于 vue 结合原生js 解决echarts resize问题 的开发心得啦 ~希望能给大家一个参考，也希望大家多多支持考高分网。