About to go off work, the leader in the group feedback small program in the chart PC can not display. In the mind think this fool how to open small program in PC, but the problem has been found, I have to solve.

First of all, I found the online example of Echarts-for-Weixin to share and opened it on PC, and it actually displayed normally. Then download the code of echarts-for-Weixin and preview it on the local PC. The same situation appears with our small program, which also cannot be displayed.

This proves that there is a solution, but it is not officially announced. I tried force-use-old-canvas=”true” and sure enough, forcing the old canvas will work. That’s easy to do, add PC side using the old canvas code is not on the line.

      //ec-canvas. Js file init method. Modify the forceUseOldCanvas logic
      const { platform } = wx.getSystemInfoSync()
      let forceUseOldCanvas = this.data.forceUseOldCanvas;
      // PC applet uses old canvas
      if (["mac"."windows"].includes(platform)) {
        forceUseOldCanvas = true;
      }
Copy the code

The problem of not being able to display is solved, but there is still a problem, the chart is smaller!! The first thought is not the width and height of the problem, but after debugging, the problem is not in this. Then reading the source code, one line caught my eye

       //ec-canvas.js file initByOldWay method
       const canvasDpr = 1;
Copy the code

Could it be because of this canvasDpr? Modify the code to

      const { pixelRatio: canvasDpr } = wx.getSystemInfoSync()
Copy the code

Ok, now it works on PC, but it doesn’t work on developer, so add another judgment

      let { pixelRatio: canvasDpr, platform } = wx.getSystemInfoSync()
      if (platform === "devtools") {
        canvasDpr = 1;
      }
Copy the code

Problem solved. Off!