Elementグラフの初期サイズとウィンドウの適応実現

最近は輪播図を作っていますが、elementのCarousel走馬灯を使っています。各走馬灯の中にはeachrts図があります。ページのロードを開始した時、echarts図は適応できないと気づきました。走馬灯の問題だと思い始めました。
皆さんがechartsを使う時にこのような状況に遭遇しましたか？
最初にグラフを盛った容器は隠し（またはタブ切り替え）です。また表示するときには、中のecharteグラフは初期サイズを使いません。例えば、私が出会ったこのようなもの：

子供用の靴があるということは、要素が最初に隠れていて、表示されてから自動的に幅が変わっていないため、echart図は初期幅が高くないということです。公式文書によると、

この幅は、いくつかの場合、百分率を設定するのには効果がないので、具体的な数字に設定したり、jsで値を付けたりする必要があります。$('main').style.width = (document.body.clientWidth-300)*0.6+'px';P.S：ここでは高さは言わないです。容器に高さを固定しないと、グラフは完成して表示されないからです。
echartグラフを設定したいなら、ウィンドウの拡大縮小によって変化しますか？以下の2つの書き方はどちらでもいいです。
最初の種類:

window.onresize = myChart.resize;
// .resize       ，    window resize        ，     

第二種類：

window.onresize = function () {
    this.myChart.resize();
    // .resize     ，           
};

echarts公式文書は詳しく書いてありますよ。必要な子供靴は自分で見に行きます。
具体的に私のコードについては、このように実現しました。私の容器はパーセンテージで書いていますので、私の実現方法は以下の通りです。

すなわち、domノードがレンダリングした後、echartsのインスタンスのresize（）方法を呼び出す。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。