1. 使用window.onresize
var myChart = echarts.init(document.getElementById('myChart'));
window.onresize = () => {
myChart.resize()
}
优点:
- 可以根据窗口大小实现自适应
缺点:
- window.onresize是绑定到window上的,切换vue页面时监听依然存在
- 其他页面有window.onresize事件时,会互相覆盖
2.给div绑定onresize事件
忘了是给谁的博客上看到的,还挺好用的
- 引入esresize.js
import EleResize from '@/assets/js/esresize';
- 给div绑定事件
var myChart = echarts.init(document.getElementById('myChart'));
var resizeDiv = document.getElementById('myChart')
EleResize.on(resizeDiv, ()=> {
myChart.resize()
})
优点:
- 可以根据窗口大小实现自适应
- 切换vue页面时,事件不会继续触发
- 事件不会相互覆盖
缺点:
- 未知
3. esresize.js代码
var EleResize = {
_handleResize: function (e) {
var ele = e.target || e.srcElement
var trigger = ele.__resizeTrigger__
if (trigger