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

最新推荐文章于 2024-06-04 12:53:07 发布
最新推荐文章于 2024-06-04 12:53:07 发布
阅读量4.7k 收藏 3
点赞数 2
分类专栏： 前端 文章标签： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SoQBulingBuling/article/details/102538301
版权

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

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

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

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

「已注销」
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue第3篇，在Vue项目中，点击切换tab栏时Echarts图表缩小在一起，宽高只有100px，解决方法（echarts图表缩小在一起，echarts图表大小随窗口变动而自适应，无需刷新）
weixin_65793170的博客
10-31 4322
ECharts（Enterprise Charts）是百度开发的一款基于 JavaScript 的开源可视化图表库，用于在 Web 页面中创建各种丰富多彩的交互式图表和数据可视化界面。这里来记录一下，在使用ECharts时，拖拽页面后，ECharts缩小的问题
微信小程序在ios下Echarts图表不能滑动的问题解决
10-16
主要介绍了微信小程序在ios下Echarts图表不能滑动的解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,下面我们来一起学习下吧
Echats 使用问题汇总及解决方案
qq_1518671828欢迎打扰
12-08 288
echats
echarts图表点进去图表被挤压解决办法
weixin_66996746的博客
04-23 1177
【代码】echarts图表点进去图表被挤压解决办法。
echarts页面切换,导致图缩成一团（解决办法）
最新发布
weixin_38345306的博客
06-04 339
echarts页面切换,导致图缩成一团（解决办法）
echarts图渲染问题：解决图不正常显示，图缩到一起了，清空图表数据，随窗口变化自动缩放问题(vue)
qq_36711388的博客
08-13 8805
echarts图是常用的数据展示图表插件，在运用过程中可能会遇到各种问题，下面我总结一下我在项目开发中遇到的问题： 在切换tab页的时候，很容易出现图缩到一起了，如下图： 重新加载数据，图任然有数据 图形不随窗口放大缩小 解决方案： 初始化ehcarts与数据渲染，不用加echarts实例化是否存在，不加判断会报错 按照以下步骤，不但可以解决以上问题还可以避免报错： 首先，将初始化的ec...
解决vue中echarts页面进入缩成一团的问题
qq_37622750的博客
05-21 3345
解决vue中echarts页面进入缩成一团的问题 直接看效果 解决过程 初始化函数添加$nextTick() this.$nextTick(()=>{ this.initCharts(); }) 给echats组件添加v-if 给setOption设置定时器 mounted初始化中添加定时器 最终解决思路 echarts的父组件是整个页面的子组件，父组件使用的transition，使用的v-show，这就导致了组件在进入页面时直接加载，
基于Vue2 和ECharts5封装的组件解决图表配置繁琐，使代码更整洁.zip
06-15
基于Vue2 和ECharts5封装的组件解决图表配置繁琐，使代码更整洁 组件介绍： <charts/> 基础组件，主要用于生成布局和图表。 <charts-legend/> 图例组件，主要用于生成图表的图例， 配置项 。 <charts-series/> ...
echarts图表导出到excel
12-19
echarts图表导出到excel中的解决方法，做个备忘录，以防忘记
基于Echarts图表在div动态切换时不显示的解决方式
10-15
确保图表的容器有明确的宽度和高度，这样才能使Echarts正确渲染。 另外，如果遇到切换后页面空白，可能是因为Echarts在初次加载时没有正确初始化。一种解决方法是在页面初始化时调用隐藏的Echarts图表，然后调整...
解决百度Echarts图表坐标轴越界的方法
10-17
本篇文章将详细介绍如何解决Echarts图表坐标轴越界的问题，以及提供实用的示例代码来帮助你理解和解决此类问题。 首先，我们需要了解Echarts的坐标轴设置。Echarts提供了`xAxis`和`yAxis`两个配置项来定义坐标轴。...
【Echarts】点击事件,点击柱状图柱子实现下钻
m0_67372185的博客
11-27 853
点击柱状图柱子实现超下钻
echarts实现向下钻取
仅次于狼的博客
08-23 4100
实现一个向下钻取的效果：柱形图点击柱子则钻取，点击柱图空白返回。 line_chart1 = echarts.init(document.getElementById('lineChart1')); line_option1={ backgroundColor:'#0B2F64', title : { show:true, text: '这是一个标题', ...
vue结合echarts使用时出现重大bug（图缩成一团）
青春不打烊的博客
05-07 2205
问题出现原因： 我在本地引入了echarts 把当前页面做成公共的组件给其他页面使用。（目前为止没有问题） 直接打开当前页面显示正常：（下图正常） 但是当引入到别的页面（问题出现） （下图是问题图片）缩成一团 原因：在组件显示的时候用了v-show，会给echarts画布默认一个宽度和高度 改成 v-if 就没有问题了。 ...
echarts堆叠、渐变、圆柱、底部发光柱状图
weixin_42812634的博客
04-08 2089
echarts柱状图堆叠、渐变、圆柱、底部发光
echarts 柱状图点击下钻，点击外部按钮可返回
qq_40295815的博客
10-28 2019
<!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div style="margin-left:40%;margin-top:2%"> <button id='return-button' value=''.
echarts积累之--图表下钻
weixin_58031521的博客
02-24 3552
echarts积累之图表下钻
点击echarts弹出el-dialog
12-13
4.在弹窗的mounted钩子函数中初始化echarts图表，并将图表实例保存到data中，例如： ```javascript data() { return { chart: null } }, mounted() { this.chart = echarts.init(this.$refs.echartsContainer);...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值