echarts在PC微信小程序不能显示解决方案

语言: CN / TW / HK

快要下班时,领导在群里反馈小程序中的图表pc不能显示。心里就想这傻子怎么在pc打开小程序,但是问题已经被发现了,我不能不解决。

首先,我找来echarts-for-weixin的线上例子分享后在pc打开,居然能正常显示。然后下载echarts-for-weixin的代码在本地PC端预览,出现了和我们小程序相同的情况,也是不能显示。

这就证明是有解决方案,但是官方并未公布。 我尝试 force-use-old-canvas="true" 果然,强制使用老的canvas能正常显示。那就好办了,添加pc端使用老canvas代码不就行了。

js //ec-canvas.js文件init方法。修改forceUseOldCanvas逻辑 const { platform } = wx.getSystemInfoSync() let forceUseOldCanvas = this.data.forceUseOldCanvas; //pc小程序使用旧canvas if (["mac", "windows"].includes(platform)) { forceUseOldCanvas = true; } 不能显示的问题是解决了,但是还有一个问题,图表变小了!!! 首先想到是不是宽高的问题,但是经过调试,问题并不在这。 然后阅读源码,有一行代码引起了我的注意

js //ec-canvas.js文件initByOldWay方法 const canvasDpr = 1; 会不会是因为这个canvasDpr导致的呢?修改代码为

js const { pixelRatio: canvasDpr } = wx.getSystemInfoSync() 很好,现在是可以在pc正常显示了,但是问题又来了,在开发者工者显示又不正常了,那就再加一个判断

js let { pixelRatio: canvasDpr, platform } = wx.getSystemInfoSync() if (platform === "devtools") { canvasDpr = 1; } 问题搞定,下班!