vue使用echarts图表自适应的几种解决方案

1.使用window.onresize

优点：可以根据窗口大小实现自适应

缺点：

多个图表自适应写法比较麻烦（当一个页面的图表太多时，这样写法不是很灵活）；

多个vue页面有onresize方法时，会被覆盖；

当vue页面路由跳转到下一个页面时，上一个页面的onresize方法会继续执行，（这个时候下一个页面已经不需要onresize方法执行了，当图表过多时会造成页面卡顿）

2.使用window.addeventlistener添加resize方法

优点：

1. 可以根据窗口大小实现自适应；
2. 将图表方法封装以后，只需要执行一遍就可以实现多个图表的自适应；
3. 不会被覆盖
   

缺点：

• 当vue页面路由跳转到下一个页面时，上一个页面的onresize方法会继续执行

【造成这个问题的原因是因为vue是单页面应用，echarts中的操作都是基于window，当然也可以使用window.removeeventlistener在下一个页面删除绑定的方法】

点击查看window.removeeventlistener使用注意点

3.实现在div使用onresize方法

github项目地址，喜欢的小伙伴给个star,谢谢

实现原理：在div上实现类似window的onresize 监听，这样既能实现图表的自适应，也不会因为页面跳转之后继续执行三个页面的onresize 方法

实现方法：

引入esresize.js（文末贴上代码）

在div上绑定对应onresize 方法

优点：

1. 可以根据窗口大小实现自适应
2. 页面跳转不会执行上次操作
3. 多个方法不会覆盖
   

缺点：暂无发现（如有问题，欢迎各位补充）

文章参考：js监听div的resize事件

esresize.js代码

到此这篇关于vue使用echarts图表自适应的几种解决方案的文章就介绍到这了,更多相关vue使用echarts图表自适应内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！