解決ECharts Can't get dom width or height!無法初始化圖表的問題


在使用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);
                }

但是,瀏覽器的控制台里面還是有警告顯示,但是圖表已經能夠在頁面上面顯示了。

估計想要去掉警告得修改一下源碼了或者研究一下源碼的執行方式就可以去掉這個警告了。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM