vue2项目 highcharts实例,如何在highcharts渲染开始时加载loading,在渲染结束时结束loading?

好久没写highcharts,最近有个同事写highcharts时遇到了一个问题。

该业务场景的数据处理非常复杂,且存在某些个特定id的情况下,数据量极大,导致页面上的highcharts卡顿(具体表现是:点了切换之后,有一段时间没反应,之后highcharts重新渲染数据)
这中间"没有反应"的一段时间,用户会怀疑自己到底有没有成功实现切换行为。

这种场景下,既然数据的处理时长无法避免,就应该考虑给highcharts加个loading了。
一个理想状态的实现是数据开始处理时loading,highcharts渲染完成之后取消loading

那我们就在引起数据变更的点击事件内加入一个状态变更,使内容区loading,这一步不难实现。问题是,如何在highcharts渲染完成之后取消loading呢?

Highcharts的事件中,有一个render事件,它在图表渲染完成时触发。监听这个事件,在渲染卡顿的这个highcharts实例的render事件触发时取消loading,就可以实现需求。下面看代码实现。

image.png

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


DiracKeeko
125 声望2 粉丝