uni-app微信小程序中图表组件uCharts的遮挡问题处理

2020-06-02  本文已影响0人  守护浪漫的小香樟

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

      });

转换后的图表

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

上一篇下一篇

猜你喜欢

热点阅读