tab切换echarts无法正常显示问题

项目中使用到了Echarts来在展示图表，两个tab切换页面中都存在图表，页面加载完成后

对所有图表进行了初始化和绘制，然后切换查看时，发现图表的宽度不正确.，第一个tab显示是很正常的，但是第二个tab中内容显示不完整。

 

原因：在页面进行加载时，隐藏的图表找不到对应的div大小，所以默认给了一个大小。而这个默认宽度很小，所以导致echarts图表显示不完全。

 

解决办法：

1.将div的宽高设置成固定值，比如style=”width:500px;height:500px”，这时候echarts有了明确的大

小时候就可以正常显示出来了。（不过这个方法还是不好，固定值的高宽无法自适应网页大小啊）

 

2.在点击第二个tab的时候初始化echarts，也就是调用建立echarts的函数，而不要再加载网页的时候就初始化。

 

我的解决方案是对第一种解决方案进行了升级，做到了适配移动端的屏幕宽度。

 

html

<div class="count-chart" ref="countChart" v-show="leftChart"></div>

<div class="time-chart" ref="timeChart" v-show="rightChart"></div>

 

js

再初始化echarts前重新定义图表的宽高

this.$refs.countChart.style.width = window.innerWidth - 20 + 'px';

this.$refs.countChart.style.height = "280px";

this.$refs.timeChart.style.width = window.innerWidth - 20 + 'px';

this.$refs.timeChart.style.height = "280px";