使用场景:
使用ResizeObserver监听.border元素(echarts元素父级)尺寸变化,echarts图表进行重绘
先上代码:
let resizeObserver = null;
mounted() {
//监听class="border"元素的尺寸变化
var that = this;
resizeObserver = new ResizeObserver(() => {
that.refreshCharest();
});
resizeObserver.observe(document.querySelector(".border"));
}
methods:{
// 更新echarts
refreshCharest() {
myLine.resize(); //图表重绘方法
},
}
当前功能在本人浏览器测试没有问题。但是在一些低版本浏览器就会提示ResizeObserver未定义。
翻阅资料发现ResizeObserver主流浏览器只兼容高版本,基本上2018年以前的浏览器都不兼容,部分浏览器甚至2020年以前都不兼容。
解决方法:
可以使用第三方的polyfill方案,下载resize-observer-polyfill插件:
npm install resize-observer-polyfill --save-dev
页面引入:
import ResizeObserver from 'resize-observer-polyfill';
此时再运行就可以了