欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-04-28 14:08:27
...

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


Echarts 图表根据父DIV的宽度自适应
            
    
    博客分类: JavaScript echartsvuediv自适应 

   

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

 

         最终在这里找到了能够解决的线索,最终尝试后解决问题。具体代码如下
      Echarts 图表根据父DIV的宽度自适应
            
    
    博客分类: JavaScript echartsvuediv自适应 

写道
// // 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。

 

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

  

  • Echarts 图表根据父DIV的宽度自适应
            
    
    博客分类: JavaScript echartsvuediv自适应 
  • 大小: 110.3 KB
  • Echarts 图表根据父DIV的宽度自适应
            
    
    博客分类: JavaScript echartsvuediv自适应 
  • 大小: 35.4 KB