微信小程序Echarts覆盖正常组件问题解决


Posted in Javascript onJuly 13, 2019

最近公司的项目中需要在小程序内使用echarts组件来展示数据,同时因为使用了自定义导航栏以及蒙版层,导致Echarts图形覆盖于所有组件的上方,不符合设计要求。       

尝试解决的思路:       

z-index:Echarts使用的是微信原生canvas,优先级高,z-index完全无效。       

cover-view:因为page中含有一些如input之类的无法与cover-view进行嵌套使用的元素,故cover-view也无法奏效。

微信小程序Echarts覆盖正常组件问题解决

wx.canvasToTempFilePath:wx.canvasToTempFilePath官方文档       

思路是等待画图完成之后利用这个方法将画布导出成图片,来代替canvas进行数据展示,使用display来控制canvas的隐藏会出现一些不太好看的闪烁,因此使用position:absolute将canvas预先移动至屏幕外。       

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

ec-canvas.js

微信小程序Echarts覆盖正常组件问题解决

wxml中

微信小程序Echarts覆盖正常组件问题解决

js中

微信小程序Echarts覆盖正常组件问题解决

这个过程中还是存在着一些问题,例如如果画图较慢会导致生成的图片只有一部分数据甚至是全透明的,目前只找到了一个并不完善的解决方案,就是使用setTimeOut来增加一些延迟,等待画图结束,因此,加上了wx.showLoading来过渡,但依然存在一些隐患。希望官方可以后续的更新中可以推出一些较为完善的方案。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用Jquery打造最佳用户体验的登录页面的实现代码
Jul 08 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
Aug 23 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
Mar 04 Javascript
jquery实现简单手风琴菜单效果实例
Jun 13 Javascript
JavaScript实现LI列表数据绑定的方法
Aug 04 Javascript
原生js实现jquery函数animate()动画效果的简单实例
Aug 21 Javascript
Javascript Event(事件)的传播与冒泡
Jan 23 Javascript
JS 设置Cookie 有效期 检测cookie
Jun 15 Javascript
彻底解决 webpack 打包文件体积过大问题
Jul 07 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
Sep 14 Javascript
详细分析Node.js 多进程
Jun 22 Javascript
element-ui中el-upload多文件一次性上传的实现
Dec 02 Javascript
微信小程序图片左右摆动效果详解
Jul 13 #Javascript
vue iview多张图片大图预览、缩放翻转
Jul 13 #Javascript
vue实现图片预览组件封装与使用
Jul 13 #Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 #Javascript
小程序实现悬浮搜索框
Jul 12 #Javascript
小程序实现搜索框功能
Mar 26 #Javascript
iview的table组件自带的过滤器实现
Jul 12 #Javascript
You might like
PHP实现多服务器session共享之NFS共享的方法
2007/03/16 PHP
Server.HTMLEncode让代码在页面里显示为源代码
2013/12/08 PHP
PHP处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
php生成与读取excel文件
2016/10/14 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
一个可以兼容IE FF的加为首页与加入收藏实现代码
2009/11/02 Javascript
Javascript解决常见浏览器兼容问题的12种方法
2010/01/04 Javascript
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
2010/12/03 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
jquery解决客户端跨域访问问题
2015/01/06 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
JS使用JSON作为参数实例分析
2016/06/23 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
2017/03/02 Javascript
微信小程序 页面跳转传值实现代码
2017/07/27 Javascript
ReactNative列表ListView的用法
2017/08/02 Javascript
Vue2.0父子组件传递函数的教程详解
2017/10/16 Javascript
canvas轨迹回放功能实现
2017/12/20 Javascript
vue使用 better-scroll的参数和方法详解
2018/01/25 Javascript
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
2018/08/28 jQuery
详解webpack 最简打包结果分析
2019/02/20 Javascript
js实现鼠标拖拽缩放div实例代码
2019/03/25 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
2020/07/28 Javascript
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
python读取二进制mnist实例详解
2017/05/31 Python
python编程使用selenium模拟登陆淘宝实例代码
2018/01/25 Python
Python关于反射的实例代码分享
2020/02/20 Python
Python如何将模块打包并发布
2020/08/30 Python
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
什么是java序列化,如何实现java序列化
2012/11/14 面试题