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

IVAn灬

于 2020-07-10 11:44:56 发布

阅读量492

点赞数 2

CC 4.0 BY-SA版权

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

本文链接：https://blog.csdn.net/IVanLyf/article/details/107247588

小程序专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何在微信小程序中使用wx.getSystemInfo()获取设备像素比，并将其应用于ECharts图表的初始化，通过设置devicePixelRatio参数来提高图表的清晰度。

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

获取移动设备的像素比获取系统信息 ==> wx.getSystemInfo() API说明：wx.getSystemInfo()

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

初始化图表的时候设置像素比 devicePixelRatio API说明：echarts.init

案例

	 //获取像素比
      const getPixelRatio = () => {
        let pixelRatio = 0
        wx.getSystemInfo({
          success: function (res) {
            pixelRatio = res.pixelRatio
          },
          fail: function () {
            pixelRatio = 0
          }
        })
        return pixelRatio
      }
      // console.log(pixelRatio)
      var dpr = getPixelRatio()
        // 初始化图表
      const chart = echarts.init(canvas, null, {
        // renderer: 'svg',//微信小程序中不支持该设置
        width: width,
        height: height,
        devicePixelRatio: dpr
      });
      setOption(chart,this);