[highcharts] 07_在highcharts渲染完成后结束loading

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