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

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

作者: 守护浪漫的小香樟 | 来源:发表于2020-06-02 16:19 被阅读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);

          });

    转换后的图表

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

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/pwguzhtx.html