关于渲染echarts图表宽度只显示100px

最新推荐文章于 2023-11-24 15:27:00 发布
最新推荐文章于 2023-11-24 15:27:00 发布
阅读量801 收藏
点赞数 1
分类专栏： 笔记 文章标签： echarts 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jet_Lover/article/details/128223577
版权

如图本来渲染echarts 写的css样式为

   width: 100%;
   height: 300px;

渲染出来页面却变成了这样
在这里插入图片描述
审查元素发现
在这里插入图片描述
元素宽度变成了100px,
在这里插入图片描述
本来应该为658px的。但是变成了100px,最后发现这个弹框用的v-show渲染的，
把v-show缓存v-if就好啦

应该是eharts中dom元素渲染的原因

最后看效果
在这里插入图片描述

Jet_closer
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
基于Echarts图表在div动态切换时不显示的解决方式
10-15
主要介绍了基于Echarts图表在div动态切换时不显示的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
记录问题：解决echarts设置宽度100%，结果变成了100px（通过display控制echarts显隐也存在这个问题）
最新发布
weixin_48677331的博客
03-05 808
一个项目中，通过按钮控制echarts的显隐，设置echarts的宽高为100%，刚开始没问题，但是通过按钮控制显隐的时候，发现echarts并未显示，但是通过chrome调试，可以发现echarts已经初始化完成，但是显示的canvas的大小为100*0，如下图显示。因此，可以判断，出现这样问题的原因是：使用百分比显示，再通过按钮控制显隐的话，是echarts没有自适应宽高引起的，所以需要再打开echarts的方法中添加echarts的resize()方法，让它重新计算。
echarts使用v-if或v-show图表宽度100px
灵壹Eli的博客
04-18 386
实现柱状图使用了v-if或v-show做判断时，柱图要么显示一半要么不显示，使用v-if的时候，当条件为false时，会出错，因为此时div是不存在的，所以无法对图表进行初始化。v-show结构已经存在，当数据发生变化时，结构并未重新渲染，会出现 echarts 图表未获取到最外层大盒子的宽度而显示一半的情况。
解决Echarts图表使用v-show,显示不全,宽度仅100px的问题
weixin_44293690的博客
05-24 1510
百度了各种资料结果都以失败告终,最后使用一下定时器就好 了只需要设置延迟一秒图表就可以正常显示。
echarts出现宽度变成100px的解决办法
qq_39536826的博客
02-07 601
解决echarts宽度出现100px的问题
echarts设置容器宽度设置为100%只显示100px宽度
是程序喵呀
11-24 1965
原因很简单，在tab页中，图表的父容器div是隐藏的（display：none），图表在执行js初始化的时候找不到这个元素，所以自动将“100%”转成了“100”，最后计算出来的图表就成了100px。在使用echarts时，写在tab页中的图表宽度明明设成了100%，但是在页面上实际却只有100px宽。好了废话少说直接说解决方案。echarts的width不能适应100%但是他的父级可以哦。Echarts在你不确定内容宽度时给他设置宽度为100%去适应宽度但是不能实现。
解决vue中echarts图自适应问题，设置100%宽度显示100px
apple_52148181的博客
07-03 2462
data(){ myChart:null, echarts_option1:{}, }, methods:{ setEcharts() { let myChart = document.getElementById("myChart"); myChart.style.width = window.innerWidth - 290 + "px"; //初始化echarts图表宽度
在Vue 中实现循环渲染多个相同echarts图表
10-15
在Vue.js应用中，循环渲染多个相同的Echarts图表是一项常见的需求，这通常涉及到数据驱动视图的概念，即根据数据动态生成多个组件。以下是一个详细解释如何实现这一功能的方法： 首先，确保你已经在项目中安装了...
vue tab切换,解决echartst图表宽度只有100px的问题
12-28
解决思路：直接将图表的宽高写死，根据实际代码进行改写，提供一个思路 1.将图表放进一个div里面 <div class=echarts> <div id=myChart xss=removed></div> 2.定义一个方法，并在mounted视图更新的时候执行 ...
解决echarts图表使用v-show控制图表显示不全的问题
10-15
因此，当数据请求完成后，我们可以在`nextTick`的回调中重新渲染Echarts图表，确保图表能正确获取到容器的宽度和高度，从而避免显示不全的问题。 示例代码如下： ```javascript axios.get('/api/data').then...
echarts图表导出excel示例
09-04
总结来说，ECharts图表导出Excel的过程涉及到前端的图表渲染、图片数据获取，以及与后端的通信和数据处理。通过以上步骤，用户可以方便地将ECharts图表中的数据导出为易于分析和分享的Excel文件。在实际应用中，需要...
Echarts 图表宽度设置100%，却只有 100px 问题
mocheng0的博客
08-02 2497
当无数据时，要用echarts.init(dom).dispose()来清除画布，而不能用clear。需求有图表数据时展示数据，无数据时展示'暂无数据'，且在有数据和无数据的切换过程中，图表正常显示。避免echarts图表宽度只有100px。......
el-tab 内嵌echarts图表设置宽度100%结果为100px的解决办法
weixin_41693437的博客
09-22 492
解决方法：外部div盒子必须要在init初始化前就已经存在于dom树中（也就是已经挂载）。在监视中（watch），要配合nextTick方法使用，这样才能完全确保初始化之前，外部盒子已经存在于dom树中。主要原因：图表设置了display:none属性上（属性含义：不为被隐藏的对象保留其物理空间，关闭元素的显示，并且所有后代元素不显示。
解决Vue中v-show控制echarts图表显示但图表宽度为100px问题
sinat_34241861的博客
04-16 5242
问题出现场景 在vue项目中，使用v-show控制div元素的显示，div标签中是echarts图表，自定义的echarts CSS样式是width为100%，但实际显示时图表宽度确为100px 实际代码 父组件代码 <template> <div> <div v-show="showMain"> <div style="backgro...
echarts图表宽度只有100px
xjh01的博客
10-01 967
原因是用了el-tab组件导致的，解决方法： var myChart=document.getElementById("#myChart"); //获取元素 //重要：给元素设置宽度 myChart.style.width=window.innerWidth+'px'; chartObj=echarts.init(myChart); //初始化图表 chartObj.setOption(option); //给图表配置设置 ...
echarts 图设置高度_Echarts 自适应宽高 vue
weixin_26716079的博客
01-14 8172
思路1.将图表包括在一个div中(该div设置了固定的宽高，可为百分比)2.由于不能直接设置rem进行适配,需要动态计算出'id = chart'的高度setChartHeight() {//根据自己需要调节图形大小,我的图形是放在中let mainHeight = this.$refs.elBox.offsetHeight$("#chart").css("height", mainHeight ...
echart宽度100px原因（解决el-tabs里的echarts图表宽度不自适应，只有100px问题）
IT_dabai的博客
11-09 2031
首先echart初始化的组件宽度设置了width: 100%，那么本来这个时候，echart图表会根据父级自适应宽度。但因为el-tabs标签页，一开始的状态是display：none，也就是没有宽度，这个时候ehcart获取不到父级宽度，就会默认的给一个100px的宽度
使用echarts宽度100%变成100px问题（一招搞定）
m0_48507640的博客
08-02 8387
**前言：**每个开发者在使用echarts制作图形过程中，多多少少都会踩到一些坑，比如图形宽高问题，图形清晰度问题。 今天要说的是当图形宽度设置是100%时，切换tab后变成了100px了，如果已经设置了自适应，那么手动去改变浏览器屏幕的宽，会发现图形又恢复正常了。 原因：切换tab时，元素本身就是存在的，只是样式被设置成display: none，那么宽高为0px；echarts对图形最小的默认为100px，所以就会出现这样的情况。 解决问题过程中，在网上看到的帖子里，发现很多并不能解决到问题。 比如：
Vue渲染echarts图标时候，宽度只显示100px的解决办法
qq_42853710的博客
09-28 1721
出现这个问题的关键在于JS方法初始化的时候，无法获取到父元素的宽度，所以默认显示100px 解决方法 Vue为我们提供了$nextTick来处理这个问题，在下次DOM更新循环结束后再去执行延迟回调，数据更新后，立即使用这个方法，获取更新后的dom。 一下代码中加入了当图标无数据的时候，一张暂无数据的png作为占位符 <template> <div class="chart_content"> <!-- 图表 --> <div v-show="is

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Jet_closer

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值