Tag Archives: Can’t get dom width or height

[Solved] echart Error: Can’t get dom width or height

When using echart to draw a word cloud diagram, the diagram cannot be loaded. When the browser opens the console F12, it is found that there is no error, but there is a warning

Can’t get dom width or height

Solution: add the following code before chart initialization

    var mainContainer = document.getElementById('main');
    //Used to make the chart adaptive to height and width, and calculate the height and width of the container through the height and width of the form
     var resizeMainContainer = function () {
         mainContainer.style.width = window.innerWidth+'px';
         mainContainer.style.height = window.innerHeight*0.8+'px';
     };
     //Set the height and width of the div container
     resizeMainContainer();
     // Initialize the chart
     var mainChart = echarts.init(mainContainer);
     $(window).on('resize',function(){//
         //The screen size is adaptive, reset the height and width of the container
        resizeMainContainer();
        mainChart.resize();
    });