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

最近，该公司的项目需要使用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，但还是存在一些隐患。希望官方能在后续更新中介绍一些更完善的方案。

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