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

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

  1. 获取移动设备的像素比 获取系统信息 ==> wx.getSystemInfo() API说明:wx.getSystemInfo()
1
2
3
4
5
6
7
8
9
10
11
12
const getPixelRatio = () => {
let pixelRatio = 0
wx.getSystemInfo({
success: function (res) {
pixelRatio = res.pixelRatio
},
fail: function () {
pixelRatio = 0
}
})
return pixelRatio
}
  1. 初始化图表的时候设置像素比 devicePixelRatio API说明:echarts.init

    案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//获取像素比
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);



【微信小程序】引用echarts 在真机上预览图表模糊的解决办法
https://www.ivan.fun/posts/2633b48b/
作者
IVAn
发布于
2020年4月26日
许可协议