一种基于Vue的echarts性能优化方法及系统与流程

一种基于vue的echarts性能优化方法及系统
技术领域
1.本技术涉及计算机领域，尤其涉及一种基于vue的echarts性能优化方法及系统。


背景技术：

2.大多数情况下，数据均通过表格、数字等方法去展现，但是当数据量越来越大的时候，简单的数字和表格并不能直观的表达数据的规律和其他各种信息，与此同时人类大脑对图表、颜色、地图等能有更快的认识，从而增加人类对数据的理解和记忆，所以在这个数据爆炸的时代，实现数据的可视化是互联网发展的必然。现有实现数据可视化通常通过在vue项目中引入echarts插件，定义一个div容器，然后在echarts官网找到合适的图表、地图等插入到容器中，异步请求ajax，最后根据请求到的数据去渲染图表。
3.本技术发明人在实现本技术实施例中技术方案的过程中，发现上述技术至少存在如下技术问题：
4.现有技术中在vue中使用echarts时各页面的图表数量多，进而请求的数据量大，用户在对页面进行操作或切换页面时，存在首次加载缓慢、页面卡顿以及网页崩溃、白屏等问题，严重者甚至出现内存溢出的技术问题。


技术实现要素：

5.有鉴于此，本技术实施例通过提供一种基于vue的echarts性能优化方法及系统，所述方法包括：通过获得echarts(可视化图表库)的公共配置；将所述公共配置调出至vue框架的钩子函数中执行一次后，保存至变量配置中；跳转页面后获得页面信息；根据所述页面信息，获得定时器，并对所述定时器进行清除。解决了现有技术中在vue中使用echarts时各页面的图表数量多，进而请求的数据量大，用户在对页面进行操作或切换页面时，存在首次加载缓慢、页面卡顿以及网页崩溃、白屏等问题，严重者甚至出现内存溢出的技术问题。达到了通过路由懒加载减少首屏加载时间，通过骨架屏提升用户的体验感，通过公共配置调用及清除定时器、图表实例提高页面的流畅度，最终提升系统性能和用户体验的技术效果。
6.鉴于上述问题，本技术实施例提供了一种基于vue的echarts性能优化方法及系统。
7.第一方面，本技术提供了一种基于vue的echarts性能优化方法，所述方法通过一种基于vue的echarts性能优化系统实现，其中，所述方法包括：通过获得echarts可视化图表库的公共配置；将所述公共配置调出至vue框架的钩子函数中执行一次后，保存至变量配置中；跳转页面后获得页面信息；根据所述页面信息，获得定时器，并对所述定时器进行清除。
8.另一方面，本技术还提供了一种基于vue的echarts性能优化系统，用于执行如第一方面所述的一种基于vue的echarts性能优化方法，其中，所述系统包括：第一获得单元：所述第一获得单元用于获得echarts可视化图表库的公共配置；第一保存单元：所述第一保
存单元用于将所述公共配置调出至vue框架的钩子函数中执行一次后，保存至变量配置中；第二获得单元：所述第二获得单元用于跳转页面后获得页面信息；第三获得单元：所述第三获得单元用于根据所述页面信息，获得定时器，并对所述定时器进行清除。
9.第三方面，本技术实施例还提供了一种基于vue的echarts性能优化系统，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其中，所述处理器执行所述程序时实现上述第一方面所述方法的步骤。
10.本技术实施例中提供的一个或多个技术方案，至少具有如下技术效果或优点：
11.1.通过获得echarts可视化图表库的公共配置；将所述公共配置调出至vue框架(用户界面构建框架)的钩子函数中执行一次后，保存至变量配置中；跳转页面后获得页面信息；根据所述页面信息，获得定时器，并对所述定时器进行清除。达到了通过路由懒加载减少首屏加载时间，通过骨架屏提升用户的体验感，通过公共配置调用及清除定时器、图表实例提高页面的流畅度，最终提升系统性能和用户体验的技术效果。
12.2.通过将加载信息在所述信息容器中进行初始化操作，只有滚动到echarts可视化图表库的加载信息才进行初始化，避免一开始就同时加载所有echarts可视化图表库，进而避免了echarts可视化图表库出现首次加载缓慢的技术问题。
13.上述说明仅是本技术技术方案的概述，为了能够更清楚了解本技术的技术手段，而可依照说明书的内容予以实施，并且为了让本技术的上述和其它目的、特征和优点能够更明显易懂，以下特举本技术的具体实施方式。
附图说明
14.为了更清楚地说明本技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是示例性的，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。
15.图1为本技术实施例一种基于vue的echarts性能优化方法的流程示意图；
16.图2为本技术实施例一种基于vue的echarts性能优化方法中对滚动进入所述信息容器中的所述加载信息进行初始化操作的流程示意图；
17.图3为本技术实施例一种基于vue的echarts性能优化方法中执行动态渲染信息的流程示意图；
18.图4为本技术实施例一种基于vue的echarts性能优化方法中通过所述图表清除方法对所述图表加载信息进行清除的流程示意图；
19.图5为本技术实施例一种基于vue的echarts性能优化系统的结构示意图；
20.图6为本技术实施例示例性电子设备的结构示意图。
21.附图标记说明：
22.第一获得单元11，第一保存单元12，第二获得单元13，第三获得单元14，总线300，接收器301，处理器302，发送器303，存储器304，总线接口305。
具体实施方式
23.本技术实施例通过提供一种基于vue的echarts性能优化方法及系统，解决了现有
技术中在vue中使用echarts时各页面的图表数量多，进而请求的数据量大，用户在对页面进行操作或切换页面时，存在首次加载缓慢、页面卡顿以及网页崩溃、白屏等问题，严重者甚至出现内存溢出的技术问题。达到了通过路由懒加载减少首屏加载时间，通过骨架屏提升用户的体验感，通过公共配置调用及清除定时器、图表实例提高页面的流畅度，最终提升系统性能和用户体验的技术效果。
24.下面，将参考附图对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅是本技术的一部分实施例，而不是本技术的全部实施例，应理解，本技术不受这里描述的示例实施例的限制。基于本技术的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。另外还需要说明的是，为了便于描述，附图中仅示出了与本技术相关的部分而非全部。
25.申请概述
26.大多数情况下，数据均通过表格、数字等方法去展现，但是当数据量越来越大的时候，简单的数字和表格并不能直观的表达数据的规律和其他各种信息，与此同时人类大脑对图表、颜色、地图等能有更快的认识，从而增加人类对数据的理解和记忆，所以在这个数据爆炸的时代，实现数据的可视化是互联网发展的必然。现有实现数据可视化通常通过在vue项目中引入echarts插件，定义一个div容器，然后在echarts官网找到合适的图表、地图等插入到容器中，异步请求ajax，最后根据请求到的数据去渲染图表。
27.现有技术中在vue中使用echarts时各页面的图表数量多，进而请求的数据量大，用户在对页面进行操作或切换页面时，存在首次加载缓慢、页面卡顿以及网页崩溃、白屏等问题，严重者甚至出现内存溢出的技术问题。
28.针对上述技术问题，本技术提供的技术方案总体思路如下：
29.本技术提供了一种基于vue的echarts性能优化方法，所述方法应用于一种基于vue的echarts性能优化系统，其中，所述方法包括：通过获得echarts可视化图表库的公共配置；将所述公共配置调出至vue框架(用户界面构建框架)的钩子函数中执行一次后，保存至变量配置中；跳转页面后获得页面信息；根据所述页面信息，获得定时器，并对所述定时器进行清除。
30.在介绍了本技术基本原理后，下面将结合说明书附图来具体介绍本技术的各种非限制性的实施方式。
31.实施例一
32.请参阅附图1，本技术实施例提供了一种基于vue的echarts性能优化方法，其中，所述方法应用于一种基于vue的echarts性能优化系统，所述方法具体包括如下步骤：
33.步骤s100：获得echarts可视化图表库的公共配置；
34.具体而言，所述一种基于vue的echarts性能优化方法用于所述一种基于vue的echarts性能优化系统中，可以通过多种方式提升系统性能，改善在vue中使用echarts时因请求数据量大导致的加载缓慢、页面卡顿等问题。所述vue是一套用于构建用户界面的渐进式javascrip框架。vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。所述echarts是一款基于java script的数据可视化图表库，提供直观、生动、可交互、可个性化定制的数据可视化图表。通过获得echarts可视化图表库的公共配置，即获得echarts中固定的配置信息，达到了提取公共配置，减少公共配置渲染次数，最终提高系统
页面流畅度的技术效果。
35.步骤s200：将所述公共配置调出至vue框架的钩子函数中执行一次后，保存至变量配置中；
36.具体而言，将echarts中固定的配置信息，即所述公共配置调出至vue用户界面构建框架中，之后钩子函数对所述公共配置进行一次执行，并将此次执行的结果保存到一个变量配置中。其中，所述钩子函数是一段用以处理系统消息的程序，当某一个事件触发的时候，在系统级捕获到了他，然后做一些操作。通过执行一次echarts的所述公共配置，并将执行结果保存在一个变量配置中，在后期需要相应公共渲染时，自动调用所述变量配置，可以减少多次渲染公共配置的次数，从而提升系统性能、提高页面的流畅度，达到了使系统更加友好的技术效果。
37.步骤s300：跳转页面后获得页面信息；
38.步骤s400：根据所述页面信息，获得定时器，并对所述定时器进行清除。
39.具体而言，所述页面信息是指每次页面跳转后的页面信息，包括页面内的定时器、图表实例等数据信息。进一步的，根据所述页面信息，可以获得当前页面对应的定时器，并通过在vue销毁前生命周期方法里面调用clear interval方法，对所述定时器进行清除。通过获取并清除各页面的定时器，提高了页面的流畅度，使系统不会因为开启时间过长而越来越卡顿，同时解决了因定时器使用不当出现的白屏问题以及内存溢出造成的页面崩溃等问题，达到了通过优化系统性能提升用户体验感的技术效果。
40.进一步的，如附图2所示，本技术实施例步骤s500还包括：
41.步骤s510：获得加载信息列表，所述加载信息列表中的加载信息按照列表顺序依次滚动进入信息容器中，其中，所述信息容器为所述echarts可视化图表库的请求数据插入容器；
42.步骤s520：对滚动进入所述信息容器中的所述加载信息进行初始化操作。
43.具体而言，首先获得项目首次加载时的加载信息列表，所述加载信息列表中的加载信息按照列表顺序依次滚动进入信息容器中。其中，所述信息容器为所述echarts可视化图表库的请求数据插入容器。进一步的，对滚动进入所述信息容器中的各个加载信息进行初始化操作。通过将加载信息在所述信息容器中进行初始化操作，只有滚动到echarts可视化图表库的加载信息才进行初始化，避免一开始就同时加载所有echarts可视化图表库，进而避免了echarts可视化图表库出现首次加载缓慢的技术问题。
44.进一步的，如附图3所示，本技术实施例步骤s200还包括：
45.步骤s210：获得动态渲染信息；
46.步骤s220：当接收到所述动态渲染信息时，调用所述变量配置，用于执行所述动态渲染信息。
47.具体而言，首先获得动态渲染信息，当基于vue的echarts性能优化系统接收到所述动态渲染信息时，自动调用echarts可视化图表库公共配置执行一次后的结果，即所述变量配置，用于执行所述动态渲染信息。通过调用echarts可视化图表库公共配置，达到了减少公共配置渲染次数的技术效果，从而大大提升了系统的性能和用户的体验。
48.进一步的，本技术实施例步骤s400还包括：
49.步骤s410：在vue框架生命周期方法里调用清除方法，通过所述清除方法对所述定
时器进行清除。
50.具体而言，根据跳转页面后的页面信息，可以得到页面对应的定时器信息，在vue框架生命周期方法里调用clear interval方法，可以自动清除对应的定时器信息。通过所述清除方法完成了对所述定时器的清除，防止了定时器对系统的内存过多的消耗。
51.进一步的，如附图4所示，本技术实施例步骤s300还包括：
52.步骤s320：所述根据所述页面信息，获得图表加载信息，所述图表加载信息包括图表数据、图表实例数据；
53.步骤s330：获得图表清除方法，通过所述图表清除方法对所述图表加载信息进行清除。
54.具体而言，所述页面信息是指每次页面跳转后的页面信息，包括页面内的定时器、图表实例等数据信息。根据所述页面信息，可以得到页面对应的图表加载信息。其中，所述图表加载信息包括图表数据、图表实例数据。通过在vue的销毁前生命周期方法里面调用clearinterval方法清除定时器，并用clear方法清除图表实例数据，达到了每次实例化图表都是最新的，并且没有过多的实例对象的技术效果，同时提高了页面的流畅度，解决了内存溢出造成的页面崩溃等问题。
55.进一步的，本技术实施例步骤s300还包括：
56.步骤s310：当跳转页面加载完成前，通过骨架屏进行页面显示。
57.具体而言，当跳转页面加载完成前，通过骨架屏进行页面显示。其中，所述骨架屏是在页面数据尚未加载前先给用户展示出页面的大致结构，直到请求数据返回后再渲染页面，补充进需要显示的数据内容。通过在所述基于vue的echarts性能优化系统中添加骨架屏，达到了提升用户体验感的技术效果。
58.综上所述，本技术实施例所提供的一种基于vue的echarts性能优化方法具有如下技术效果：
59.1.通过获得echarts可视化图表库的公共配置；将所述公共配置调出至vue框架的钩子函数中执行一次后，保存至变量配置中；跳转页面后获得页面信息；根据所述页面信息，获得定时器，并对所述定时器进行清除。达到了通过路由懒加载减少首屏加载时间，通过骨架屏提升用户的体验感，通过公共配置调用及清除定时器、图表实例提高页面的流畅度，最终提升系统性能和用户体验的技术效果。
60.2.通过将加载信息在所述信息容器中进行初始化操作，只有滚动到echarts可视化图表库的加载信息才进行初始化，避免一开始就同时加载所有echarts可视化图表库，进而避免了echarts可视化图表库出现首次加载缓慢的技术问题。
61.实施例二
62.基于与前述实施例中一种基于vue的echarts性能优化方法，同样发明构思，本发明还提供了一种基于vue的echarts性能优化系统，请参阅附图5，所述系统包括：
63.第一获得单元11：所述第一获得单元11用于获得echarts可视化图表库的公共配置；
64.第一保存单元12：所述第一保存单元12用于将所述公共配置调出至vue框架的钩子函数中执行一次后，保存至变量配置中；
65.第二获得单元13：所述第二获得单元13用于跳转页面后获得页面信息；
66.第三获得单元14：所述第三获得单元14用于根据所述页面信息，获得定时器，并对所述定时器进行清除。
67.进一步的，所述系统还包括：
68.第四获得单元，所述第四获得单元用于获得加载信息列表，所述加载信息列表中的加载信息按照列表顺序依次滚动进入信息容器中，其中，所述信息容器为所述echarts可视化图表库的请求数据插入容器；
69.第一执行单元，所述第一执行单元用于对滚动进入所述信息容器中的所述加载信息进行初始化操作。
70.进一步的，所述系统还包括：
71.第五获得单元，所述第五获得单元用于获得所述加载信息的变量信息；
72.第二执行单元，所述第二执行单元用于对所述变量信息进行匿名化处理，所述匿名化处理为将所述变量信息使用匿名进行代替。
73.进一步的，所述系统还包括：
74.第六获得单元，所述第六获得单元用于获得动态渲染信息；
75.第一调用单元，所述第一调用单元用于当接收到所述动态渲染信息时，调用所述变量配置，用于执行所述动态渲染信息。
76.进一步的，所述系统还包括：
77.第二调用单元，所述第二调用单元用于在vue框架生命周期方法里调用清除方法，通过所述清除方法对所述定时器进行清除。
78.进一步的，所述系统还包括：
79.第七获得单元，所述第七获得单元用于所述根据所述页面信息，获得图表加载信息，所述图表加载信息包括图表数据、图表实例数据；
80.第八获得单元，所述第八获得单元用于获得图表清除方法，通过所述图表清除方法对所述图表加载信息进行清除。
81.进一步的，所述系统还包括：
82.第一显示单元，所述第一显示单元用于当跳转页面加载完成前，通过骨架屏进行页面显示。
83.本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，前述图1实施例一中的一种基于vue的echarts性能优化方法和具体实例同样适用于本实施例的一种基于vue的echarts性能优化系统，通过前述对一种基于vue的echarts性能优化方法的详细描述，本领域技术人员可以清楚的知道本实施例中一种基于vue的echarts性能优化系统，所以为了说明书的简洁，在此不再详述。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。
84.对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本技术。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本技术的精神或范围的情况下，在其它实施例中实现。因此，本技术将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。
85.示例性电子设备
86.下面参考图6来描述本技术实施例的电子设备。
87.图6图示了根据本技术实施例的电子设备的结构示意图。
88.基于与前述实施例中一种基于vue的echarts性能优化方法的发明构思，本发明还提供一种基于vue的echarts性能优化系统，其上存储有计算机程序，该程序被处理器执行时实现前文所述一种基于vue的echarts性能优化方法的任一方法的步骤。
89.其中，在图6中，总线架构(用总线300来代表)，总线300可以包括任意数量的互联的总线和桥，总线300将包括由处理器302代表的一个或多个处理器和存储器304代表的存储器的各种电路链接在一起。总线300还可以将诸如外围设备、稳压器和功率管理电路等之类的各种其他电路链接在一起，这些都是本领域所公知的，因此，本文不再对其进行进一步描述。总线接口305在总线300和接收器301和发送器303之间提供接口。接收器301和发送器303可以是同一个元件，即收发机，提供用于在传输介质上与各种其他装置通信的单元。
90.处理器302负责管理总线300和通常的处理，而存储器304可以被用于存储处理器302在执行操作时所使用的数据。
91.本技术提供了一种基于vue的echarts性能优化方法，所述方法应用于一种基于vue的echarts性能优化系统，其中，所述方法包括：通过获得echarts(可视化图表库)的公共配置；将所述公共配置调出至vue框架(用户界面构建框架)的钩子函数中执行一次后，保存至变量配置中；跳转页面后获得页面信息；根据所述页面信息，获得定时器，并对所述定时器进行清除。解决了现有技术中在vue中使用echarts时各页面的图表数量多，进而请求的数据量大，用户在对页面进行操作或切换页面时，存在首次加载缓慢、页面卡顿以及网页崩溃、白屏等问题，严重者甚至出现内存溢出的技术问题。达到了通过路由懒加载减少首屏加载时间，通过骨架屏提升用户的体验感，通过公共配置调用及清除定时器、图表实例提高页面的流畅度，最终提升系统性能和用户体验的技术效果。
92.本领域内的技术人员应明白，本技术的实施例可提供为方法、装置、或计算机程序产品。因此，本技术可采用完全软件实施例、完全硬件实施例、或结合软件和硬件方面实施例的形式。此外，本技术为可以在一个或多个包含有计算机可用程序代码的计算机可用存储介质上实施的计算机程序产品的形式。而所述的计算机可用存储介质包括但不限于：u盘、移动硬盘、只读存储器(read-0nly memory，简称rom)、随机存取存储器(random access memory，简称ram)、磁盘存储器、只读光盘(compact disc read-only memory，简称cd-rom)、光学存储器等各种可以存储程序代码的介质。
93.本发明是参照本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的系统。
94.这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令系统的制造品，该指令系统实现在流程图一个流程或多个流程和/或方框图一个方框或
多个方框中指定的功能。
95.这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。尽管已描述了本发明的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。
96.显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。