echarts图表设置宽度100%结果为100px的解决办法
作者:cxy-Study 发布时间:2024-04-18 09:50:19
当外层div盒子设置宽度为100%时,可echarts渲染出来宽度只有100px,这种情况大多数echarts所在的div设置了display:none,获取不到外部盒子的宽度。
这里可以通过echarts源码获取宽度的行为来解释
究其原因就是出现在了图表设置了display:none属性上(属性含义:不为被隐藏的对象保留其物理空间,关闭元素的显示,并且所有后代元素不显示)
我们通过浏览器打断点可以看清楚echarts在计算图表宽度这部分的逻辑$("#chart").css("width",$("#chart").width());,("#chart")指的是当前绘制图表的div,获取当前元素的宽度后把固定宽度赋值给图表。
但是为什么我们宽度设置了100%,结果变为了100px? 这里上源码可以解释:
源码解读:当echarts绘制表格(也就是执行init方法)计算宽度的时候,由于初始化图表时外层div盒子的属性为display:none,所以无法获取到盒子的clientWidth(可视化宽度),而parseInt(stl.width,10)将宽度100%转换成了100(这里的stl.width,就是外层的div的样式中的width属性,因为我们初始时设置了100%,所以这里可以获取到),所以计算出的图表宽度为100px。
(源码这里没有获取到clientWidth(可视化宽度,因为display:none属性,无法获取到,就会将设置的width:100%转换称100px))
解决方法:外部div盒子必须要在init初始化前就已经存在于dom树中(也就是已经挂载)。
不要 在display:none的情况下(包括v-show、v-if后面的逻辑值是false时),一上来就初始化(init)echart。只要一初始化,就会执行源码计算出echart的宽度。
如何确保dom已经存在再去初始化呢:这里可以监视display属性(一般在项目中是通过v-if或者v-show,所以这里监视的是掌控盒子是否显示的变量 ),在监视中(watch),要配合nextTick方法使用,这样才能完全确保初始化之前,外部盒子已经存在于dom树中。(一般初始化过程是写在nextTick中)
附:echarts宽度如何设为百分比
var width = $("#tabitem2").width()*0.45;
$("#mainPay").css("width", width);
$("#mainDetail").css("width", width);
$("#main").css("width", width);
$("#mainItem").css("width", width);
$("#mainBehavior").css("width", width);
$("#mainBehaviorPay").css("width", width);
$("#mainDepartment").css("width", width);
$("#mainDoctor").css("width", width);
var myChartPay = echarts.init(document.getElementById('mainPay'));
var myChartDetail = echarts.init(document.getElementById('mainDetail'));
var myChartDepartment = echarts.init(document.getElementById('mainDepartment'));
var myChart = echarts.init(document.getElementById('main'));
var myChartItem = echarts.init(document.getElementById('mainItem'));
var myChartDoctor = echarts.init(document.getElementById('mainDoctor'));
var myChartBehavior = echarts.init(document.getElementById('mainBehavior'));
var myChartBehaviorPay = echarts.init(document.getElementById('mainBehaviorPay'));
说明:
这里 有个 div class=tabitems ,将宽度设置为 0.45倍的它。
然后对八个图表设置宽度为width。因为 tabitem2的宽度是动态的,所以每次随着屏幕宽度改变,都会重新计算这个宽度然后赋值。
来源:https://blog.csdn.net/m0_67108146/article/details/126442989
猜你喜欢
- 首先来介绍一下什么是弦图?弦图主要用于展示多个对象之间的关系,连接圆上任意两点的线段叫做弦,弦(两点之间的连线)就代表着两者之间的关联关系。
- 文件名全小写,可使用下划线包应该是简短的、小写的名字。如果下划线可以改善可读性可以加入。如mypackage。模块与包的规范同。如mymod
- 由于网上关于Timestamp类的资料比较少,而且官网上面介绍的很模糊,本文只是对如何创建Timestamp类对象进行简要介绍,详情请读者自
- 我就废话不多说了,大家还是直接看代码吧~clf=KMeans(n_clusters=5) #创建分类器对象fit_clf=clf.fit(X
- 经常有网友会问,SQL Server占用了太多的内存,而且还会不断的增长;或者说已经设置了使用内存,可它没有用到那么多,这是怎么一回事儿呢?
- 动态联接库(DLL)是加快应用程序关键部分的执行速度的重要方法,但有一点恐怕大部分人都不知道,那就是在ASP文件也能通过调用DLL来加快服务
- 根据一般做法的话,导出部分字段时没有办法生成格式化XML文件,所以导入时就没有办法格式化导入数据。 我想到两点,1.手工修改格式化XML文件
- 抽象工厂模式抽象工厂模式是一种创建型设计模式, 它能创建一系列相关的对象, 而无需指定其具体类。抽象工厂定义了用于创建不同产品的接口, 但将
- 为什么页面出现乱码?为什么数据库里出现乱码?为什么这些乱码的出现几率飘忽不定了?诸如此类的乱码问题困扰了很多WEB开发人员。假如不将这背后的
- 介绍:SQL Server 2008变更数据捕获SQL Server 2008的CDC函数读取激活了CDC的每个表所关联的事务日志来记录系统
- 随机背景--当你每次进入该页面时,从已指定的图片文件夹中,随机选取一个图片作为背景显示。这里介绍的方法是用ASP+CSS来实现的。 &nbs
- YAML语法规则:http://www.ibm.com/developerworks/cn/xml/x-cn-yamlintro/下载PyY
- 递归是一种较为抽象的数学逻辑,可以简单的理解为「程序调用自身的算法」。 * 对递归的解释是:递归(英语:Recursion),又译为递回,
- Python 实现tuple和list的转换1.list列表转换为tuple元组temp_list = [1,2,3,4,5]print(t
- 代码如下Control:from django.conf.urls import patterns, include, urlfrom dj
- 一、变量的定义程序中,数据都是临时存储在内存中,为了更快速的查找或使用这个数据,通常我们把这个数据在内存中存储之后,给整个数据定义一个名称,
- python解释器有好多版本,Anaconda里面包含了python解释器,并且包含了很多其他的工具包,所以我们只安装1个Anaconda即
- 本文实例讲述了JS实现淘宝支付宝网站的控制台菜单效果。分享给大家供大家参考。具体如下:这是一款支付宝网站中的控制台总菜单,可实现动画效果的显
- 题目:请求出任意区间[a,b]的所有素数,简单考虑实用性这道题看起来应该很easy是吧,但任意区间(这个问题有没get 到)Afanty的分
- 本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下我是从 官网 上面下载的社区版MySQL(版本