【微信小程序】引用echarts 在真機上預覽圖表模糊的解決辦法

1.獲取移動設備的像素比
獲取系統信息 ==> wx.getSystemInfo()
API說明：wx.getSystemInfo()

const getPixelRatio = () => {
        let pixelRatio = 0
        wx.getSystemInfo({
          success: function (res) {
            pixelRatio = res.pixelRatio
          },
          fail: function () {
            pixelRatio = 0
          }
        })
        return pixelRatio
}

2.初始化圖表的時候設置像素比
devicePixelRatio
API說明：echarts.init

案例：

 //獲取像素比
      const getPixelRatio = () => {
        let pixelRatio = 0
        wx.getSystemInfo({
          success: function (res) {
            pixelRatio = res.pixelRatio
          },
          fail: function () {
            pixelRatio = 0
          }
        })
        return pixelRatio
      }

      var dpr = getPixelRatio()
        // 初始化圖表
      const chart = echarts.init(canvas, null, {
        // renderer: 'svg',//微信小程序中不支持該設置
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
     setOption(chart,this);