Echartsコンソールのアラート domの幅や高さを取得できない

あるプロジェクトを書き、jspページにechartsで円グラフを描いたのですが、円グラフがどうしても2つの四角の背景色で出てこず、ページ単体を抜き出してタブに入れたら、円グラフが普通に表示されてしまい、非常に困惑しています。

そして、コンソールを開いてみると、コンソールに警告メッセージが表示されていました。domの幅や高さを取得できません！」という警告メッセージが表示されました。

さらに混乱しています。明らかに幅と高さを設定したのに、どうして取得できないのでしょうか？また、コンソールを開いてページを更新すると円グラフが出て、コンソールを閉じて更新するとまた円グラフが出なくなることがわかりました。

そこでググってみると、多くの方がJsで幅と高さをリセットして、その上で

 $(window).on('resize',function(){//Screen size adapts, resets container height and width


      resizeMainContainer();


      mainChart.resize();


});

試してみたが、役に立たなかった。後に"a paper and ink"のブリーフブックで初めてわかったことです。

コンテナのheight/widthプロパティがパーセンテージ形式になっていると、echoが警告して、うまくチャートが生成されないのです。そのため、divコンテナのheight widthはpxで指定する必要があります。

しかし、画面サイズはそれぞれ違うので、死ぬほど書いても適応性が低いし、パーセンテージを使わないのもあまり良くないので、筆者は上の方法を使い、そのまま使ってみたところ、以下のようになりました（コメントの真ん中の行に注目）。 

// DOM (Document Object Model) が読み込まれ、ページ (画像を含む) が完全にレンダリングされたときに幅と高さを計算する必要があり、そうしないとパーセント値しか得られません。

<! -------------------------------- フォーカス開始 -------------------------------->

 //set style width length otherwise echarts won't get it.


  $('#pic2').width($('#pic2').width());


    $('#pic2').height($('#pic2').height());
    // Initialize the echarts instance based on the prepared dom


  var myChart = echarts.init(document.getElementById('pic2'),'light');       
// Here, 'light' must also be written for initialization, I tried leaving it out, but it still doesn't come out either

<! -------------------------------- フォーカス終了 -------------------------------->

// Specify the configuration items and data for the chart         


 var option = {.... omitted};
    // Display the chart using the configuration items and data just specified.


    myChart.setOption(option);

について echarts.init(dom,'light');   また、公式サイトでinitのパラメータを検索してみましたが、「light」が何のためにあるのかわかりませんでしたので、読者の方でご存知の方がいらっしゃいましたら、お気軽に下のコメント欄にご記入ください