Echarts 是現在程式設計師做圖表用到比較多的一種技術，前段時間，我就用了一下Echarts,我原本是將餅圖先隱藏，然後點選按鈕讓它再顯示出來，但是再顯示時，餅狀圖出現了問題，它變得特別小，根本不能用，然後，就此，我找了下原因

原因：Echarts 圖表是根據你定義的div 的樣式來確定圖表的大小，當圖表隱藏時，Echarts會找不到div的寬和高，再次顯示時它會給自己一個非常小的預設寬高值，所以在隱藏顯示後會發現它變得非常非常的小。

解決：將初始化放在click事件裡，給一個flag 控制顯示隱藏。

補充知識：echarts圖表隱藏之後再展示出現變形

問題描述：使用echarts製作了儀表盤的圖表，起初圖示在頁面中隱藏，點選某一按鈕切換時，顯示圖表，發現圖表的寬高被縮小了，異常顯示，如圖：

解決方法：

1.在完成繪畫echarts後新增程式碼：$(window).resize(myChart.resize);

var dom = document.getElementById("jindu");
var myChart = echarts.init(dom);
option = {
 ......
}
myChart.setOption(option);
$(window).resize(myChart.resize);

2.在圖表要顯示的地方新增程式碼：$(window).trigger(‘resize');

if(gmFlag == 1){
   $(".allscore").show(); 
   $(window).trigger('resize');
}

這樣來回切換的時候圖表的大小就不會改變了，如圖：

以上這篇解決Echarts 顯示隱藏後寬度高度變小的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。