问题描述:在微信小程序中,使用echarts图表,真机测试模糊
原因:canvas在真机渲染时,没有考虑dpr(像素),默认参数填充
修改前代码:
this.barComponent.init((canvas, width, height) => {
// 初始化图表
const barChart = echarts.init(canvas, null, {
width: width,
height: height
});
barChart.setOption(this.getBarOption());
// 注意这里一定要返回 chart 实例,否则会影响事件处理等
return barChart;
});
解决方法:初始化函数加入dpr参数,完美解决
修改后代码:
this.barComponent.init((canvas, width, height,dpr) => {
// 初始化图表
const barChart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr
});
barChart.setOption(this.getBarOption());
// 注意这里一定要返回 chart 实例,否则会影响事件处理等
return barChart;
});