[发明专利]一种基于Vue的echarts性能优化方法及系统

说明书

本申请公开了一种基于Vue的echarts性能优化方法及系统，通过获得echarts可视化图表库的公共配置；将所述公共配置调出至Vue框架(用户界面构建框架)的钩子函数中执行一次后，保存至变量配置中；跳转页面后获得页面信息；根据所述页面信息，获得定时器，并对所述定时器进行清除。解决了现有技术中在Vue中使用echarts时各页面的图表数量多，进而请求的数据量大，用户在对页面进行操作或切换页面时，存在首次加载缓慢、页面卡顿以及网页崩溃、白屏等问题，严重者甚至出现内存溢出的技术问题。

技术领域

本申请涉及计算机领域，尤其涉及一种基于Vue的echarts性能优化方法及系统。

背景技术

大多数情况下，数据均通过表格、数字等方法去展现，但是当数据量越来越大的时候，简单的数字和表格并不能直观的表达数据的规律和其他各种信息，与此同时人类大脑对图表、颜色、地图等能有更快的认识，从而增加人类对数据的理解和记忆，所以在这个数据爆炸的时代，实现数据的可视化是互联网发展的必然。现有实现数据可视化通常通过在Vue项目中引入echarts插件，定义一个div容器，然后在echarts官网找到合适的图表、地图等插入到容器中，异步请求ajax，最后根据请求到的数据去渲染图表。

本申请发明人在实现本申请实施例中技术方案的过程中，发现上述技术至少存在如下技术问题：

现有技术中在Vue中使用echarts时各页面的图表数量多，进而请求的数据量大，用户在对页面进行操作或切换页面时，存在首次加载缓慢、页面卡顿以及网页崩溃、白屏等问题，严重者甚至出现内存溢出的技术问题。

发明内容

有鉴于此，本申请实施例通过提供一种基于Vue的echarts性能优化方法及系统，所述方法包括：通过获得echarts(可视化图表库)的公共配置；将所述公共配置调出至Vue框架的钩子函数中执行一次后，保存至变量配置中；跳转页面后获得页面信息；根据所述页面信息，获得定时器，并对所述定时器进行清除。解决了现有技术中在Vue中使用echarts时各页面的图表数量多，进而请求的数据量大，用户在对页面进行操作或切换页面时，存在首次加载缓慢、页面卡顿以及网页崩溃、白屏等问题，严重者甚至出现内存溢出的技术问题。达到了通过路由懒加载减少首屏加载时间，通过骨架屏提升用户的体验感，通过公共配置调用及清除定时器、图表实例提高页面的流畅度，最终提升系统性能和用户体验的技术效果。

鉴于上述问题，本申请实施例提供了一种基于Vue的echarts性能优化方法及系统。

第一方面，本申请提供了一种基于Vue的echarts性能优化方法，所述方法通过一种基于Vue的echarts性能优化系统实现，其中，所述方法包括：通过获得echarts可视化图表库的公共配置；将所述公共配置调出至Vue框架的钩子函数中执行一次后，保存至变量配置中；跳转页面后获得页面信息；根据所述页面信息，获得定时器，并对所述定时器进行清除。

另一方面，本申请还提供了一种基于Vue的echarts性能优化系统，用于执行如第一方面所述的一种基于Vue的echarts性能优化方法，其中，所述系统包括：第一获得单元：所述第一获得单元用于获得echarts可视化图表库的公共配置；第一保存单元：所述第一保存单元用于将所述公共配置调出至Vue框架的钩子函数中执行一次后，保存至变量配置中；第二获得单元：所述第二获得单元用于跳转页面后获得页面信息；第三获得单元：所述第三获得单元用于根据所述页面信息，获得定时器，并对所述定时器进行清除。

第三方面，本申请实施例还提供了一种基于Vue的echarts性能优化系统，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其中，所述处理器执行所述程序时实现上述第一方面所述方法的步骤。

本申请实施例中提供的一个或多个技术方案，至少具有如下技术效果或优点：