解决vue里面的echarts宽度为100px问题、为echarts设置宽度自适应

最新推荐文章于 2024-03-07 15:19:08 发布
最新推荐文章于 2024-03-07 15:19:08 发布
阅读量2k 收藏
点赞数 1
文章标签： echarts vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mrliucx/article/details/120533692
版权

解决vue里面的echarts宽度为100px问题、为echarts设置宽度自适应

问题展示

100px echarts
canvas展示为100px

解决问题后的展示

正常echarts

图片描述

如图所示我通过设置两个并列展示的echarts，每个echarts宽度设置为50%宽度自适应，最后一张图为正常展示效果。

问题描述

在vue使用echarts时我们一般喜欢在created、mounted中直接调用echarts数据初始化，还有在我们给echarts设定宽度时（一定要设置固定像素）才能展示，不能通过百分比来自适应，（高度需要给固定高度，个人比较喜欢用vh定义高度）

问题解决

在vue初始化echarts数据时，一定不能在created、mounted中定义初始化方法，使用vue的$nextTick也无效，个人通过点击事件初始化数据，可以展示正常的echarts，正常效果如下图：
在这里插入图片描述

进击的yuan人
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue tab切换,解决echartst图表宽度只有100px的问题
12-28
解决思路：直接将图表的宽高写死，根据实际代码进行改写，提供一个思路 1.将图表放进一个div里面 2.定义一个方法，并在mounted视图更新的时候执行 [removed] export default { mounted() { this.setMyChart(); }, methods: { setMyChart() { // jq写法 // 获取父元素 var echarts =
vue中动态加入ECharts图表时，ECharts宽度自适应/不能100%撑开
热门推荐
好好学习
06-14 2万+
首先上图吧， 关于vue动态加入echarts时，宽度不能100%的问题，首先上图 如图，echarts中的canvas的width才500，显然不对呀，右边还有那么大的一片空白，需要说明下交互步骤 看看代码， 按钮触发click方法 显示弹窗或者动态加载组件 <span class="btn" @click="showecharts&
vue中echarts设置宽度100%，刷新页面显示100px
最新发布
weixin_43840305的博客
03-07 363
在项目中使用vue的echarts来制作图表，给echarts图表的div设置宽度为100%，在浏览器中刷新页面后，图表缩到一起，宽度显示只有100px，在网上找了各种解决办法，反正对我是没有作用，设置固定宽度，那样没有意义。
vue使用echarts图表自适应的几种解决方案
01-18
1.使用[removed] let myChart = echarts.init(document.getElementById(dom)) [removed] = function () { myChat.resize() } 优点：可以根据窗口大小实现自适应 缺点： 多个图表自适应写法比较麻烦（当一个页面的图表太多时，这样写法不是很灵活）； let myChart1 = echarts.init(document.getElementById(dom1)) let myChart2 = echarts.init(document.getElementByI
vue中设置echarts宽度自适应效果
qq_38210427的博客
04-13 2899
我们使用vue做项目的时候，常常需要做到echarts图表的自适应，一般是根据页面的宽度做对应的适应。本文记录一下设置echarts图表的自适应的步骤。我们先看一下没有做echarts自适应的效果。echart图表本身提供了一个resize的函数，我们只需要监听页面的resize变化以后，去执行echarts的resize方法即可重绘canvas，从而实现对应自适应效果。请看代码中的注释步骤。
vue3+百度 echarts 高度和宽度自适应的优化
吴均的博客
09-12 719
echart在切换table签或者视窗放大和缩小的时候echart不能实时的变更尺寸,那么我们只需要在dom变化的时候调用echart.resize()就行了。
vue3中使用echart，彻底解决宽度100%变成100px
tuku0801的专栏
03-26 1861
vue3+echart的使用，遇到的尺寸显示问题，100%显示为100px的解决办法
VUE渲染echarts图表宽度只显示100px问题
qq_37604998的博客
08-12 1968
今天在处理echarts还遇到一个问题，就是在父组件异步请求拿到数据前，想要默认显示占位图并隐藏图表，开始是使用v-if进行处理，但是渲染报错，提示:Initialize failed: invalid dom【初始化失败：无效的dom】，说明图表渲染的时候，这个dom不存在，但是换成v-show的话就可以展示出来图表。然后看了下官方文档的关于v-if和v-show的区别，如下所示： 由上述看目前只能使用v-show，但是v-show展示图表的时候出现了标题的问题，图表的大小一直为100px，可能是因为渲
解决vue3+echarts关于无法获取dom宽度和高度的问题
黄钢的博客
08-04 5591
不过还有个问题得说一下，很明显，我用了elementplus作为UI框架，我特别喜欢el-card这个组件，所以很多时候我都用它来做布局，但是我在用的时候，发现我很难掌握它的布局规律，尤其是在结合echarts画图的时候，各种dom相关的问题层出不穷，所以我不得不放弃使用el-card，二是自己用div来做布局。第二个报错是说不能获取到echarts对应dom的宽或高，这个问题一般出现在设置dom节点的宽和高时，用了百分比形式，ECharts的宽高默认是以像素为单位的，并不能直接使用百分比来设置。
Vue中使用Echarts可视化图表，宽度自适应解决方案
ZGH_77733的博客
06-28 1960
开发H5项目中应用到Echarts数据可视化，由于H5主要使用在手机，屏幕宽度大大限制了图表的展现，问题如下。上图中x轴的数据是动态的，从2022年切换到2021年数据变化，此时如果x轴的数据过多就会显得格外拥挤。我的解决方案是，在放置Echarts的容器(div)外层再套一层容器(div)，外层容器宽度固定设置手机屏幕宽，并设置溢出显示滚动条(width: 100%;overflow: auto)，内层Echarts容器宽度初始宽为100%，如果数据大于设定的量时，就加大放置Echarts的容器宽度。本以
vue3 根据dom大小动态改变Echarts图表-自定义指令
lucky_zouzou的博客
07-28 1059
vue 使用自定义指令，根据父元素大小动态改变Echarts图表的大小
完美解决vue 中多个echarts图表自适应的问题
10-15
主要介绍了完美解决vue 中多个echarts图表自适应的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中echarts3.0自适应的方法
08-27
主要介绍了vue中echarts3.0自适应，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
（实战项目篇）vue3.0系列（vue2.6-cli3.x）使用echart
一点一滴
12-18 9404
```bash <template> <div class> <div id="myChart" :style="{ height: '500px',}"></div> </div> </template> <script> // 引入基本模板 let echarts = require('ec...
解决 Vue 渲染echarts图表宽度只显示100px问题
huangsy421的博客
12-17 3834
解决 Vue 渲染echarts图表宽度只显示100px问题 刚刚接触vue不久,在开发过程中遇到不少坑,走了很多弯路,其中一个就是在echarts图表加载渲染时,图表的宽度只能显示100px问题,这篇文章记录解决方案,对于像我一样的初学者来说,可能会有一些参考意义. 出现这个问题的情况目前来说我只在 原文：https://blog.csdn.net/u012891460/article/det...
vue3中使用echarts初次渲染图表十分小的问题及解决方法
小绵杨
03-08 2920
项目场景：vue3中引入了echarts图表，在onMounted中初始化图表。vue3中使用echarts初次渲染图表十分小的问题及解决方法
Echarts+vue3 图表在canvas上位置问题
weixin_46382462的博客
04-18 617
Echarts+vue3 图表在canvas上位置问题
echarts出现宽度变成100px的解决办法
qq_39536826的博客
02-07 583
解决echarts宽度出现100px的问题
Vue 中echarts动态修改的容器大小、宽度
林中明月间丶
04-30 2605
https://blog.csdn.net/aerbaba/article/details/81451620 <div style="width: 100%; overflow: auto"> <div id="RobotEchartlen" ref="tendencychart" style="height: 270px" ></div> </di.
vue使用echarts 宽度设置100% 却只有100px
05-11
如果你想让 echarts 图表的宽度设置为 100% 却只有 100px 的问题，一般有以下两种原因： 1. 父元素宽度不足 可能是因为 echarts 所在的父元素宽度不够，导致 echarts 图表只能继承父元素的宽度，最终导致 echarts 图表的宽度只有 100px。可以尝试将 echarts 所在的父元素的宽度设置为 100%。 2. echarts 实例初始化时未设置宽度 使用 echarts 时，如果在实例化 echarts 时未设置宽度，echarts 将默认使用 600px 的宽度，可能导致 echarts 图表的宽度只有 100px。在实例化 echarts 时，可以设置宽度为父元素的宽度，例如： ```js var myChart = echarts.init(document.getElementById('myChart')); myChart.resize(); //自适应宽度 ``` 或者在实例化 echarts 时设置宽度为 100%： ```js var myChart = echarts.init(document.getElementById('myChart')); myChart.resize(); //自适应宽度 myChart.setOption(option); //设置echarts option myChart.resize(); //自适应宽度 ``` 这样就可以让 echarts 图表的宽度自适应父元素的宽度。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值