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);

      });

转换后的图表

三、有一个缺点就是没有动画和点击效果