Echarts控制檯告警Can't get dom width or height
寫了一個專案，在jsp頁面用echarts畫了個餅圖，結果只有兩個方塊的背景色，餅圖就是出不來，然後把頁面單拉出來，放在一個頁籤，餅圖卻正常顯示，搞的我很鬱悶。
然後開啟控制檯，發現控制檯有告警資訊：Can't get dom width or height！
我就更鬱悶啦，我明明設定了寬高，怎麼就是獲取不到呢？而且還發現，我開啟控制檯，重新整理頁面後，餅圖也能出來，控制檯關掉，再重新整理，餅圖就又出不來了。
後來上網上搜，好多都說讓在Js中重新設定寬高，然後用
$(window).on('resize',function(){//螢幕大小自適應，重置容器高寬
resizeMainContainer();
mainChart.resize();
});
我試了，並沒有什麼用。後來在"一紙筆墨"的簡書上才發現：
如果容器的height/width屬性設定為百分比的形式，那麼echarts就會warning，且不能正常的生成圖表。所以div容器的高度寬度必須指定為px。
但是每個螢幕大小都不一樣，如果寫死的話，這自適應能力就太差了，不用百分比不太好，所以，上面作者就用了一種方法，我就直接用上了，發現還真行了，方法如下（重點關注註釋中間的幾行）：
//必須當 DOM（文件物件模型）已經載入，並且頁面（包括影象）已經完全呈現時，再計算寬和高，不然獲取到的只能是百分比數值
<!--------------------------------重點開始-------------------------------->
//設定style寬度 長度 不然echarts無法獲取，
$('#pic2').width($('#pic2').width());
$('#pic2').height($('#pic2').height());
// 基於準備好的dom，初始化echarts例項
var myChart = echarts.init(document.getElementById('pic2'),'light'); //此處，初始化時的 'light' 也必須寫，我試過不寫，但是也還是出不來
<!--------------------------------重點結束------------------------------>
// 指定圖表的配置項和資料
var option = {....省略};
// 使用剛指定的配置項和資料顯示圖表。
myChart.setOption(option);
關於echarts.init(dom,'light'); 我也去官網搜了init的引數，但是並沒有發現‘light’是幹嘛的，如果有讀者知道的話，歡迎下方留言!
原文作者：一紙筆墨
連結：https://www.jianshu.com/p/d6b5c3ee944e
來源：簡書