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(); });
Similar Posts:
- [Solved] Error: `resize` should not be called during main process.
- A problem with 0 document. Documentelement. Clientwidth
- [Solved] TypeError: Cannot read property ‘getAttribute’ of undefined
- Ffmpeg scaling — the solution of “width / height not divisible by 2”
- How to Solve Vue Import Chinese Map & Echarts Import China Error
- UICollectionView must be initialized with a non-nil layout parameter [Solved]
- Next (react) framework combined with lib-flexible, postcss-pxtorem do pc-side rem adaptation to solve the font-size is always 54px issue
- How to Solve the window flicker problem caused by AWT components
- Solve the problem that the highlighted content exceeds the visual area when the introjs scroll bar appears
- [Solved] Vue Import echarts error: Error in mounted hook: “TypeError: Cannot read property ‘init’ of undefined”