移动端Echarts折线图横屏,不能自适应问题

通常移动端使用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(),进行强制更新

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值