echarts警告:Can‘t get DOM width or height. Please check dom.clientWidth and dom.clientHeight. ........

具体警告:Can't get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be 0.For example, you may need to call this in the callback of window.onload

 There is a problem: switch tabs to initialize different echarts, which cannot be displayed

The general meaning of the error is: the width and height of the dom node cannot be found, and the width and height cannot be obtained, resulting in the failure to draw the graph

The cause of the problem: the graphics are drawn before the dom node is loaded

It’s easy to find the problem. It’s because the graphics are drawn in advance, so let the graphics not be drawn after the dom node is loaded.

Specific operation: add a delayer to load echarts when switching the tabs page to trigger an event

 handleClick(tab,event){
        if(tab.name=='Exception'){
          setTimeout(()=>{
            this.ExceptionGroupBy(); //初始化品质异常单饼图
          },100)
        }
        if(tab.name=='Guest'){
          setTimeout(()=>{
            this.GuestGroupBy(); //初始化客户投诉单饼图
          },100)

        }
}

There may be other reasons for this problem, this is just what happened to me 

Guess you like

Origin blog.csdn.net/weixin_53443677/article/details/127518215