echarts圖表自適應，容器寬度設定為百分數，但是圖表顯示不全，縮到一起
問題如下：在tab切換的時候發現第二個tab頁面的圖表顯示不全，縮到了一起。
新增window自適應方法不管用，如下：
-
mychart.setOption(option); -
$(window).resize(function() { //重置容器高寬 mychart.resize(); });
各種搜尋這個問題，找到了方法。
先借鑑大牛解釋出現這個問題的原因：
查了一下echarts原始碼，發現了這個
-
Painter.prototype._getWidth = function() { -
var root = this.root; -
var stl = root.currentStyle || document.defaultView.getComputedStyle(root); -
return ((root.clientWidth || parseInt(stl.width, 10)) - parseInt(stl.paddingLeft, 10) - parseInt(stl.paddingRight, 10)).toFixed(0) - 0; -
};
echarts繪製圖表計算寬度的時候，由於第二個tab的屬性display: none;所以無法獲取到clientWidth，而 parseInt(stl.width, 10)) 將width: 100%;轉為100，所以計算出的圖表寬度為100px。
我實際按F12看的時候也看到上面圖的寬度是100px。
基於以上原因，參考大牛的解決方法，是要給這個圖固定寬度。下面貼部分程式碼:
PS：根據實際需要選取其他div寬度進行設定。
還可同時設定寬度、高度
var width = $("參考圖ID").width(); var height = $("參考圖ID").height(); $("#目標圖ID").css("width", width).css("height", height);