通常移动端使用echarts中的折线图会默认竖屏展示,但是由于竖屏会导致x轴变窄,数据展示时会显得略微拥挤,这个时候就需要使用户可以横屏查看图表;
使用移动端自带的横屏不会触发元素更新,此时一些动态赋予宽高的元素就会导致页面样式错乱,比如当页面引用了vant组件的tabs标签页中下划线会错乱,echarts图表宽高不会自适应…
首先需确认echarts是否是写死了宽度和高度。比如手机的分辨率为宽375高667,这时将宽设置为355px,高度设置为500px,若此时横屏,终端分辨率变为宽667高375,但是折线图的宽高依然是355*500,这个时候就会横向不满屏且纵向溢出页面,所以宽高不可写死,可选择百分比或者利用相对定位设置top,left,bottom,right等其他灵活方法。
其次需要监听横屏window.addEventListener(‘orientationchange’,()=>{
//横屏
if(window.orientation == 90 || window.orientation == -90){
//横屏状态下动态获取元素,设置样式,调用echarts的 resize() 方法进行更新
},false)
当页面依然没有更新视图,可采用this.$forceUpdate(),进行强制更新
移动端Echarts折线图横屏,不能自适应问题
最新推荐文章于 2024-08-03 17:05:14 发布