Echarts 图表根据父DIV的宽度自适应

     最近在Vue项目中引入了Echarts,碰到了侧边栏折叠后Echart图标无法自适应的问题。查看了API，其中提到了下图中的方法resize。

   

       但是只绑定在窗口大小改变的事件上进行处理。可我的需求中窗口大小未改变，只是div标签的宽度自适应了，宽度改变了。在网上找了好多解决方案，基本都是使用API中的方式，个人猜想很多博客中的博主自己都没验证过。

 

         最终在这里找到了能够解决的线索，最终尝试后解决问题。具体代码如下
      

写道

// // TODO 下面代码待研究验证
let MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
let observer = new MutationObserver((mutations, observer) => {
mutations.forEach(record => {
if (record.type) {
this.chart.resize()
}
})
})
let options = {attributeFilter: ['style']}
var target = document.querySelector('div.wrap-fluid')
observer.observe(target, options)

 

     具体该代码重点要主要截图中的两个地方

     第1点 变化的属性，这里需要自己去调试，验证来控制这段逻辑。

     第2点 需要监控的dom，可在谷歌浏览器中的F12调试模式下看看，在这个折叠过程中有哪些dom的class获取style会明细的改变。然后从这些会改变的dom中选取一个，作为监控dom。

 

      总之，以上只是提供思路，具体情况需要根据自己的实际情况去调试验证后解决自己的问题。