Echarts 图表自适应

1. 使用window.onresize

let myChart = echarts.init(document.getElementById(dom))

window.onresize = function () {
    
    
  	myChat.resize()
}

优点：能够根据窗口大小实现自适应
缺点：当一个页面写了多给图表的时候，这种写法相对来说比较的麻烦，需要一个一个的写。

let myChart1 = echarts.init(document.getElementById(dom1))
let myChart2 = echarts.init(document.getElementById(dom2))

window.onresize = function () {
    
    
  	myChat1.resize()
  	myChat2.resize()
}

2. window.addEventListener(‘resize’, sizeFun )

let myChart = echarts.init(document.getElementById(dom))

let sizeFun = function () {
    
    
         myChart.resize()
      }
      
window.addEventListener('resize', sizeFun )

优点：能够根据窗口大小实现自适应；将图表sizeFun封装好以后，只需要执行一遍就可以实现多个图表的自适应；
缺点：当vue页面路由跳转到其他页面时，还在监听，所以当离开页面或是不需要图表的时候记得清除监听