微信小程序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 相关文章推荐
web 页面分页打印的实现
Jun 22 Javascript
JQuery对checkbox操作 (循环获取)
May 20 Javascript
简单的jquery拖拽排序效果实现代码
Sep 20 Javascript
js格式化时间小结
Nov 03 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
原生js实现网易轮播图效果
Apr 10 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
Node.js静态服务器的实现方法
Feb 28 Javascript
详解小程序原生使用ES7 async/await语法
Aug 06 Javascript
微信小程序实现多个按钮的颜色状态转换
Feb 15 Javascript
vue.js多页面开发环境搭建过程
Apr 24 Javascript
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
微信小程序图片左右摆动效果详解
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操作符与控制结构代码
2011/12/30 PHP
PHP 9 大缓存技术总结
2015/09/17 PHP
Laravel框架实现发送短信验证功能代码
2016/06/06 PHP
PHP中字符串长度的截取用法示例
2017/01/12 PHP
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
2008/12/19 Javascript
JavaScript OOP类与继承
2009/11/15 Javascript
实用框架(iframe)操作代码
2014/10/23 Javascript
浅谈被jQuery抛弃的函数及替代函数
2015/05/03 Javascript
JavaScript 数组中最大最小值
2016/06/05 Javascript
JS实现页面进入和返回定位到具体位置
2016/12/08 Javascript
纯JS实现弹性导航条效果
2017/03/06 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
2017/10/10 Javascript
Three.js实现3D机房效果
2018/12/30 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
2019/05/14 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
2019/08/09 Javascript
在Chrome DevTools中调试JavaScript的实现
2020/04/07 Javascript
Javascript实现鼠标移入方向感知
2020/06/24 Javascript
在vue中使用vant TreeSelect分类选择组件操作
2020/11/02 Javascript
[02:19]DOTA2上海特级锦标赛 观赛指南 Spectator Guide
2016/02/04 DOTA
Python类的专用方法实例分析
2015/01/09 Python
python脚本实现数据导出excel格式的简单方法(推荐)
2016/12/30 Python
Python 字符串大小写转换的简单实例
2017/01/21 Python
用python实现对比两张图片的不同
2018/02/05 Python
python使用turtle绘制分形树
2018/06/22 Python
详解Python3注释知识点
2019/02/19 Python
python 默认参数相关知识详解
2019/09/18 Python
JupyterNotebook设置Python环境的方法步骤
2019/12/03 Python
python简单实现最大似然估计&scipy库的使用详解
2020/04/15 Python
Django生成数据库及添加用户报错解决方案
2020/10/09 Python
python入门教程之基本算术运算符
2020/11/13 Python
美国折扣香水网站:The Perfume Spot
2020/12/12 全球购物
你所在的项目是如何确定版本号的
2015/12/28 面试题
大学自主招生自荐信
2013/12/16 职场文书
企业员工集体活动方案
2014/08/17 职场文书
保险公司客户经理岗位职责
2015/04/09 职场文书
小学中队活动总结
2015/05/11 职场文书