用LimeSurvey做了一个问卷,结果中的图形采用echarts生成。代码几乎没变,之前都能生成,这次却不行了,有点奇怪。
首先,之前每次做问卷都是实用手机浏览器,而这次直接采用微信扫码后做的问卷,也就是说微信所采用的浏览器并不支持echarts,但如果使用iphone的微信却一点问题也没有。如果用安卓手机的浏览器(自带和夸克)来测试问卷,结果也是正常的。
从网上搜索的结果来看,安卓貌似跟echarts有兼容性问题,好像是浏览器内核的原因,具体我也搞不清楚也不想搞清楚,我要的就是如何解决问题。
兼容问题中有个关键字还是引起了我的注意,就是图形渲染采用canvas的话可能存在版本问题,所以在github的微信专用echarts中甚至要开启老版本的canvas渲染。
既然是这样,那就采用svg格式好了,替换之后,图形都挤在了一起,只有放大缩小窗口之后才能正常显示,可是手机上哪有这样的放大缩小窗口。
这个问题倒也不是个案,只是给出的解决方案很少,抱着试一试的心态,在代码后面加入了以下内容:

var myEvent = new Event('resize');
window.dispatchEvent(myEvent);

再次预览问卷,图形正常了。
不过这里有一点需要说明,就是resize的问题,如果从官网样例中抄来的代码,可能是这样的:

window.addEventListener('resize', myChart.resize);

即便加了上面两行代码还是挤在一起,而必须调整成如下:

window.addEventListener("resize", function () {
            setTimeout(function () {
            myChart.resize();
            }, 100)
        });

100是Timeout的时间,根据自己需要调整好了。

参考资料

解决ECharts图表切换后缩成一团的问题

最后修改:2023 年 05 月 05 日
如果觉得我的文章对你有用,请随意赞赏