bootstrap的tab中，echarts 图表宽度设为100%之后，会出现图表宽带变为100px的情况。只有第一个正常

1.原因

echarts官方解释是
Tip: 有时候图表会放在多个标签页里，那些初始隐藏的标签在初始化图表的时候因为获取不到容器的实际高宽，可能会绘制失败，因此在切换到该标签页时需要手动调用

resize

方法获取正确的高宽并且刷新画布，或者在

opts

中显示指定图表高宽。

地址：http://echarts.baidu.com/api.html#echartsInstance.resize

而我们的tab本身是隐藏的，所以会导致图表获取不到宽度的情况。从而是100px，如果设200%，会是200px的。。。

2.解决办法：

官方说是resize，可是bootstrap的tab js代码在bootstrap.min.js中，没发修改，也不知道怎么hack。所以如果是自己写的tab是可以做到的，但是既然又用了框架，加上前端比较水，所以将使用下面的方法：
以下应该是bootstrap的事件？



 

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {

   // 先获取已激活的标签页的名称

   var activeTab = $(e.target)[0].hash;

   console.log(activeTab);

   // 根据标签页名称来决定显示哪个

   if(activeTab=="#status_info") {//加载指定图表

       show_warning_record_line();

   }

   if(activeTab=="#week-div") loadWeek();

   if(activeTab=="#month-div") loadMonth();  

});

这样做就可以达到，可以先获取到 div的宽高，然后再进行echarts的渲染。
当然并不是原创做法，只是给大家整理一下。

原文地址：
http://bbs.csdn.net/topics/391032565  答案是6# 

当然官方要是将来发布更完美的版本也是最好的解决方案