手机版

微信小程序Echarts涵盖普通组件问题解决

时间:2021-08-21 来源:互联网 编辑:宝哥软件园 浏览:

最近,该公司的项目需要使用echarts组件在小程序中显示数据。同时,由于使用了自定义导航栏和遮罩层,Echarts图形覆盖了所有组件,不符合设计要求。

试着解决思路:

Z-index: e-charts使用微信原生画布,优先级高,Z-index完全无效。

Cover-view:因为页面包含了一些元素,比如输入不能嵌套cover-view,所以cover-view也不能工作。

wx . canvastotemfilepath:wx . canvastotemfilepath官方文档

想法是使用这种方法将画布导出为图片,而不是画布,用于绘制后的数据显示。使用Display控制画布的隐藏会造成一些难看的闪烁,所以position:absolute是用来提前将画布移出屏幕的。

这个方法需要在draw()回调方法中使用,部分代码如下:

ec-canvas.js

在wxml中

在js中

这个过程中还存在一些问题。比如画图速度慢,生成的图片只会有一部分数据甚至是完全透明的。目前只找到了一个不完善的解决方案,那就是使用setTimeOut增加一些延迟,等待绘图完成。所以在过渡中加入了wx.showLoading,但还是存在一些隐患。希望官方能在后续更新中介绍一些更完善的方案。

以上就是本文的全部内容。希望对大家的学习有帮助,支持我们。

版权声明:微信小程序Echarts涵盖普通组件问题解决是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。