Vue3: element dialog box rendering echarts graph error problem

The dialog box in elementplus is a component that we often use, as follows

Sometimes we need to pass data into the template in the dialog box, for example, if there is a

problem with a table in the dialog box, I use a component to encapsulate the dialog box, and the echarts diagram is used in the dialog component, and then the dialog component is referenced in the component of the required page

Problem: The echart graph does not appear

The reason for the problem: there is a problem with the rendering process, because the echarts graph is rendered after the dialog box is rendered, and the initialization method of echarts in the dialog component init()is not written dialogVisible = trueafter the dialog box

That is to say, I clicked on the dialog box on the page, and in the component page of the dialog box, I did not execute the **init()** method of echarts, because the echarts graph does not bind any methods in the template, It is only rendered through the class

The solutionnextTick() is to use the method to re-render the echarts graph when referencing the dialog box