这篇文章主要介绍了关于vue 结合原生js 解决echarts resize问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决页面echarts 图表 resize问题
左侧的菜单栏模块是可以收缩的，点击左上角的 icon 可以收缩，但是点击左上角的icon后，右侧的echarts图并未进行对应的收缩，使用 element-resize-detector 插件能够解决问题（如何解决Vue项目中使用echarts，宽度变化导致图不能resize问题）但是会有点卡顿，所以采用原生的方法来处理，再结合windows 自带的原生 resize 事件处理 浏览器宽度高度变化，可以不使用插件来处理问题了。
<div id="leftEchartPie"></div> #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); //<a style="color:transparent">本文来源gao($daima.com搞@代@#码(网5</a> 处理浏览器窗口大小变化触发resize window.addEventListener("resize", this.resizeEchart, true);
关于MutationObserver的使用 参考
最后注意需要beforeDestroy 里面销毁掉 监听的时间和 MutationObserver 监听的事件，避免事件一直在页面里面，消耗内存。
最后开发完后，对比了下和之前使用的插件，原生js处理的体验比插件反应快，插件给人的感觉盾一点
以上就是关于vue 结合原生js 解决echarts resize问题的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：关于vue 结合原生js 解决echarts resize问题
转载请注明原文链接：关于vue 结合原生js 解决echarts resize问题
