在使用Echarts做數據統計圖表時,發現頁面沒有展示任何圖表,只在控制台看到了
echarts.js:1730 Can't get dom width or height
猜測原因可能是執行init()方法時報錯,無法獲取到div的寬高才導致繪制失敗。
解決辦法代碼在兩條星號之間:
************************************************************************************************************** // 柱狀圖 var dom = document.getElementById("container"); //用於使chart自適應高度和寬度,通過窗體高寬計算容器高寬 var resizeMainContainer = function () { mainContainer.style.width = window.innerWidth+'px'; mainContainer.style.height = window.innerHeight*0.8+'px'; }; //設置div容器高寬 resizeMainContainer(); // 初始化圖表 var myChart = echarts.init(dom); $(window).on('resize',function(){ resizeMainContainer(); myChart.resize(); }); ************************************************************************************************************** var app = {}; option = null; option = { xAxis: { type: 'category', data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月', '九月', '十月', '十一月', '十二月'] }, yAxis: { type: 'value' }, series: [{ data: mycars, type: 'bar', itemStyle: { normal: { color: function(params){ var colorList = ["#37A2DA"]; return colorList[params.dataIndex] } } } }] }; if (option && typeof option === "object") { myChart.setOption(option, true); }
但是,瀏覽器的控制台里面還是有警告顯示,但是圖表已經能夠在頁面上面顯示了。
估計想要去掉警告得修改一下源碼了或者研究一下源碼的執行方式就可以去掉這個警告了。