echarts宽度100%变成了100px (实用）

以你之姓@ 2023-05-29 06:52 36阅读 0赞

原文出处：[https://www.cnblogs.com/SoundOfTheSea/p/7699683.html][https_www.cnblogs.com_SoundOfTheSea_p_7699683.html]  
延伸阅读：[echarts图表自适应，容器宽度设置为百分数，但是图表显示不全，缩到一起][echarts]

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

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> </td> 
   <td> <p><code>var</code> <code>myChart=$(</code><code>"#myChart"</code><code>);</code></p> <p><code>myChart.style.width=window.innerWidth+</code><code>'px'</code><code>;</code></p> <p><code>chartObj=echarts.init(myChart);</code></p> <p><code>chartObj.setOption(option);</code></p> </td> 
  </tr> 
 </tbody> 
</table>

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

[https_www.cnblogs.com_SoundOfTheSea_p_7699683.html]: https://www.cnblogs.com/SoundOfTheSea/p/7699683.html
[echarts]: https://blog.csdn.net/liuminyi1987/article/details/79653737