使用echarts真机显示模糊

在开发微信小程序的时候，遇到了微信开发工具显示清晰，但是真机显示不清晰的问题，在手机上运行截图如下

后来查阅资料得知，在微信小程序中含有像素比一说，在小程序中获取像素比方法如下
微信小程序官方获取屏幕像素比的方法：https://developers.weixin.qq.com/miniprogram/dev/dev_wxwork/dev-doc/qywx-api/foundation/wxgetsysteminfo.html
所以在初始化图标的时候，可以把这个值传进去

  getPixelRatio(){
    let pixelRatio = 0
    let screenWidth = 375
    wx.getSystemInfo({
      success: function (res) {
        console.log(res);
        pixelRatio = res.pixelRatio
      },
      fail: function () {
        pixelRatio = 0
        screenWidth = 375
      }
    })
    this.setData({
      currentPixelRatio: pixelRatio,
    })
  },
  //拿到当前像素比以后，在echarts初始化的时候，把值传进去，根据比例进行初始化
  function initChart(canvas, width, height,option,canvasDpr,currentPixelRatio) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: currentPixelRatio
  });
  canvas.setChart(chart);
  chart.setOption(option);
  return chart;
}

加上上面的代码以后的效果图如下