最近、データ管理視覚化プロジェクトに取り組んでいますが、その要件の 1 つは、図に示すように、マウスが特定の div 要素の上にあるときに、チャートを表示するためのポップアップ ウィンドウが表示される必要があるということです
。
- グラフのレンダリングを開始すると、キャンバスに表示されるグラフのサイズは調整できない固定の小さな正方形になります。グラフの幅と高さの設定は機能せず、グラフにはデータがありません。
解決する：
- データ分析によると、その理由は、要素 UI コンポーネントのポップオーバーが完全に展開される前に、echart のチャートが既にレンダリングを開始しているためであり、ポップオーバーのサイズ チャートを取得できない場合、レンダリングに問題が発生する可能性があります。
- ポップオーバーの @after-enter メソッドで、グラフを挿入するメソッドを呼び出します。このメソッドでは、描画順序を区別するためのグラフとその他のデータを取得するインターフェイスを呼び出します。after-enter メソッドは、ポップオーバー表示アニメーションの再生終了後にトリガーされますが、この時点では、ポップアップ ウィンドウが表示された後のキャンバスのチャートのレンダリングに問題はありません。
<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 はアニメーションを表示し、
非表示の再生が完了した後にトリガーします。