vue2項目 highcharts實例，如何在highcharts渲染開始時加載loading，在渲染結束時結束loading?

好久沒寫highcharts，最近有個同事寫highcharts時遇到了一個問題。

該業務場景的數據處理非常複雜，且存在某些個特定id的情況下，數據量極大，導致頁面上的highcharts卡頓(具體表現是：點了切換之後，有一段時間沒反應，之後highcharts重新渲染數據)
這中間"沒有反應"的一段時間，用户會懷疑自己到底有沒有成功實現切換行為。

這種場景下，既然數據的處理時長無法避免，就應該考慮給highcharts加個loading了。
一個理想狀態的實現是數據開始處理時loading，highcharts渲染完成之後取消loading

那我們就在引起數據變更的點擊事件內加入一個狀態變更，使內容區loading，這一步不難實現。問題是，如何在highcharts渲染完成之後取消loading呢？

Highcharts的事件中，有一個render事件，它在圖表渲染完成時觸發。監聽這個事件，在渲染卡頓的這個highcharts實例的render事件觸發時取消loading，就可以實現需求。下面看代碼實現。

chartInstance是highcharts的實例。

Highcharts.addEvent(chartInstance.chart,"render",this.cancelLoading); 這裏就是監聽的實現
其中cancelLoading定義在vue2的methods中
最後用$once語法在vue實例beforeDestroy的生命週期鈎子中取消監聽。

補充：
如果chartInstance獲取不到，那麼應該考慮是否有v-if的存在導致highcharts實例還未渲染時就執行了highcharts實例的獲取操作。(若是這個原因導致的chartInstance獲取不到，就還得在這段代碼塊的外層加上this.$nextTick())

完結！

同步更新到自己的語雀：
https://www.yuque.com/dirackeeko/blog/es3bwisav204rxcg