3***@qq.com
3***@qq.com
  • 发布:2016-09-27 11:46
  • 更新:2019-04-02 12:57
  • 阅读:3425

echart不渲染

分类:HTML5+

在红米note3上,从含有echart图表的页面(竖屏)跳转到另一个页面(横屏),再返回echart页面时(恢复竖屏),echart图表消失。
曾用过解决方案:
1.设置echart页面不出栈 setStyle({render:'always'})(已测试过华为p8,三星盖乐世4,小米2,小米5,红米note3,其中红米note3无效)

  1. 在部分手机上,上下滑动屏幕后,echar图表会重新渲染出来,利用这点,调用scroll().scrollTo()方法模拟手指上下滑动屏幕,测试机中,红米note3无效,其他手机均有效。

红米note3等部分手机异常,有解决方案么?

2016-09-27 11:46 负责人:无 分享
已邀请:
a***@qq.com

a***@qq.com

昨天我在写代码时,遇到了跟你同样的问题,有一个不算是太完美的解决办法,而且有点蠢。
A页面,是你的第一个页面,承载了echart
B页面,是你通过点击A页面跳转到的,在这个页面的mui.init里面,配置beforeback:

beforeback:function(){
//获取你A页面的webview
var i = plus.webview.getWebviewById('A-webview页面ID');
if(i){
i.evalJS(设置图表的函数);
}
}

原理就是你点击返回的时候,MUI处理返回之前,会调用A页面里面的函数
官方不建议使用evalJS,但是我用mui.fire来处理貌似不起作用

另外据我同事反映,如果由A走到B之后,A页面退回到另一个页面(页面C),再从C页面回到A页面,进入B页面,返回A页面,图表也没有刷出来,目前我也在找其他办法

  • 3***@qq.com (作者)

    我摸索到了一个方法,为了查看造成此现象的原因,我将B(跳转的页面)页面设置为窗口模式(非全屏),以观察A页面上的echart发生了什么,结果A页面上一切正常,于是我推测是否是B页面全屏状态才有此bug出现,在代码中,我尝试着将B页面设置为底部styles:{top:-1}(非0就行),将B页面设置为非全屏状态,问题得到解决。

    2016-11-08 09:48

  • static

    我也遇见了这个问题,有什么比较好的解决方案吗?

    2017-04-14 16:03

  • 1***@qq.com

    回复 3***@qq.com:用了下你的方法,确实漏出echarts好使,但是设置top有的手机好使有的不好使

    2018-05-21 11:05

秋云

秋云

wx-charts跨端图表组件

推荐使用wx-charts插件,仿照F2样式做的,调用很简单方便,解决H5端图表显示模糊等问题,支持toolTip及入场动画展示。已上传插件市场,欢迎各位下载,觉得好用5星好评哦

wx-charts跨端图表
https://ext.dcloud.net.cn/plugin?id=271

该问题目前已经被锁定, 无法添加新回复