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当离开页面或是不需要图表的时候记得清除监听