Echarts 图表根据父DIV的宽度自适应
程序员文章站
2022-04-28 14:08:27
...
最近在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)
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。
总之,以上只是提供思路,具体情况需要根据自己的实际情况去调试验证后解决自己的问题。