Echarts chart adaptive

1. Use window.onresize

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

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

Advantage: It can be self-adaptive according to the window size.
Disadvantage: When a page writes more charts, this writing method is relatively cumbersome and needs to be written one by one.

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 )

Advantages: It can realize self-adaptation according to the size of the window; after encapsulating the sizeFun of the chart, it only needs to be executed once to realize the self-adaptation of multiple charts; Disadvantage: When the vue page route
jumps to other pages, it is still listening, so当离开页面或是不需要图表的时候记得清除监听

Guess you like

Origin blog.csdn.net/qq_58648235/article/details/130108925