微信小程序Echarts覆盖正常组件问题解决
更新时间：2019年07月13日 15:02:52 作者：yyyaoxy
这篇文章主要介绍了微信小程序Echarts覆盖正常组件问题解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
最近公司的项目中需要在小程序内使用echarts组件来展示数据，同时因为使用了自定义导航栏以及蒙版层，导致Echarts图形覆盖于所有组件的上方，不符合设计要求。
尝试解决的思路：
z-index：Echarts使用的是微信原生canvas，优先级高，z-index完全无效。
cover-view：因为page中含有一些如input之类的无法与cover-view进行嵌套使用的元素，故cover-view也无法奏效。
wx.canvasToTempFilePath：wx.canvasToTempFilePath官方文档
思路是等待画图完成之后利用这个方法将画布导出成图片，来代替canvas进行数据展示，使用display来控制canvas的隐藏会出现一些不太好看的闪烁，因此使用position:absolute将canvas预先移动至屏幕外。
该方法需要在draw()回调方法中使用，部分代码如下：
ec-canvas.js
wxml中
js中
这个过程中还是存在着一些问题，例如如果画图较慢会导致生成的图片只有一部分数据甚至是全透明的，目前只找到了一个并不完善的解决方案，就是使用setTimeOut来增加一些延迟，等待画图结束，因此，加上了wx.showLoading来过渡，但依然存在一些隐患。希望官方可以后续的更新中可以推出一些较为完善的方案。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了js实现登录时记住密码的方法,结合实例形式分析了JavaScript基于cookie实现存储登录密码相关操作技巧,需要的朋友可以参考下2020-04-04
这篇文章主要介绍了js判断文本框剩余可输入字数的方法,可实现直观显示文本框可输入字数的功能,非常具有实用价值,需要的朋友可以参考下2015-02-02
JavaScript Event学习第四章 传统的事件注册模型
在这一章我会讲解给元素注册事件的最好的一种办法，那就是：确保一个特定的事件在特定的HTML元素上发生并且能运行特定的脚本。2010-02-02
本文主要介绍了js获取数组对象中的全部key和value值，主要使用JavaScript的 map() 函数和 values() 迭代器来实现取出数组对象的所有key值和value值，感兴趣的可以了解下2024-01-01
做web开发的朋友都清楚，js程序的调试是相当郁闷的，因为首先这种语言语法比较灵活，它是一种弱类型的脚本语言，很多错误是无法控制的。2010-10-10
这篇文章主要介绍了JavaScript中的普通函数与构造函数比较,需要的朋友可以参考下2015-04-04
这篇文章主要为大家详细介绍了javascript跨域资源共享的相关资料，感兴趣的朋友可以参考一下2016-07-07
这篇文章主要介绍了JavaScript知识点总结(十)之this关键字的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下2016-05-05
今天小编就为大家分享一篇layer弹出层显示在top顶层的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
实现tab页很多方法，有一些是用纯CSS实现，其他大多数是基于jquery、mootools或者其他js框架实现，既然有这么多可以拿来即用的插件，又何苦重复造轮子。2009-06-06
最新评论