echarts宽度100%变成了100px

本文分享了使用chart.js和echarts绘制折线图时遇到的宽度设置问题及解决方案。作者详细介绍了如何调整图表宽度使其适应不同屏幕尺寸,并提供了解决chart.js中宽度问题的一种可能方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

这几天在做折线图,先是用的chart.js,但是chart.js会出现纵轴不显示数字,宽度不能设置百分比只能设置定值,而且图像重绘之后需要鼠标移到折线图的数据点上才会出现图像,找了半天也没有找到问题在哪。果断的放弃了chart.js,选择了echarts。在用echarts时也碰到了宽度不灵的问题。但是之前明明是好用的,具体问题是,我设置的width:100%,结果出来的时候就变成了100px;查了资料后发现,是因为我把图放到了tab选项卡里,因为图一开始是display:none;在一开始初始化执行js的时候找不到这个元素,所以会出现问题。解决方法就是,在echarts初始化之前再用js获取当前屏幕的大小,然后再给他设置宽度就可以了。

var myChart=$("#myChart");
myChart.style.width=window.innerWidth+'px';
chartObj=echarts.init(myChart);
chartObj.setOption(option);

解决了这个问题之后,再想想chart.js的width问题,估计也可以用这个办法解决,但是没有去尝试,赶紧溜了,去工作了。

转载于:https://www.cnblogs.com/SoundOfTheSea/p/7699683.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值