Echarts 图表自适应

发布时间:2024年01月19日

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页面路由跳转到其他页面时,还在监听,所以当离开页面或是不需要图表的时候记得清除监听

文章来源:https://blog.csdn.net/qq_58648235/article/details/130108925
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。