在开发微信小程序使用echarts 图表的时候碰到了 真机上很模糊,但在微信开发工具上却是清晰的这个问题,然后在网上找了点资料,最终成功解决!! 最后给大家总结一下 看下文:
微信小程序如何使用echarts图表,大家可以看我的上一篇文章,在这我就不多讲了。
- 首先我们可以先看一下微信小程序提供的获取移动设备的像素比的方法: https://developers.weixin.qq.com/miniprogram/dev/api/base/system/system-info/wx.getSystemInfo.html
获取系统信息 == wx.getSystemInfo()
2. 在初始化图表的时候将获取的像素比填入到devicePixelRatio中:
//微信小程序提供的获取像素比的方法 wx.getSystemInfo
const getPixelRatio = () => {
let pixelRatio = 0
wx.getSystemInfo({
success: function (res) {
pixelRatio = res.pixelRatio
},
fail: function () {
pixelRatio = 0
}
})
return pixelRatio
}
//初始化的时候调用获取像素比的方法
var dprs = getPixelRatio()
const quarterChart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dprs // 获取到的像素比
});
您可以根据自己的情况来修改此案例,只需要在初始化图表的时候将值传入便可以解决问题。
完结,希望能够帮助到您,麻烦您帮忙点个赞,谢谢。
后续会持续更新关于小程序方面的问题与解决方案,如果您感兴趣可以点个关注,谢谢。