echarts初始化宽度小于容器宽度

最新推荐文章于 2024-05-16 10:23:58 发布
最新推荐文章于 2024-05-16 10:23:58 发布
阅读量1.1k 收藏
点赞数
分类专栏： 项目遇见的bug及解决方法 文章标签： echarts javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45363639/article/details/126477114
版权
本文探讨了在Echarts容器尚未显示时如何避免其占用空间的问题。作者分享了两种方法：一是将容器的`display`属性改为`opacity: 0`并调整布局，二是确保容器存在后再初始化Echarts。最终采用了后者以减少空间浪费。
摘要由CSDN通过智能技术生成

查找资料是因为echarts的容器还没有创建出来的时候echarts就已经加载出来了，因为获取不到容器的宽高就会默认宽高100%是100px。所以会缩小在一起。

因为我的代码中，echarts的容器的最外层的div给的样式是display:none；所以我将display：none;改为了opacity：0,之后再使用这个页面的时候设置opacity：1,这个方法的缺点是：opacity为0时，仍然占用它的页面空间，只是透明度为0，所以看不见，所以将这个最外层的div放在了它的同级元素的最后面，给父级设置了overflow：hidden。（不推荐使用）

还有一种方法是在保证页面加载出echarts的容器时，在将echarts去init。（最后采用了这个方法）

拿了橙子跑哇
关注
专栏目录
Python数据可视化 Pyecharts 制作 Map3D 三维地图
Mr数据杨
06-15 4万+
大家好，我是Mr数据杨，就像在《三国演义》这部史诗中，为了更好地制定战略和战术，诸葛亮，郭嘉，周瑜等蜀，魏，吴三国的谋士们，都需要对整个战场的三维地理环境有着深刻的理解。比如，在赤壁之战中，周瑜就巧妙地利用了赤壁地区的风向和江流来布下火攻战术。同样地Python 3D地图学习之旅中，'基本设置’就好比是三国谋士们对战场的基本布局和地形的了解，包括地势高低、江河走向等信息；'数据选项设置’和’地图类型选项设置’这两部分则像是他们根据自己军队的实际情况和战术需求，对战场的深度解读和运用；
Echarts初始化显示很小
weixin_50976410的博客
03-19 839
上面我设置外部盒子和echarts盒子的宽度都是100%我的父组件宽度也是100%导致出现这样的原因是 echarts在初始化的时候没有指定宽高导致的，所以我查了echarts官方文档里是这样说的。我让echarts盒子根据数据是否存在来判断是否渲染，这样相当于是数据再渲染的时候会再次设置这个宽度这样初始化就不会出现宽度只有一半或者显示不全的问题了。所以我的解决办法是这样的，利用echarts需要渲染的数据进行判断如果有值那么自然会渲染echarts这样就避免初始阶段拿不到宽度的情况。
Echarts canvas大小和容器不一致
qq_42039817的博客
02-23 2703
const ele = document.getElementById('id'); setTimeout(() => { // 基于准备好的dom，初始化echarts实例 const myChart = echarts.init(ele, '', { width: document.getElementById('id').offsetWidth }); // 绘制图表 const op
Echarts设置容器宽高为rem，初始化加载会缩小
yuanwen52的博客
11-01 2511
1、问题：这两天写的APP需要在一个页面中使用echarts图表，发现一个问题：在进入改页面初始化时，图表会缩小。但是把容器宽高设置为px就可以了，但是写的移动端需要适配必须rem。 2、问题根因：div还没有创建出来echarts就已经加载了，因为获取不到宽高就默认宽高100%为100px。 3、解决方法：给echarts设置延迟加载。 mounted() { this.drawAssetTrendChart(); }, methods: { drawAssetTre.
解决Echarts首次加载小的问题
Zning_的博客
09-22 2043
echarts问题解决
[echarts]echarts的canvas画布大小与容器大小不一致的解决方案
bbt953的博客
11-14 8246
echarts的canvas画布大小与容器大小不一致的解决方案
echarts中的canvas画布大小与容器大小不一致
最新发布
m0_71933288的博客
05-16 693
我们在放置echarts统计图容器外添加一个标签并设置我们想要的宽高，再将容器内的。就可以让canvas画布与容器大小一致了。
vue echarts中改变canvas长和宽 自适应
tangyuan的博客
02-17 9690
存放Echarts的DOM容器，如果给的高和宽是百分比，渲染的时候DOM容器的高和宽是按百分比给的，但是DOM容器下的子元素div和canvas高和宽是根据图标内容渲染。项目应用的时候，底部会有一部分DOM容器和div的高度差，不美观。 希望Echarts的canvas和DOM容器的高宽一致。 下面给出代码： <template> <div id="main"><...
echarts教程文档1
08-03
3. **初始化ECharts实例**：通过JavaScript获取这个`<div>`元素，并用`echarts.init()`方法初始化ECharts实例。 4. **指定配置项和数据**：定义一个名为`option`的对象，包含图表的类型、数据、轴信息等配置。 5. ...
数据可视化(Echart)以及监听尺寸变化
weixin_68500850的博客
07-13 735
监听尺寸的变化
vue中echarts初次加载图很小的问题
牟云飞的博客
05-11 4663
vue中echarts初次加载图很小的问题
echarts地图首次加载很小问题
2201_75550069的博客
02-07 510
在网上跟着老师写了一个echarts可视化项目，最后的模拟航线地图部分首次加载时很小，而且不能调整大小，在网上找到了解决方法。把代码写在 window.onload = function () {} 里面就解决了。
echarts图表刚加载进来缩在一起
sumimg的博客
01-02 4857
echarts图表刚加载进来缩在一起 需要用（$nextTick）初始化DOM操作 const elementResizeDetectorMaker = require("element-resize-detector"); import echarts from 'echarts' mounted(){ var erd = elementResizeDetecto...
关于在Vue中使用echarts在初始化页面时，echarts宽度有问题
rice__pudding的博客
07-26 1034
使用setTimeout即可 mounted() { this.$nextTick(() => { setTimeout(()=>{ this.createChart(); },0) }) },
echarts图表初始化到隐藏的div中造成宽高比例不对问题解决
ZKTIAN的博客
07-06 1508
问题描述： 最近在做Echarts，下图是两个Echarts图表，可以点击月视图和年视图来切换。我的思路是使用ajax获得数据后，初始化这两个图表，然后通过点击来切换，但是在将隐藏的div显示出来时，图表的长宽比例错乱，宽度被限定成了100px。如下图 这是因为在初始化图表时由于div被隐藏了，他的宽高无法获取，所以就自动给了一个宽度。下面是我的思路。话不多说，先看代码。 1.html代码 <ul class="nav nav-tabs"> <li class="active"
VUE Echarts组件初始加载压缩问题解析
gaiyi09的博客
09-11 609
这个问题的因素呢，在于echart组件渲染的时候（mounted中），它比页面dom元素渲染的更早，以至于，它当时并不知道自己应该渲染出多少宽度，这里我给的初始值是宽度100%，为的是监听窗口变化时，以实现响应式布局。如果给固定宽度的话，是没这个问题的，因为它知道自己的宽度了，当然也不能实现响应式。我的需求是：数据呈现两种结果，一种是table，一种是柱状图，两个div都使用v-show绑定变量isShowCharts进行切换，所以有个按钮可点击切换，在切换至柱状图的时候，传入实参true。
(echarts)echarts第一次渲染柱状图获取不到容器宽高
nyf_unknow的博客
05-23 606
用this.$nextTick(()=>{…
echarts容器不匹配问题
riddle1981的博客
07-10 377
有可能的是刷新的绘制机制与正常加载不同，导致了超出预料的加载顺序。因此echarts组件渲染时没能拿到正确的父容器宽度。当正常加载的时候echarts能够正常跟随父容器进行适配，但是刷新时echarts将会超过父容器宽度。导致刷新后不匹配的原因是，echarts组件渲染时没能拿到正确的父容器宽度。如果是这样，那么只需要延迟子组件的加载就完全可以避免刷新异常了。
使echarts图表随容器或屏幕变化而改变大小
llssdshiyi的博客
06-20 4443
使echarts图表随容器变化而改变大小，解决屏幕大小不变但图表容器改变情况下，希望图表大小自适应问题
echarts初始化地图大小
01-25
根据提供的引用内容，以下是关于echarts初始化地图大小的介绍： 在使用echarts初始化地图时，可以通过设置容器的大小来控制地图的大小。一种常见的方法是使用CSS样式来设置容器的宽度和高度。例如，可以为容器添加一个固定的宽度和高度，或者使用百分比来自适应不同的窗口大小。 另外，echarts还提供了自适应功能，可以让地图随着窗口的变化而自动调整大小。可以通过设置`resize`事件来实现自适应功能。当窗口大小发生变化时，echarts会自动重新计算地图的大小并进行相应的调整。 以下是一个示例代码，演示了如何初始化echarts地图的大小和实现自适应功能： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts Map</title> <style> #mapContainer { width: 100%; height: 400px; } </style> </head> <body> <div id="mapContainer"></div> <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script> <script> // 初始化地图容器 var mapContainer = document.getElementById('mapContainer'); var myChart = echarts.init(mapContainer); // 设置地图的配置项和数据 var option = { // 地图的配置项 // ... // 地图的数据 // ... }; // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); // 监听窗口大小变化事件，实现自适应功能 window.addEventListener('resize', function() { myChart.resize(); }); </script> </body> </html> ``` 通过上述代码，可以初始化一个echarts地图，并设置地图容器的大小为100%宽度和400px高度。同时，通过监听窗口大小变化事件，实现了地图的自适应功能。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值