【vue + echarts】图表自适应缩放(跟随浏览器的窗口缩放,项目侧边栏折叠后的窗口缩放),图表重绘

效果图:

先清楚两个东西,浏览器窗口的缩放和项目侧边栏折叠后窗口的缩放,这两个是不一样的
第一种,浏览器窗口缩放后,当前窗口会放大了或者缩小了,这时会走浏览器缩放的代码部分,前几期有出过文章说明,参考:浏览器窗口缩放图表跟随缩放
第二种,而项目侧边栏折叠后窗口的缩放,虽然项目里面的窗口缩放了,但是,浏览器的窗口并没有发生变化,所有这时不会走浏览器缩放的代码部分,
详细说一下第二种情况:

当侧边栏折叠后,

可以发现,这两个图的大小都是左边侧边栏加右边的内容部分,总体的大小没有发生变化,所以它不会走浏览器的缩放方法

但是他们两个之间相对发生了缩放,
解决方法:

第一种情况:

浏览器窗口缩放,这种很好解决,
第一种方法:

window.addEventListener('resize', () => {
   
	this.myChart.resize()
})

第二种方法:

window.onresize = () => {
   
	this.myChart.resize()
}

一般都是用第一种 addEventListener 去监听缩放

第二种情况:

重点就是第二种情况,浏览器没有缩放,侧边栏和内容相对缩放
这种情况我也看到了很多解决方法,但都有利有弊吧
第一种方法:
一个插件,但是我用了感觉哈,如果你是一个图表,马马虎虎可以用,如果有二三四五六个图表,那页面就卡成ppt了,懂得都懂
插件名好像是element-resize-detector,自己去搜索改怎么用,我就不说了
第二种方法:
如果你是用vue+admin的后台管理模板的话,里面有写好的方法,可以自己抠出来用,有点难,牵扯的东西太多了
第三种方法:
目前我所用的方法,单个图表或者多个图表都可用
首先侧边栏折叠的代码
这个官网都有案例的,直接拿过来修改一下就好了,

    // 折叠/展开侧边栏
    collapseClk()