uni-app微信小程序中图表组件uCharts的遮挡问题处理
uni-app微信小程序中图表组件uCharts的遮挡问题处理
最近搞小程序用到了uCharts统计图表,本来在模拟器上运行的好好的很完美。准备发起提测了。打个包在手机上运行一下看看效果如何。两个问题:1、图表显示错位2、图表遮挡页面切不跟着页面滚动。
一、网上搜索:得到答案:uCharts是基于微信原生开发的 所在的层级是最高的。所以会遮挡uni-app绘制的页面
二、没办法就去网上找解决办法:尝试了很多遍都没有效果。最终注意到uCharts有一个转换图片的方法canvasToTempFilePath。抱着试试看的心态运行。 果然完美解决问题:下面是相关代码和效果图
转换后的图表canvases[me.canvasColumnId].addEventListener("renderComplete", () => {
//监控图表渲染完成
setTimeout(function() {
//延迟一定时间执行
uni.canvasToTempFilePath(
{
//将图表转成图片
x: 0,
y: 0,
width: me.cWidth * me.pixelRatio,
height: me.cHeight * me.pixelRatio,
fileType: "png",
canvasId: me.canvasColumnId,
success: function(res) {
console.log("获取到的柱形图截图:****************", res);
me.imgSrc = res.tempFilePath;
},
fail: function(res) {}
},
me
);
}, 2000);
});
三、有一个缺点就是没有动画和点击效果