当前位置: 首页 > Web前端 > vue.js

echarts的自适应问题(window自适应,sidebar自适应,el-tab中自适应)

时间:2023-03-31 18:10:12 vue.js

1.echart的图表提供了resize功能。当调整大小功能被触发时,图表将被重新绘制。二、常用浏览器,窗口适配。(1)设置放置图表的容器div的宽度为100%,不固定,高度可以根据需要设置为vh或px。(2)监听浏览器窗口大小window.addEventListener('resize',function(){this.mychart.resize()//当浏览器窗口大小变化时,图表可以自适应})3.侧边栏关闭或打开引起的放置图表的容器div使用vuex根据关闭或打开触发echart的resize侧边栏打开方法"$store.state.app.sidebar.opened"(){setTimeout(()=>{this.myChart.resize()},300)}4.el-tab切换时,自适应图表的宽度将变为100px压缩不自适应。原因是在el-tab的时候,其他不显示的tab下的div此时显示为none。tab切换的时候,div还没有渲染出来。图表执行js初始化时找不到这个元素,所以自动显示。将“100%”转换为“100”,最终计算出的图表变为100px。1、解决方案:2.解决方案: