最近在做一個輪播圖，使用的是element的Carousel走馬燈，每一個走馬燈裡是eachrts圖，開始頁面載入的時候發現echarts圖並不能自適應，開始以為是走馬燈的問題，後來發現不是

不知道大家在用echarts的時候有沒有遇到這種情況：

最開始盛放圖表的容器是隱藏（或者tab切換）的，然後再顯示的時候，裡面echarts圖表就沒用初始大小了。比如我遇到的這種：

有童鞋這會兒估計看出原因了：因為元素最初隱藏，再顯示之後沒有自動變化寬度，所以echarts圖表沒有初始寬高，官方文件的說法：

請注意：這個寬度在一些情況下設定百分比 是沒有作用的，所以得設定為具體數字或者用js賦值，類似這種：

$('main').style.width = (document.body.clientWidth-300)*0.6+'px';

P.S：這裡沒說高度是因為如果不給容器固定高度，圖表是完成不顯示的（高度為0的容器肯定不會顯示哦）

那麼如果想設定echart圖表隨視窗的縮放變化呢？以下兩種寫法都可以：

第一種：

window.onresize = myChart.resize;
// .resize後不用加括號哦，一般如果window resize的時候不設定其他，可以這樣寫

第二種：

window.onresize = function () {
    this.myChart.resize();
    // .resize後加括號哦，這裡還可以寫其他的事件
};

echarts官方文件寫的很詳細哦，需要的童鞋自己去翻閱。

具體到我的程式碼，我是這樣實現的，因為我的容器是百分比寫的，所以我的實現方式如下：

即是dom節點渲染以後，呼叫echarts例項的resize()方法；

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。