echarts设置容器宽度设置为100%只显示100px宽度

在使用echarts时,写在tab页中的图表宽度明明设成了100%,但是在页面上实际却只有100px宽

原因很简单,在tab页中,图表的父容器div是隐藏的(display:none),图表在执行js初始化的时候找不到这个元素,所以自动将“100%”转成了“100”,最后计算出来的图表就成了100px

<ul class="table" id="tabCenter" style="width:600px;height:250px;">
              <li id="ground" style="width:100%;height:100%;"></li>
              <li id="house" style="width:100%;height:100%;"></li>
</ul>

 代码设置的宽度为100%父元素的宽,而打开F12会发现图表容器的宽高是100px。

Echarts在你不确定内容宽度时给他设置宽度为100%去适应宽度但是不能实现
好了废话少说直接说解决方案。echarts的width不能适应100%但是他的父级可以哦
上代码

//设置切换tab栏中图表宽度和高度的问题
	setTimeout(function(){
		var tabwidth = document.getElementById('tabCenter').offsetWidth+'px'
		var tabheight = document.getElementById('tabCenter').offsetHeight+'px'
		document.getElementById('house').style.width=tabwidth;
		document.getElementById('house').style.height=tabheight;
		document.getElementById('ground').style.width=tabwidth;
		document.getElementById('ground').style.height=tabheight;
		
	})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/185283.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

井盖位移传感器生产厂家推荐,时刻感知井盖

马路上的井盖虽然看似微不足道&#xff0c;但实际上对于行人的“脚下安全”起着至关重要的作用。这些井盖下连接着供排水、燃气、电力、供热、通信等功能的管路和线路&#xff0c;是城市生命线运行的重要保障。因此保持井盖状态正常、明确管理责任是确保车辆和行人安全通行的重…

【GCC】1:chatgpt:NetworkControllerInterface、GoogCcNetworkController

代码基于 mediasoup-sfu-cpp 中的m77版本。使用chatgpt辅助学习。网络状态估计器:开发中 D:\XTRANS\soup\mediasoup-sfu-cpp\deps\libwebrtc\libwebrtc\api\transport\network_control.h NetworkControllerInterface 网络控制器 此类,使用 网络状态和 通信状态 以 估计网络参…

SQL常见函数整理 _ LAG() 向上偏移

1. 用法 窗口函数&#xff0c;用于访问窗口中当前行之前的行的数据。该函数可以根据需要计算当前行之前的值&#xff0c;使我们能够轻松地比较不同行之间的差异和变化。 2. 基本语法 LAG(column, offset, default_value) OVER (ORDER BY column)column&#xff1a;代表在返回…

Ubuntu 安装 JMeter:轻松上手

Apache JMeter 是一个开源的负载测试工具&#xff0c;可以用于测试静态和动态资源&#xff0c;确定服务器的性能和稳定性。在本文中&#xff0c;我们将讨论如何下载和安装 JMeter。 安装 Java&#xff08;已安装 Java 的此步骤可跳过&#xff09; 要下载 Java&#xff0c;请遵…

pytorch训练模型内存溢出

1、训练模型命令命令 如下所示是训练命名实体识别的命令&#xff0c;在win10系统下执行 activate pytorch cd F:\Python\github\ultralytics-main\submain\pytorch_bert_bilstm_crf_ner-main f: python main.py --bert_dir"../model_hub/chinese-bert-wwm-ext/" --…

Linux 排查必看文件

目录 1. 登录日志 1.1 /var/log/wtmp 1.2 /var/log/btmp.* 1.3 /var/log/lastlog 1.4 /var/log/faillog 1.5 /var/log/secure 1.6 /var/log/auth.log 2. 系统日志 2.1 /var/log/cron.* 2.2 /var/log/syslog 2.3 /var/log/audit/audit.*log 3. 历史命令 3.1 ~/…

Linux基本命令操作 —— 文件夹/文件的创建,删除,查看,重命名......(简单理解 快速上手)

目录 1. 基础命令 1.1 显示当前目录&#xff1a;pwd 1.2 改变当前目录&#xff1a;cd 2. 文件夹的操作命令 2.1 创建文件夹&#xff1a;mkdir 2.2 查看文件夹&#xff1a;ls 2.3 删除文件夹&#xff1a;rmdir &#xff08;不推荐&#xff09; 2.4 复制文件夹&#xff1…

数据分析基础之《matplotlib(2)—折线图》

一、折线图绘制与保存图片 1、matplotlib.pyplot模块 matplotlib.pyplot包含了一系列类似于matlab的画图函数。它的函数作用于当前图形&#xff08;figure&#xff09;的当前坐标系&#xff08;axes&#xff09; import matplotlib.pyplot as plt 2、折线图绘制与显示 展示城…

科普:多领域分布式协同仿真

分布式协同仿真是一种在分布式计算环境中进行协同工作的仿真方法。使用该方法进行协同仿真时&#xff0c;仿真任务将被分发到多个计算节点上&#xff0c;并且这些节点可以同时工作以模拟完整的系统行为。分布式协同仿真已被广泛应用于工程、科学和军事领域&#xff0c;以便更好…

交叉导轨在光学工作台起什么重要作用?

光学工作台常常需要承载和移动各种光学元件和仪器&#xff0c;如望远镜、显微镜、光谱仪等&#xff0c;这些设备需要在空间中进行精确的定位和稳定支撑&#xff0c;而交叉导轨作为一种高精度、高刚度的直线传动元件&#xff0c;为光学工作台提供了重要的支撑和导向。 1>交叉…

Python开源项目之人工智能老照片修复算法学习

文章目录 前言项目环境搭建conda虚拟环境创建激活环境Pytorch安装Synchronized-BatchNorm-PyTorch repository安装Global目录Synchronized-BatchNorm-PyTorch项目部署检测预处理模型下载下载脸部增强模型文件下载依赖完整部署后项目结构 项目使用验证一下总结关于Python技术储备…

万宾科技可燃气体监测仪的功能有哪些?

随着城市人口的持续增长和智慧城市不断发展&#xff0c;燃气作为一种重要的能源供应方式&#xff0c;已经广泛地应用于居民生活和工业生产的各个领域。然而燃气泄漏和安全事故的风险也随之增加&#xff0c;对城市的安全和社会的稳定构成了潜在的威胁。我国燃气管道安全事故的频…

喜讯!云起无垠成为国家信息安全漏洞库(CNNVD)技术支撑单位

近日&#xff0c;云起无垠凭借其在漏洞挖掘、漏洞检测以及漏洞修复等领域的卓越表现&#xff0c;荣获“国家信息安全漏洞库&#xff08;CNNVD&#xff09;技术支撑单位等级证书&#xff08;三级&#xff09;”&#xff0c;正式成为CNNVD技术支撑单位。 中国国家信息安全漏洞库&…

Doris中的物化视图-查询(十九)

物化视图创建完成后&#xff0c;用户的查询会根据规则自动匹配到最优的物化视图。 比如我们有一张销售记录明细表&#xff0c;并且在这个明细表上创建了三张物化视图。一个存储了不同时间不同销售员的售卖量&#xff0c;一个存储了不同时间不同门店的销售量&#xff0c;以及每…

Linux【安全 01】云服务器主机安全加固(修改SSHD端口、禁用登陆失败的IP地址、使用密钥登录)

云服务器主机安全加固 1.SSH登录尝试的系统日志信息2.安全加固方法2.1 修改SSHD端口2.2 禁用登陆失败的IP地址2.3 使用密钥登录 3.总结 1.SSH登录尝试的系统日志信息 Last failed login: Sat Oct 7 14:10:39 CST 2023 from xxx.xx.xx.xxx on ssh:notty There were 10 failed …

仙女麻麻看过来~这是不是你们在找的外套?

分享女儿的秋冬穿搭 时尚与美观兼具的毛毛外套 洋气百搭不挑人穿 谁穿对都好看系列 经典宽松版型 不臃肿对身材包容性很强 小编墙裂推荐哦&#xff01;&#xff01;

计算机组成原理-磁盘存储器

文章目录 总览外存储器磁盘存储器磁盘的性能指标磁盘地址磁盘的工作过程磁盘阵列 总结 总览 外存储器 磁盘存储器 写是利用电流产生磁场从而写磁盘 读是利用载磁体移动时产生的电场从而得到数据 磁性材质易受外界磁场干扰 下图中 载磁体上N S的前后顺序代表对应存储二进制的比…

nginx的n种用法(nginx安装+正向代理+反向代理+透明代理+负载均衡+静态服务器)

nginx的安装 一、安装依赖 # 一键安装四个依赖 yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel二、安装nginx yum install nginx三、检查是否安装成功 nginx -v四、启动/停止nginx /etc/init.d/nginx start /etc/init.d/nginx stop五、编辑配置文件…

Git永久或者限时保存用户名及密码,解决每次拉取或者提交代码时都需要手动输入验证信息

介绍 这里以我自身项目情况为例: 依据项目要求,这边使用了 TortoiseGit进行项目的统一管理,下载了 TortoiseGit克隆项目之后,每次拉取或者提交代码,都会弹出一个提示框,要求输入用户名及密码。 解决方式 单个仓库内设置,只作用于对当前仓库 在当前项目目录文件夹下,…

面试:ShardingSphere问题

文章目录 什么是ShardingSphere&#xff0c;它的主要功能是什么&#xff1f;ShardingSphere的核心模块有哪些&#xff1f;他们是如何工作的&#xff1f;ShardingSphere 的读写分离是如何实现的&#xff1f;如何配置ShardingSphere的数据分片策略&#xff1f;ShardingSphere支持…