小程序中，echarts层级太高盖过了自定义时间组件问题

最新推荐文章于 2025-04-18 10:12:17 发布
最新推荐文章于 2025-04-18 10:12:17 发布
阅读量1.3k 收藏
点赞数 1
分类专栏： 前端 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42912237/article/details/115304550
版权
博主分享了在使用Echarts绘制柱状图时遇到的时间组件被遮挡的问题，尝试多种解决办法无效后，最终采用了一种巧妙的方案：通过在显示时间组件时隐藏Echarts图层，时间组件隐藏后再显示图层，成功解决了两者重叠的困扰。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.使用echarts画了两个柱状图，结果盖过了自定义的时间组件，如图：
在这里插入图片描述

在网上找了各种解决方式都没起作用，最后还是想了个偏方解决的，方法是：在显示时间组件的时候隐藏echarts的图层，时间组件隐藏后显示echarts图层，完美解决

前端(小程序) echarts图表 tooptip 层级过高导致弹层覆盖其他组件问题
闫瑞锋的博客
11-23 1118
小程序使用echarts tooltip层级过高导致覆盖其他组件 解决方案
解决微信小程序Echarts图表层级过高的方案
BkjqAws的博客
09-17 2044
确保图表容器的父元素以及其自身的样式中，没有设置过高的层级。可以通过在微信小程序的WXML文件中查找图表容器的类名或ID，并检查对应的样式文件（通常是WXSS文件）中的层级设置。本文将介绍一种解决方案，通过修改Echarts图表的样式和配置，可以有效解决这个问题。综上所述，通过检查图表容器的样式以及调整Echarts图表的层级配置，我们可以解决微信小程序中使用Echarts图表时层级过高的问题。需要注意的是，在修改Echarts图表的配置时，需要确保调整的配置项是有效的，并且符合Echarts的规范。
【微信小程序】echart中canvas原生组件层级太高遮挡vantui中的组件
weixin_41106665的博客
01-13 1387
【微信小程序】echart中canvas原生组件层级太高遮挡vantui中的组件
微信小程序canvas组件层级最高覆盖其他元素的解决方法
Krystal优快云的博客
12-08 4409
问题描述 小程序中引入echarts官方组件，发现绘制出的图形总是处于页面最上层，在需要使用时间选择器时影响了picker-view的展示，需要移到下层。 尝试方法 1.z-index ec-canvas图形组件设置position并设置z-index:0，时间选择器设置position和z-index：1，没有效果。 2.用svg渲染 小程序不支持，echarts官方只有canvas版本的组件 原因分析 微信官方文档中看到这样的提示： 最终解决 想法来源：https://git
一文解析微信小程序Echarts动态使用及图表层级踩坑解决方案
最新发布
健健的博客
04-18 349
最近收到一个需求，要在小程序上去做数据看板，能让公司运营和老板看到那些销售的数据情况。这就导致需要我去重新捡起Echarts了，距离上一次用它还是五年前了吧。不过好在现在的Echarts已经能很好的适配微信小程序了，不需要处理一些额外的bug，只需要看着官方的案例和文档去做就行。但是，官方给的Echarts示例都是简易的、静态的，数据也都是固定的，还得需要自己去做动态适配，在做的过程中，还发现了当使用Vant组件弹出层置顶的时候，底部的Echarts图的层级会盖住弹出层的层级。
微信小程序echarts层级太高
dicuan0092的博客
09-04 3447
项目中因为需求，底部的tab导航栏是自己写的，在开发者工具中一切正常；但是在真机上页面滑动时，echarts的层级比tab高，调过两者的z-index后仍然如此。 经过查找后发现cover-view和cover-image替换tab的view后，可以解决以上的问题。 <!--底部公共tabBar--> <cover-view class="tabbar-con...
echarts层级过高遮挡其他组件问题
前端开发工程师博客
01-15 3444
微信小程序echarts层级过高 遮挡其他组件问题
微信小程序：echarts层级太高，遮挡van-popup弹框组件
Wjk20011127的博客
05-24 577
1、使用hidden（注意，不能直接加在组件上，需要外层包裹一个view）
微信小程序使用echarts层级过高问题
XismYan的博客
01-30 1204
可以去wxml看看是不是在echarts元素上设置了force-use-old-canvas="true"在小程序里面使用echart，层级过高会被遮挡。研究了很久，最终把这个删掉，就可以了。
uniapp 如何使用echarts 以及解决tooltip自定义不生效；dataZoom报错问题
GongWei_的博客
01-12 4002
uniapp如何使用echarts并且如何自定义tooltip，以及echarts层级太高怎么办
taro引入f2图表_Echarts在Taro微信小程序开发中的踩坑记录
weixin_39684454的博客
12-20 270
背景近期笔者在使用Taro进行微信小程序开发，当引入Echarts图表库时，微信检测单包超限2M的一系列优化措施的踩坑记录，期望能指导读者少走一些弯路。为什么选择Echarts？微信小程序目录市面上使用最多的两款图表库，如下：wx-charts——基于微信小程序的图表库对比两款图表库优缺点刚好相反。echarts-for-weixin：功能强大，但体积非常大wx-charts：功能相对简单，但体积...
mpvue小程序以及微信直播踩坑总结
Tong_11的博客
08-07 3041
前段时间刚写完一个mpvue的小程序，现在得闲必须赶紧记录和总结一下，不然很多东西又要忘了 我是比较熟悉vue的语法，但是也犹豫过是用原生还是用mpvue，因为那时候原生小程序已经相当成熟而mpvue才刚出来（踩坑和填坑的前人还很少） 所以我学习了几天原生的框架和语法，果断选择了mpvue，真的是没有对比就没有伤害，对比原生体验不要太好 mpvue是一个使用 Vue.js 开发小程序的前端框...
提高van-popup层级
08-30
- *3* [微信小程序：echarts层级太高，遮挡van-popup弹框组件](https://blog.youkuaiyun.com/mouday/article/details/121626561)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":...
使用echarts，里面的canvas层级太高怎么办
热门推荐
weixin_40918145的博客
07-03 1万+
一开始是想给被遮盖的地方用z-index最高级，发现没有用，后来给canvas绑定的id，给其第一个div设置z-index: 1，就可以解决了 #echarts>div{ z-index: 1 } ...
微信小程序echart图表canvas层级太高覆盖解决办法
天天打码-16年老码农
04-25 3257
最近在使用echart图表时，发现滚动页面时，echart图表层级覆盖原生组件，设置z-index无效。发现原来的echarts-for-wx组件里有个方法。
解决 echarts 层级太高 cover-view无效的问题
weixin_47124112的博客
03-02 2865
常见的是需求是：顶部固定，其他内容可以滚动 ，这时你会发现绘制的图形是会。
echarts 等图表组件层级太高其它样式层级不生效
weixin_45554952的博客
06-14 1903
最近在页面设置一个悬浮图标，但是真机滑动的时候，曲线图遮住了悬浮图标 原代码 <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
解决echart图表层级太高 cover-view无效的问题
coca_cola_1105的博客
01-07 4418
解决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的tooltip框的层级比el-dialog的遮罩层的层级高的问题
qq_49698477的博客
06-05 465
echarts的tooltip框的层级比el-dialog的遮罩层的层级高，要让dialog的遮罩层显示在tooltip之上，可以在tooltip里面配置extraCssText:"z-indsex:9"注意：dialog的层级是2007。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值