使用echarts，里面的canvas层级太高怎么办

已于 2023-04-06 11:42:15 修改
阅读量1.2w 收藏 1
点赞数 1
分类专栏： js 文章标签： echarts javascript ecmascript
于 2019-07-03 11:14:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40918145/article/details/94554209
版权

先看效果

 

一开始是想给被遮盖的地方用z-index最高级，发现没有用，后来给canvas绑定的id，给其第一个div设置z-index: 1，就可以解决了

#echarts>div{
			z-index: 1
		}

木头没有瓜
关注
专栏目录
前端(小程序) echarts图表 tooptip 层级过高导致弹层覆盖其他组件问题
闫瑞锋的博客
11-23 800
小程序使用echarts tooltip层级过高导致覆盖其他组件 解决方案
解决echart图表层级太高 cover-view无效的问题
coca_cola_1105的博客
01-07 4168
解决echart图表层级太高 cover-view无效的问题 首先在这里贴下微信小程序使用echart的流程：（注意：这里要下载最新版的ec-canvas这里附上链接[https://github.com/ecomfe/echarts-for-weixin]这个最新的链接并且解决了图表模糊的问题。） 下面展示一些 echart使用案例。将legend的z设置成-1，将头部的cover-view的z-indez设置成99即解决了echart图表层级过高的问题。 import * as echarts from
微信小程序echarts层级太高
dicuan0092的博客
09-04 3285
项目中因为需求，底部的tab导航栏是自己写的，在开发者工具中一切正常；但是在真机上页面滑动时，echarts的层级比tab高，调过两者的z-index后仍然如此。 经过查找后发现cover-view和cover-image替换tab的view后，可以解决以上的问题。 <!--底部公共tabBar--> <cover-view class="tabbar-con...
echarts canvas 层级太高 导致tooltip被遮盖
weixin_30588675的博客
08-27 4164
问题截图： 解决方法： 给echarts里面的canvas设置层级， z-index: -1 import ReactEcharts from 'echarts-for-react' import styled from 'styled-components' // 这里本人习惯使用styled-components处理样式， 普通的css方式也可以 // 降...
echrts 在uniapp写小程序时挡住tabbar，不跟随滑动问题记录
最新发布
weixin_43311271的博客
08-15 468
解决图表层级太高网上主要有两种方法，1.自定义tabbar 用cover-view（本项目为低代码配置项目，代价太大）。2.将图表转换为图片显示（方法太过繁琐，但不失为一种好方法，但改动也比较多，太懒不想动同事太多代码）此时实现了大部分需求，但是还是有个问题，在ios下滑动时，图表会产生上下浮动的动画效果，虽然最后会回到正确位置。背景：在uniapp编写小程序代码中引入了echarts，引入页面还是tabbar。解决：通过限制页面长度实现tabbar的正常显示。
微信小程序echart图表canvas层级太高覆盖解决办法
天天打码-16年老码农
04-25 2139
最近在使用echart图表时，发现滚动页面时，echart图表层级覆盖原生组件，设置z-index无效。发现原来的echarts-for-wx组件里有个方法。
小程序中，echarts层级太高盖过了自定义时间组件问题
青春正在燃烧的博客
03-29 1264
1.使用echarts画了两个柱状图，结果盖过了自定义的时间组件，如图： 在网上找了各种解决方式都没起作用，最后还是想了个偏方解决的，方法是：在显示时间组件的时候隐藏echarts的图层，时间组件隐藏后显示echarts图层，完美解决 ...
微信小程序使用echarts层级过高问题
XismYan的博客
01-30 869
可以去wxml看看是不是在echarts元素上设置了force-use-old-canvas="true"在小程序里面使用echart，层级过高会被遮挡。研究了很久，最终把这个删掉，就可以了。
微信小程序：echarts层级太高，遮挡van-popup弹框组件
Wjk20011127的博客
05-24 370
1、使用hidden（注意，不能直接加在组件上，需要外层包裹一个view）
echarts层级过高遮挡其他组件问题
前端开发工程师博客
01-15 2655
微信小程序echarts层级过高 遮挡其他组件问题
微信小程序在ios下Echarts图表不能滑动的问题解决
12-10
问题现象 这个问题的现象说起来很简单。 小程序页面中有一篇很长的文章，内部有一个Echarts图表，手指上下滑动观看内容。 但是手指滑动区域在Echarts图表上时，页面却不能滑动了。 如下图： 追踪问题原因 因为在小程序上渲染图表用到的是echarts-for-weixin这个组件,而这个组件确实不支持一些Echarts功能。 所以最开始我怀疑是这个组件的问题，认为它把我的滑动事件给吞了。 为了确认这个问题，我直接在这个组件ec-canvas旁加了个兄弟节点view，然后用绝对定位将其覆盖在ec-canvas，这样滑动的时候就会滑动到我的view上而不是ec-canvas。 但是结果
使用canvas仿Echarts实现金字塔图
qq_40852667的博客
10-26 2692
前言 最近公司项目都偏向于数字化大屏展示????，而这次发给我的项目原型中出现了一个金字塔图????️， 好巧不巧，由于我们的图表都是使用Echarts，而Echarts中又不支持金字塔图，作为一个喜欢造轮子的前端开发，虽然自身技术不咋滴，但喜欢攻克难题的精神还是有的????， 不断地内卷，才是我们这些普通前端开发的核心竞争力????，所以就有了仿Echarts实现金字塔图的想法。 不多说先上效果 项目地址：(https://github.com/SHDjason/Pyramid.git) 正文 目前de
微信小程序canvas组件层级最高覆盖其他元素的解决方法
KrystalCSDN的博客
12-08 4029
问题描述 小程序中引入echarts官方组件，发现绘制出的图形总是处于页面最上层，在需要使用时间选择器时影响了picker-view的展示，需要移到下层。 尝试方法 1.z-index ec-canvas图形组件设置position并设置z-index:0，时间选择器设置position和z-index：1，没有效果。 2.用svg渲染 小程序不支持，echarts官方只有canvas版本的组件 原因分析 微信官方文档中看到这样的提示： 最终解决 想法来源：https://git
echart树图设置层级距离_小程序echart图层级显示问题
weixin_32238435的博客
01-14 590
前言使用过echart插件开发小程序的同学，应该都会遇到这个问题。尤其常见的是需求是：顶部固定，其他内容可以滚动 ，这时你会发现绘制的图形是会穿透所固定的顶部，并且无论你怎么给顶部区域设置css的z-index都是无效的。来看下案发现场例子：其实微信官方有写到，诸如canvas，video等组件是使用客户端创建的原生组件，而原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多...
解决 echarts 层级太高 cover-view无效的问题
weixin_47124112的博客
03-02 2514
常见的是需求是：顶部固定，其他内容可以滚动 ，这时你会发现绘制的图形是会。
mpvue引入echarts组件canvas层级，微信小程序canvas层级过高，小程序的坑
lert707的博客
09-28 2617
微信小程序canvas层级过高 – canvas是小程序的原生组件，而在小程序中原生组件的层级是最高的，其他不是原生的组件都没法盖住它，但有些使用我们要必须在上面弹窗，那这时怎么办呢？？？ 说一下canvas的解决方法。 解决办法 – 在弹窗时可以将canvas转换成图片并隐藏，使用image标签代替canvas，这样弹窗就可以盖在上面啦。 使用微信小程序自带的wx.canvasToTempFil...
微信小程序中使用echarts图表层级高于自定义底部菜单
gaoxugen的博客
09-28 1879
小程序项目中引入了echarts，但是当页面滑动时层级始终高于自定义的底部菜单。 注意1：底部菜单最好不要使用cover-view，页面中也最好不要使用，否则后边的层级会严重错乱。 注意2：ec-canvas组件最好不要使用wx:if等判断，否则会导致图表不跟随页面滑动 解决方案：设置force-use-old-canvas=“false”。 ...
echarts 等图表组件层级太高其它样式层级不生效
weixin_45554952的博客
06-14 1836
最近在页面设置一个悬浮图标，但是真机滑动的时候，曲线图遮住了悬浮图标 原代码 <view class="main_suspend" v-show="showSuspend"> <image class="suspend_img" :src="imgHost+suspendImg"></image> <image class="suspend_close" :src="imgHost + 'static/V2/comment/order/icon_close
解决 Echarts 图 tooltip 层级太高穿透问题
前端程序媛_Ying博客
05-29 518
问题场景：Echarts 图 tooltip 是自动轮播的，当点击某个区域出现弹窗时，tooltip和弹窗同时显示，没在遮罩层下面，查看tooltip的层级显示99999，所以这里改一下tooltip的层级。设置 extraCssText: "z-index: 2;
解决canvas层级过高
11-18
为了解决canvas层级过高的问题，可以尝试以下两种方法： 1. 将canvas放到UI界面中，并调整特效sort in layer。但是如果UI特效穿插较多，层级不好管理，且多canvas会造成合批问题。 2. 使用粒子BakeMesh。它的优点是可以像UGUI一样通过上下调整层级排序，接受Mask处理。 另外，如果是在HTML页面中使用canvas，可以加上一个判断wx:if="{{!canvasImg}}"，并在判断为false时使用image标签代替canvas标签，这样可以避免canvas层级过高的问题。 以下是HTML页面处理canvas层级过高的代码示例： ```html <canvas class="canvas-code" canvas-id="QRcode" wx:if="{{!canvasImg}}" style="width: 240rpx; height: 240rpx;"></canvas> <image wx:else src="{{canvasImg}}" style="width: 240rpx; height: 240rpx;" /> ```
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值