简单粗暴解决echarts宽度为100px问题

最新推荐文章于 2024-07-02 14:57:06 发布
最新推荐文章于 2024-07-02 14:57:06 发布
阅读量5.9k 收藏 6
点赞数 5
分类专栏： 前端 文章标签： 前端 echarts elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/manmanwei/article/details/112176058
版权
在ElementUI的tabs组件内使用Echarts时，由于tabs的切换是通过display:none实现，导致除默认显示图表外，其他图表宽度变为100px。一种简单的解决方法是利用Vue的v-if指令，避免echarts在未显示时初始化。其他解决方案包括element.resize()、监听窗口resize事件或采用懒加载，但可能实施起来不那么直接有效。
摘要由CSDN通过智能技术生成

问题出现场景

elementUI的tabs组件中使用echarts，在切换过程中，echarts宽高失效，只有100px。
问题原因： tabs中的标签是同时渲染的，通过display:none来控制标签的切换，所以除了默认展示的那个标签echarts100%能正常生效，其他的会默认为100px。

简单粗暴的解决方法： v-if

看了一些文章，有element.resize()的，也有window.addLisener(‘resize’)的，也有懒加载的。弄了半天没生效，我就简单粗暴的用v-if了
在这里插入图片描述在这里插入图片描述
结果
在这里插入图片描述在这里插入图片描述在这里插入图片描述

manny-liu
关注
  • 5
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Echarts图表宽度变成100px，让图表宽度随着父元素自动适应，Vue实时监听宽度的变化，这可能是史上最好的解决方案！...
weixin_34113453的博客
01-31 1544
最近工作中element后台管理使用Echarts图表，本后台项目分图表模式和列表模式，使用display控制显示隐藏，这样就引出了本文的问题。 问题1：Echarts图表宽度变成100px？ 问题2：怎么让Echarts图表宽度随着父元素自动适应？ 　　网上对于这两个的解决方案大同小异，手动的记录父元素的宽度，或者侦听display属性，解决方案要么感觉极其复杂，要么治标不治本， 这...
echarts设置容器宽度设置为100%只显示100px宽度
呱呱的博客
12-13 6462
问题：前面的tab栏里面的柱形图表都是100%的宽度，最后一个换成折线图时出现宽度无法自适应的情况。 <div class="environmentChart" > <div class="chart-wrap" id="environmentChart"></div> </div> 解决一：通过...
echarts的宽度100%不生效的问题
最新发布
duyanli7780com的博客
07-02 530
原因是，我在页面中使用了tab切换，这时图表的父容器div是隐藏的（display：none），图表在执行js初始化刷新的时候找不到这个元素，所以echarts就默认给自己设置了100px的宽，也就是自动将“100%”转成了“100”，最后计算出来的图表就成了100px。首先先看问题图片，我在折现图的div设置了宽度100%，但是在页面上实际只有100px宽度。echarts的宽度100%不生效的问题。
使用echarts宽度100%变成100px问题（一招搞定）
m0_48507640的博客
08-02 8630
**前言：**每个开发者在使用echarts制作图形过程中，多多少少都会踩到一些坑，比如图形宽高问题，图形清晰度问题。 今天要说的是当图形宽度设置是100%时，切换tab后变成了100px了，如果已经设置了自适应，那么手动去改变浏览器屏幕的宽，会发现图形又恢复正常了。 原因：切换tab时，元素本身就是存在的，只是样式被设置成display: none，那么宽高为0px；echarts对图形最小的默认为100px，所以就会出现这样的情况。 解决问题过程中，在网上看到的帖子里，发现很多并不能解决到问题。 比如：
【Echarts】Echarts 图表宽度设置100%，图表显示只有100px的问题
m0_61049675的博客
01-29 1468
图表的父容器设置了 display：none，图表在执行js初始化的时候找不到这个元素，所以自动将“100%”转成了“100”，最后显示出来的图表就只有100px；
echarts出现宽度变成100px的情景及解决方案
xu_xu_0924的博客
11-02 1342
1.tab页切换echarts图表时图表变形 var charts=new Array(); myChart.setOption(option); charts.push(myChart); //普遍的tab切换 $(window).resize(function() { for(var i = 0; i < charts.length; i++) { charts[i].resize(); }
echart图表设置宽度100%，结果显示100px问题解决
qq_45949366的博客
08-07 3153
echarts结合tab时，初次渲染组件moutnted的时候，未显示tab内的组件display为none，echarts无法获取父组件的高度100%，而转换成100px显示； 有网友通过 mounted的时候获取window.innerWidth，根据innerwidth设置echarts的宽幅，如：domBugChart.style.width = window.innerWidth * 0.8 + ‘px’; 但这也相当于写死，如果window.innerWidth发生改变，echarts无法自适.
echarts图表宽度只有100px
xjh01的博客
10-01 980
原因是用了el-tab组件导致的，解决方法： var myChart=document.getElementById("#myChart"); //获取元素 //重要：给元素设置宽度 myChart.style.width=window.innerWidth+'px'; chartObj=echarts.init(myChart); //初始化图表 chartObj.setOption(option); //给图表配置设置 ...
Angular4开发解决跨域问题详解
08-29
这种方法简单粗暴，但是不够灵活和可靠。 使用nginx反向代理实现跨域是解决跨域问题的另一种方法。nginx反向代理可以将多个服务器上的url转发到同一个域名、端口和协议下，从而解决跨域问题。这是一种通用的解决...
简单粗暴 TensorFlow 2.0
10-12
简单粗暴 TensorFlow 2.0
jasper简单粗暴解决中文导出pdf
05-30
标题中的“jasper简单粗暴解决中文导出pdf”指的是在JasperReports中解决中文字符在PDF导出时的显示问题。通常，这需要添加对中文字符集的支持，比如引入专门处理中文的字体文件。在描述中提到的解决方案可能是通过...
vue tab切换,解决echartst图表宽度只有100px的问题
12-28
解决思路：直接将图表的宽高写死，根据实际代码进行改写，提供一个思路 1.将图表放进一个div里面 2.定义一个方法，并在mounted视图更新的时候执行 [removed] export default { mounted() { this.setMyChart(); }, methods: { setMyChart() { // jq写法 // 获取父元素 var echarts =
简单粗暴学蓝牙4.0（CC2541篇）.pdf
03-25
简单粗暴学蓝牙 简单粗暴学蓝牙4.0（CC2541篇）
PDF在线预览懒汉专用简单粗暴版
02-21
本教程将引导你了解如何利用pdf.js库实现一个“懒汉专用”的简单、粗暴版PDF在线预览系统。 **一、pdf.js介绍** pdf.js是Mozilla开发的一个JavaScript库，专门用于在Web浏览器中显示PDF文档。它支持多种现代浏览器...
echarts宽度100px问题
前端劝退工程师
03-07 1640
tab切换时发现设置了容器的宽度 都会渲染成100px 解决办法 myChart.resize()
Vue渲染echarts图标时候，宽度只显示100px的解决办法
qq_42853710的博客
09-28 1751
出现这个问题的关键在于JS方法初始化的时候，无法获取到父元素的宽度，所以默认显示100px 解决方法 Vue为我们提供了$nextTick来处理这个问题，在下次DOM更新循环结束后再去执行延迟回调，数据更新后，立即使用这个方法，获取更新后的dom。 一下代码中加入了当图标无数据的时候，一张暂无数据的png作为占位符 <template> <div class="chart_content"> <!-- 图表 --> <div v-show="is
echarts切换tab,图表设置宽度100%结果为100px
hantanxin的专栏
05-14 545
当echarts绘制表格（也就是执行init方法）计算宽度的时候，由于初始化图表时外层div盒子的属性为display:none，所以无法获取到盒子的clientWidth（可视化宽度），而parseInt(stl.width,10)将宽度100%转换成了100（这里的stl.width，就是外层的div的样式中的width属性，因为我们初始时设置了100%，所以这里可以获取到），所以。，在监视中（watch），要配合nextTick方法使用，这样才能完全确保初始化之前，外部盒子已经存在于dom树中。
echarts图表设置宽度100%结果为100px
m0_67108146的博客
08-20 5841
解决echarts图表设置宽度100%结果为100px问题
echarts宽度100%变成了100px (实用）
chelen_jak的专栏
11-05 3923
原文出处：https://www.cnblogs.com/SoundOfTheSea/p/7699683.html 延伸阅读：echarts图表自适应，容器宽度设置为百分数，但是图表显示不全，缩到一起 这几天在做折线图，先是用的chart.js，但是chart.js会出现纵轴不显示数字，宽度不能设置百分比只能设置定值，而且图像重绘之后需要鼠标移到折线图的数据点上才会出现图像，找了半天也没有...
不考虑其他问题，简单粗暴怎么解决
06-09
如果你只是想简单粗暴地解决这个问题，可以通过以下方法： 1. 重启 MySQL 数据库服务。 2. 清空 MySQL 数据库中的锁表，可以使用以下命令： ``` mysql> FLUSH TABLES WITH READ LOCK; mysql> UNLOCK TABLES; ``` 请注意，这种方法可能会导致数据不一致或者丢失，因此不建议在生产环境中使用。如果你必须使用这种方法，请确保在执行操作之前备份好数据，并在操作完成后进行数据恢复。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值