【微信小程序】引用echarts 在真机上预览图表模糊的解决办法

 _琳

于 2020-04-01 12:41:03 发布

阅读量2.6k

点赞数 19

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.youkuaiyun.com/weixin_43985637/article/details/105242537

本文介绍了如何解决微信小程序中引用ECharts时，图表在真机上显示模糊的问题。通过获取移动设备的像素比wx.getSystemInfo()，并在初始化图表时设置像素比devicePixelRatio，可以有效改善图表的显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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
          }
        })