解决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);
                }

但是,浏览器的控制台里面还是有警告显示,但是图表已经能够在页面上面显示了。

估计想要去掉警告得修改一下源码了或者研究一下源码的执行方式就可以去掉这个警告了。

 

posted @ 2020-03-05 11:48  有深度  阅读(13061)  评论(0编辑  收藏  举报