Echarts chart displayed in popover pop-up window

I recently worked on a data management visualization project. One of the requirements is that when the mouse is hovering over a certain div element, a pop-up window needs to be displayed to display the chart, as shown in the figure: Question

:

• When starting to render a chart, the size of the chart displayed on the canvas is a fixed small square that cannot be adjusted. Setting the width and height of the chart does not work, and the chart has no data;

solve:

• Through data analysis, the reason is that before the popover of the element UI component is fully expanded, the chart of echarts has already started rendering. If the popover size chart cannot be obtained, there will be a problem with the rendering;
• In the @after-enter method of the popover, call the method of inserting the chart. In this method, call the interface to obtain the chart and other data to distinguish the rendering order. The after-enter method is triggered after the popover display animation has finished playing. At this time, there will be no problem with the chart rendering of the canvas after the pop-up window is displayed.

 <el-popover
     popper-class="popover_style"
     placement="right-start"
     width="600"
     trigger="hover"
     :key="index"
     @after-enter="setChartLine(id)"
     @hide="cancelChartLine()"
   > </el-popover>

After-enter displays the animation and triggers it after the playback
of hide is completed.