echarts 弹出层使图表都挤到了一起（解决办法）

最新推荐文章于 2025-05-13 18:48:47 发布
原创 最新推荐文章于 2025-05-13 18:48:47 发布 · 5k 阅读 · 3 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
前端

当前文章被收录于：

前端
4 篇文章 0 人学习
订阅专栏 查看详情
本文分享了在Vue项目中使用ECharts时遇到的图表加载异常问题及解决方案。作者最初将图表配置直接置于mounted钩子中，导致点击加载时图表显示不全。通过将图表配置移至点击事件中，并在渲染后调用resize方法，成功解决了图表显示问题。

今天在项目中遇到一个问题那就是在点击某个区域让页面的弹出层渲染一个echarts图表

我用的是vue搭建的项目因为一开始直接把option直接写在了mounted里面所以点击打开后直接就缩成了一团 使用windos.resize之后也只有在页面大小发生变化的时候才会把图表还原成原来的样子

后来把myChart.option直接写在了点击事件里面，当点击时才会把option渲染到dom元素最后不要忘记resize，这样就解决了。

html代码
在这里插入图片描述
在这里插入图片描述
本人还是一个刚刚培训班培训完的菜鸟，有何不对之处请指正

标签
#echarts
echarts实现柱图的下钻功能
恒二哥的博客
06-23 5061
1、确保已安装了cnpm,使用cnpm命令安装echarts： 2、在main.js文件中，全局引入echarts： 3、创建柱状图HistogramChar.vue文件 4、引用该模块 5、实现效果： 原始数据，第一次加载 点击其中一条后，实现下钻功能，点击返回按钮,可以返回原来数据。.........
微信小程序中当底部弹出框时，背景色置透明灰并覆盖echarts图表
guairena的博客
04-18 2699
需求 需要解决下方图中的问题，当底部弹出弹出框时，需要除弹出框外的元素置为透明灰色。下图是真机效果。 此时，echarts图表依旧高亮显示，需要去掉该高亮效果。 下图是微信开发者工具效果，开发者工具显示正常，真机echarts图表则会高亮。 问题所在 通过微信小程序Echarts覆盖正常组件问题解决该文章知道：Echarts使用的是微信原生canvas，优先级高，z-index完全无效。cover-view 可以覆盖在原生组件之上。 解决方式 将写弹出层使用的 view 组件全部替换成 c..
bar-drilldown-master:使用Echarts实现柱状图的下钻功能
04-28
Echarts实现柱状图下钻功能 [[toc]] 需求描述 在一个月份数据柱状图上，点击柱状图上的某一月份后可显示该月每一天的数据。 实现效果如下： 下钻前 下钻后 实现思路 Echarts本身并没有像HighCharts直接实现柱状图的下钻功能，但Echarts可以通过setOptions间接实现下钻功能。 通过点击月份柱状图的某一月，触发点击事件，点击事件的功能是销毁该Echarts实例，并会向后台请求该月份的数据，当后台返回数据后，进行重新初始化Echarts实例。 实现细节 前端部分 html代码 <!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <
ECharts图表图例11
2301_81687813的博客
10-23 2132
data:['周一','周二','周三','周四','周五','周六','周日']{type:'average',name:'平均值'}{type:'average',name:'平均值'}{type:'min',name:'最小值'}data:['蒸发量','降水量','最低气温','最高气温']name:'最低气温',type:'line',name:'最高气温',type:'line',name:'蒸发量',type:'bar',name:'降水量',type:'bar',
vue2、vue3分别配置echarts多图表的同步缩放
热门推荐
编程知识分享，主打前端
06-16 3万+
大家好！我是yma16。 本文分享在vue2和vue3中配置echarts的多图表同步缩放 背景： 解决echarts的多图表x轴同步联动的问题echarts的datazoom api对外暴露 原理： echarts的实例存在datazoom缩放的方法， 所以只需要在datazoom事件触发其他图表的datazoom即可实现同步缩放 注意： x轴的范围要一致，不然可能会出现偏移
echarts图表挤在一起的问题（亲测有效）
weixin_42064877的博客
07-05 4185
在引用echarts插件图标过程中，使用了bootstrap和标签切换功能，导致只有第一个导航栏有图标，后面的导航栏没有。 经过搜索查找，找到了以下的解决方法： 在css里加上这段代码，就能解决导航栏的图标堆在一起的问题。...
基于Layui弹出层图表分析
愤怒的码农
11-26 1万+
数据可视化可以让数据更加清晰，所以这期我们看如何基于Layui弹出层让数据可视化。实现的效果如下图所示 实现的功能：1、图表类型的切换                         2、数据项配置项 准备工作：1、echarts（这里我采用的是Layui后台管理模板自带的。但是我使用时发现使用百度echarts的api竟然也可以                           ...
【vue+layui+echarts】实现弹出层可编辑的表格和实时变化的图表
周周的奇妙代码之旅
05-24 1725
layui是基于原生js的，跟vue的编程思想不太搭，用这俩主要是因为只是一个作业的单页面应用而已……所以来了三个工具框架的大杂烩，用vue的话还是用基于vue组件化的ui框架比较好。vue在这个实现中……其实没有也行。 点击查看车流弹出弹出层，其中一部分为echart图表，一部分为layui的table组件。 在table中编辑完成后，echart图表便产生了相应的变化。 本来想做成拖拽折线图结点进行操作的，但是以Echart的api来看太麻烦了……就加了layui的table组件来操作了。 .
Echarts实战案例代码(31)：模态框弹出层无法正常显示echarts图表的解决方案
挖掘大数据价值，让决策者快速洞悉趋势，让大众读懂数据背后的故事。
08-20 1375
错误方案： var showContent = "<div id=\"gender2\" style=\"display:block;height: 500px;\"></div>"; layer.open({ type: 1, area: [w + 'px', h + 'px'], title: false, //title: title, maxmin: false, shadeC
Layer+Echarts构建弹出层折线图
vili_sky的博客
12-22 3万+
layer是一款口碑极佳的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富而友好的操作体验。 ECharts 通过提供方便丰富的可视化图表，极大缩短了用户与数据的距离。个人认为是最好用的可用来生成图表的插件。 现在使用Layer和Echarts构建弹出层折线图。
layui做折线图_Layer+Echarts构建弹出层折线图的方法
weixin_39632379的博客
12-20 819
layer是一款口碑极佳的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富而友好的操作体验。在中国可视化生态系统中，ECharts 通过提供方便丰富的可视化图表，极大缩短了用户与数据的距离。个人认为是最好用的可用来生成图表的插件。现在使用Layer和Echarts构建弹出层折线图。下载好所需要用到的工具包，Echarts下载为echarts.min....
Echarts 基本设置 设置图表位置
xqhys的博客
01-22 2万+
在 Echarts 文档中查找设置图标位置，设置条形图的位置，设置饼状图的位置，找到很艰辛。 1、设置条形图的位置通过option.grid的x属性设置图形 x 轴方向距左上角的位置 ，x、y、x2、y2的的含义如下图： 2、设置饼状图的位置通过series.center属性，默认是[50%, 50%]. 看下面的 Echarts 基本配置，很清晰： theme = ...
echarts弹出框tooltip内设置echarts图表
qq_42913167的博客
12-26 1511
在 ECharts 中，在弹出框（Tooltip）内显示一个小图表是一项较为高级的功能，这通常需要结合使用 formatter 函数和一些额外的 HTML/CSS 或 JavaScript 技巧；1、定义 Tooltip 的 Formatter: 在 ECharts 配置中，您需要定义一个 tooltip 项，并在其中使用 formatter 函数来自定义 Tooltip 的内容。这个函数应该返回一个字符串，该字符串是 Tooltip 内容的 HTML 结构。
echarts图表在tab切换中宽度失效
丽丽大神ing的博客
06-20 4651
如果设置了宽度100%，在初始化的时候echarts图表正常显示，但在点击tab切换的时候，发现宽度变为了100px， 主要原因的当前的元素被隐藏了，但是echarts实例还存在 ， 解决办法是：在点击tab切换的时候，先把所有的echarts实例给销毁掉 myChart.dispose();，再给当前显示的元素，调用echarts数据。全部的代码如下： <!DOCTYPE html...
使用百度图表ECharts
sunon_的博客
07-12 1万+
来自ZJBLOG ：使用百度图表ECharts 百度图表已经用过好几次了，但是今天准备把博客的访问情况可视化的时候发现，又得去官网看文档做。 有些还要找，所以记录一下，毕竟这玩意用的比较多。 ECharts官网 ECharts源码包下载 一共做了3个比较简单的图表（复杂的可以很复杂，还是得去官网看文档），效果图： 首先呢，从源码包中拷贝echarts.min.js到项目中...
Echarts图表的提示框被遮盖问题解决
最新发布
2303_78263863的博客
05-13 1328
appendToBody: true 是一种前端配置选项，用于将元素动态插入到 <body> 标签的末尾，而非默认的父级容器内。其核心作用是避免父级样式或布局的约束，确保元素在视觉上正确定位。典型应用场景包括弹出层、下拉菜单、工具提示和动态表单等，这些场景中父容器的样式或布局可能限制子元素的显示。使用该选项时，需注意手动计算元素位置、处理事件冒泡、优化性能以及组件销毁时清理元素，以避免内存泄漏。appendToBody: true 是解决父容器布局限制导致子元素显示异常的常用方案，广泛应用于需要
Axure RP9 引入eCharts图表
M_try的博客
09-28 4268
Axure rp9 手动引入Echarts图表详细步骤
【微信小程序】引用echarts 在真机上预览图表模糊的解决办法
A_lin的杂货铺
04-01 2686
1.获取移动设备的像素比 获取系统信息 ==> wx.getSystemInfo() API说明：wx.getSystemInfo() const getPixelRatio = () => { let pixelRatio = 0 wx.getSystemInfo({ success: function (res) { ...
ECharts图表图例1
2301_81687813的博客
09-23 1569
绘制标准条形图
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值