CN117687737A - 一种Echarts图表显示优化方法及系统 - Google Patents

Abstract

本发明公开了一种Echarts图表显示优化方法及系统，涉及应用程序前端技术领域，所述方法包括：获取Echarts图表库的第一模板图表，基于所述第一模板图表获得第一模板图表数据；获取用户预览的第二模板图表类型，获取与所述第二模板图表类型对应的若干第二模板图表，获取每个所述第二模板图表的第二模板图表数据；判断加载时间是否小于预设加载时间，若是则加载所述第二模板图表的第二模板线条图表，若否则加载所述第二模板图表的第二线条图片；获取预览所述第二模板图表类型的累计预览时间，判断所述累计预览时间是否大于或等于预设预览时间，若是则基于所有所述第二模板图表数据显示所有所述第二模板图表，可以解决Echarts的模板图表无法第一时间显示的问题。

Description

一种Echarts图表显示优化方法及系统

技术领域

本发明涉及应用程序前端技术领域，具体地，涉及一种Echarts图表显示优化方法及系统。

背景技术

随着互联网技术的发展，前端在web开发中的比重增大，前端技术已经不再局限于简单的浏览和交互体验，对于可视化的要求也越来越高，因此逐渐诞生了各种图表展示的需求。Echarts就是其中一种经典的图表库，由于Echarts图表自身的渲染占用计算机性能过高，用户在Echarts图表库中选择模板图表时，预览模板图表时往往出现卡顿和空白图表的现象，从而导致用户无法快速查看和选择模板，降低用户体验感，因此优化Echarts图表的显示速度，已迫在眉睫。

发明内容

为了解决Echarts的模板图表无法第一时间显示的问题，本方法提供了一种Echarts图表显示优化方法，所述方法包括：获取Echarts的待显示图表，判断所述待显示图表的图表类型，根据不同的所述图表类型采用不同的显示方式显示所述待显示图表；若所述图表类型为模板类型，则采用第一种方式显示所述待显示图表，所述第一种方式为：

A1、获取Echarts图表库的第一模板图表，对所述第一模板图表进行分析获取第一模板图表数据，所述第一模板图表数据包括第一图表类型、第一模板线条图表、第一线条图片、第一渲染图片和第一加载时间；

A2、获取用户预览的第二模板图表类型，获取所述Echarts图表库中与所述第二模板图表类型对应的若干第二模板图表，获取每个所述第二模板图表的第二模板图表数据，所述第二模板图表数据包括所述第二图表类型、第二模板线条图表、第二线条图片、第二渲染图片和第二加载时间；

A3、判断每个所述第二加载时间是否小于预设加载时间，若是则加载所述第二模板图表的所述第二模板线条图表，若否则加载所述第二模板图表的所述第二线条图片；

A4、获取用户预览所述第二模板图表类型的累计预览时间，判断所述累计预览时间是否大于或等于预设预览时间，若是基于所有所述第二模板线条图表、所有所述第二线条图片和所有所述第二渲染图片，获得若干第一模板渲染图，基于所有所述第一模板渲染图对所有所述第二模板图表进行显示。

本方法原理：对Echarts图表库中的模板图表进行分析，获得模板图表的模板图表数据，模板图表数据包括图表类型、未渲染的模板线条图表，由模板线条图表生成的线条图片、由模板图表中渲染的部分生成渲染图片以及模板线条图表的加载时间；获取用户预览的模板图表类型以及该模板图表类型对应的所有模板图表，再获取与其对应的模板图表数据，判断每个模板图表的加载时间是否小于预设加载时间，若是则直接加载模板线条图表，若否则加载线条图片，未使用Echarts图表自身的渲染技术，且只显示线条部分，即可显示模板图表的图表结构，加载速度更快，则显示速度更快；获取用户预览该模板图表类型的累计预览时间，判断所述累计预览时间是否大于或等于预设预览时间，若是则表示用户可能需要该模板图表类型，则将其模板图表的效果图进行显示，用户可根据其效果图进一步确定和选择，基于所有所述第二模板线条图表、所有所述第二线条图片和所有所述第二渲染图片，获得若干第一模板渲染图，基于所有所述第一模板渲染图对所有所述第二模板图表进行显示，以图片的形式展示模板图表的渲染效果，未使用Echarts图表自身的渲染技术，图片文件小，占用计算机资源少，加载速度更快，显示速度也更快，减少卡顿和空白图表的情况；若否则表示用户不需要该模板图表类型，则不再加载其效果图，节省资源。

因模板线条图表和线条图片是未渲染的模板图表，渲染图片是模板图表中渲染的部分，则直接将渲染图片叠加在模板线条图表或线条图片上，即可完整显示模板图表的数据可视化效果，且模板线条图表、线条图片和渲染图片均为部分显示效果的图片，比完整显示效果的图片文件更小，加载更快，显示速度也更快。

进一步地，步骤A4中，基于所有所述第二模板线条图表、所有所述第二线条图片和所有所述第二渲染图片，获得若干第一模板渲染图的具体步骤包括：

考虑用户在预览时切换模板图表类型查看不同类型模板图表，也可更快显示其图表，本方法将模板图表类型随用户的选择进行实时更新。

进一步地，所述方法还包括：

A5、获取用户预览的第三模板图表类型，将所述第三模板图表类型返回至步骤A2，将所述第二模板图表类型更新为所述第三模板图表类型。

考虑用户在选定模板图表后，需加载该模板图表后进行编辑，本方法先加载模板线条图表，再对其进行渲染，即可显示完整的模板图表，分步进行显示，加载数据少，显示更快。

进一步地，步骤A4中，所述方法还包括：获取用户选定的所述第二模板图表获得选定模板图表，获取与所述选定模板图表对应的所述第二模板线条图表获得选定模板线条图表，对所述选定模板线条图表进行渲染获得最终模板图表，将所有所述第一模板渲染图更新为所述最终模板图表。

考虑用户展示已编辑结束的模板图表，本方法同样采取分步显示的方式，优先显示数据中重要或有特殊性的数据，有助于先了解数据的整体波动趋势，再逐步显示其他数据，可以减少卡顿和空白图表的情况，加快显示速度。

进一步地，若所述图表类型为用户类型，则采用第二种方式显示所述待显示图表，所述第二种方式为：

B1、获取用户的用户图表，对所述用户图表进行分析获得所述用户图表的用户图表数据，所述用户图表数据包括用户图表类型、图表数据和代码数据；

B2、基于所述图表数据获得项目数量和每个项目的项目数据，所述项目数据包括n个数据，X_i和X_j分别是所述项目数据的数值最小值和数值最大值，n为大于或等于1的整数，i和j均为大于或等于1，且小于或等于n的整数；

B3、基于所有所述X_i和所有所述X_j获得每个项目的第一数据、第二数据和第三数据；

B4、判断所述项目数量是否大于2；

B5、若否则基于每个项目的所述X_i、所述X_j、所述第一数据、所述第二数据和所述第三数据获得每个项目的排序数据，基于所有所述排序数据显示所述用户图表；若是则基于所有所述X_i和所有所述X_j获得每个项目的极差，基于所有所述项目数据获得每个项目的方差；基于所有所述极差和所有所述方差显示所述用户图表。

考虑最大值和最小值更能体现数据的差异和波动，则本方式优先显示最大值和最小值，再显示最大值和最小值之间的所有数据，再显示其余数据，分步显示数据，减少卡顿和空白图表的情况，有利于用户了解数据的整体性和差异性。

进一步地，步骤B3中，基于所有所述X_i和所有所述X_j获得每个项目的第一数据、第二数据和第三数据的具体步骤包括：

若i≤j，则基于每个项目的所述X_i和所述X_j之间所有数据获得所述第一数据，基于每个项目的X₁与X₁和所述X_i之间所有数据获得所述第二数据，基于每个项目中X_n与X_j和X_n之间所有数据获得所述第三数据；

若i>j，则基于每个项目的所述X_j和所述X_i之间所有数据获得所述第一数据，基于每个项目的X₁与X₁和X_j之间所有数据获得所述第二数据，基于每个项目的X_n与X_i和X_n之间所有数据获得所述第三数据。

考虑极值可以提现数据的波动性，方差可以提现数据的稳定性，本方式利用极值和方差确定显示数据的顺序，且当有多个项目时，优先显示波动最大和最稳定的项目，有利于用户第一时间掌握数据的整体性和差异性。

进一步地，基于所有所述极差和所有所述方差显示所述用户图表的具体步骤包括：

B501、将所有所述极差进行降序排序获得所述用户图表的第一项目列表，将所有所述方差进行升序排序获得所述用户图表的第二项目列表；

B502、基于所述第一项目列表和所述第二项目列表对所述用户图表进行显示。

考虑通常将重要的数据或特殊的数据在图表中着重显示，如采用红色字体、字体进行加大和加粗等，本方式通过代码数据中的样式代码确定用户是想着重体现数据的差异性还是稳定性，并将其优先进行显示，有助于体现数据的重要性、稳定性和波动趋势，有利于先整体了解数据的整体波动，并按其稳定度进行排序显示，分步显示，减少卡顿和空白图表的情况，也有利于用户逐步了解数据的变化。

进一步地，在步骤B502中，基于所述第一项目列表和所述第二项目列表对所述用户图表进行显示的具体步骤包括：基于所述第一项目列表和所述第二项目列表的首位项目分别获得差异项目和稳定项目；基于所述代码数据分别获取所述差异项目和所述稳定项目的样式分别获得差异样式和稳定样式；基于所述差异样式和所述稳定样式获得突出项目；若所述突出项目为所述差异项目，则基于所述第一项目列表对所述用户图表进行显示；若所述突出项目为所述稳定项目，则基于所述第二项目列表对所述用户图表进行显示。

进一步地，基于所述第一项目列表对所述用户图表进行显示的具体步骤包括：

获取所述第一项目列表的第一末位项目，将所述第一末位项目的位置更新为所述第一项目列表的第二位，获得差异项目列表，基于所述差异项目列表的顺序依次对所述用户图表进行显示。

进一步地，基于所述第二项目列表对所述用户图表进行显示的具体步骤包括：

获取所述第二项目列表的第二末位项目，将所述第二末位项目的位置更新为所述第二项目列表的第二位，获得稳定项目列表，基于所述稳定项目列表的顺序依次对所述用户图表进行显示。

本发明还提供了一种Echarts图表显示优化系统，所述系统包括：

显示模块：用于获取Echarts的待显示图表，判断所述待显示图表的图表类型，根据不同的所述图表类型采用不同的显示方式显示所述待显示图表；若所述图表类型为模板类型，则采用第一模块显示所述待显示图表，所述第一模块包括：

模板模块：用于获取Echarts图表库的第一模板图表，对所述第一模板图表进行分析获取第一模板图表数据，所述第一模板图表数据包括第一图表类型、第一模板线条图表、第一线条图片、第一渲染图片和第一加载时间；

预览模块：用于获取用户预览的第二模板图表类型，获取所述Echarts图表库中与所述第二模板图表类型对应的若干第二模板图表，获取每个所述第二模板图表的第二模板图表数据，所述第二模板图表数据包括所述第二图表类型、第二模板线条图表、第二线条图片、第二渲染图片和第二加载时间；

线条模块：用于判断每个所述第二加载时间是否小于预设加载时间，若是则加载所述第二模板图表的所述第二模板线条图表，若否则加载所述第二模板图表的所述第二线条图片；

渲染模块：用于获取用户预览所述第二模板图表类型的累计预览时间，判断所述累计预览时间是否大于或等于预设预览时间，若是基于所有所述第二模板线条图表、所有所述第二线条图片和所有所述第二渲染图片，获得若干第一模板渲染图，基于所有所述第一模板渲染图对所有所述第二模板图表进行显示。

本系统的原理和效果与本方法相似，对于本系统不进行相应的赘述。

本发明提供的一个或多个技术方案，至少具有如下技术效果或优点：

1.判断模板图表的加载时间是否小于预设加载时间，若是则直接加载模板线条图表，若否则加载线条图片，未使用Echarts图表自身的渲染技术，且只显示线条部分，即可显示模板图表的图表结构，加载速度更快，显示速度更快。

2.判断累计预览时间是否大于或等于预设预览时间，若是基于所有第一模板渲染图对所有第二模板图表进行显示，以图片的形式展示模板图表的渲染效果，未使用Echarts图表自身的渲染技术，图片文件小，占用计算机资源少，加载速度更快，显示速度也更快，减少卡顿和空白图表的情况；若否则表示用户不需要该模板图表类型，则不再加载其效果图，节省资源。

3.采取分步显示的方式，优先显示数据中差异性最大和最稳定的数据，有助于先了解数据的整体波动趋势，再逐步显示其他数据，可以减少卡顿和空白图表的情况，加快显示速度。

4.通过代码数据中的样式代码确定用户是想着重体现数据的差异性还是稳定性，并将其优先进行显示，有助于体现数据的重要性、稳定性和波动趋势，有利于先整体了解数据的整体波动，并按其稳定度进行排序显示，分步显示，减少卡顿和空白图表的情况，也有利于用户逐步了解数据的变化。

附图说明

此处所说明的附图用来提供对本发明实施例的进一步理解，构成本发明的一部分，并不构成对本发明实施例的限定；

图1是本发明中一种Echarts图表显示优化方法的采用第一种方式显示图表的流程示意图；

图2是本发明中一种Echarts图表显示优化方法的采用第二种方式显示图表的流程示意图；

图3是本发明中一种Echarts图表显示优化系统的流程示意图；

图4是本发明中一种Echarts图表显示优化方法的模板线条图表或线条图片的示意图；

图5是本发明中一种Echarts图表显示优化方法的渲染图片的示意图；

图6是本发明中一种Echarts图表显示优化方法的模板渲染图的示意图。

具体实施方式

为了能够更清楚地理解本发明的上述目的、特征和优点，下面结合附图和具体实施方式对本发明进行进一步的详细描述。需要说明的是，在相互不冲突的情况下，本发明的实施例及实施例中的特征可以相互组合。

在下面的描述中阐述了很多具体细节以便于充分理解本发明，但是，本发明还可以采用其他不同于在此描述范围内的其他方式来实施，因此，本发明的保护范围并不受下面公开的具体实施例的限制。

实施例1

参考图1，本实施例提供了一种Echarts图表显示优化方法，所述方法包括：

获取Echarts的待显示图表，判断所述待显示图表的图表类型，根据不同的所述图表类型采用不同的显示方式显示所述待显示图表；若所述图表类型为模板类型，则采用第一种方式显示所述待显示图表，所述第一种方式为：

A1、获取Echarts图表库的第一模板图表，对所述第一模板图表进行分析获取第一模板图表数据，所述第一模板图表数据包括第一图表类型、第一模板线条图表、第一线条图片、第一渲染图片和第一加载时间，如根据javascript的type属性获取图表类型，series属性获取线条图表，将线条图表截图获得线条图片，获取模板图表的完整效果图，将其与线条图片作比较，获取两者不同的地方获得渲染图片，根据javascript的代码量和代码函数预估模板图表的加载时间；

A2、获取用户预览的第二模板图表类型，获取所述Echarts图表库中与所述第二模板图表类型对应的若干第二模板图表，获取每个所述第二模板图表的第二模板图表数据，所述第二模板图表数据包括所述第二图表类型、第二模板线条图表、第二线条图片、第二渲染图片和第二加载时间；

A3、判断每个所述第二加载时间是否小于预设加载时间，若是则加载所述第二模板图表的所述第二模板线条图表，若否则加载所述第二模板图表的所述第二线条图片；

A4、获取用户预览所述第二模板图表类型的累计预览时间，判断所述累计预览时间是否大于或等于预设预览时间，若是基于所有所述第二模板线条图表、所有所述第二线条图片和所有所述第二渲染图片，获得若干第一模板渲染图，基于所有所述第一模板渲染图对所有所述第二模板图表进行显示，如预设预览时间为15s，记录用户预览折线模板图表已达到15s，则累计预览时间已超过预设预览时间，则进一步显示渲染效果。

其中，步骤A4中，基于所有所述第二模板线条图表、所有所述第二线条图片和所有所述第二渲染图片，获得若干第一模板渲染图的具体步骤包括：将每张所述第二渲染图片叠加显示在与所述第二渲染图片对应的所述第二模板线条图表或所述第二线条图片上，获得所有所述第一模板渲染图。参考图4-图6，将渲染图片叠加在模板线条图表或线条图片上，获得模板渲染图，即将图5叠加在图4上即可获得图6的完整显示效果。

其中，步骤A4中，所述方法还包括：获取用户选定的所述第二模板图表获得选定模板图表，获取与所述选定模板图表对应的所述第二模板线条图表获得选定模板线条图表，对所述选定模板线条图表进行渲染获得最终模板图表，将所有所述第一模板渲染图更新为所述最终模板图表。如用户在折线图类型中选定了折线图表A，则先显示折线图表A的模板线条图表，再通过代码数据中的样式数据对其进行渲染，显示完整的折线图表A。

其中，所述方法还包括：

A5、获取用户预览的第三模板图表类型，将所述第三模板图表类型返回至步骤A2，将所述第二模板图表类型更新为所述第三模板图表类型。如用户由折线图类型切换为柱状图，则将折线模板图表更新为柱状模板图表。

实施例2

参考图2，在实施例一的基础上，在本实施例中，若所述图表类型为用户类型，则采用第二种方式显示所述待显示图表，所述第二种方式为：

B1、获取用户的用户图表，对所述用户图表进行分析获得所述用户图表的用户图表数据，所述用户图表数据包括用户图表类型、图表数据和代码数据；

B2、基于所述图表数据获得项目数量和每个项目的项目数据，所述项目数据包括n个数据，X_i和X_j分别是所述项目数据的数值最小值和数值最大值，n为大于或等于1的整数，i和j均为大于或等于1，且小于或等于n的整数；参考图4-图6，图中A、B和C为不同项目，则项目数量为3。

B3、基于所有所述X_i和所有所述X_j获得每个项目的第一数据、第二数据和第三数据；

其中，基于所有所述X_i和所有所述X_j获得每个项目的第一数据、第二数据和第三数据的具体步骤包括：

若i≤j，则基于每个项目的所述X_i和所述X_j之间所有数据获得所述第一数据，基于每个项目的X₁与X₁和所述X_i之间所有数据获得所述第二数据，基于每个项目中X_n与X_j和X_n之间所有数据获得所述第三数据；

若i>j，则基于每个项目的所述X_j和所述X_i之间所有数据获得所述第一数据，基于每个项目的X₁与X₁和X_j之间所有数据获得所述第二数据，基于每个项目的X_n与X_i和X_n之间所有数据获得所述第三数据；

如一个项目的项目数据有6个值，分别是7、6、9、8、4和5，则X₃=9和X₅=4分别是该项目的数值最小值和数值最大值，则第一数据为8，第二数据为7和6，第三数据为5。

B4、判断所述项目数量是否大于2；

B5、若否则基于每个项目的所述X_i、所述X_j、所述第一数据、所述第二数据和所述第三数据获得每个项目的排序数据，基于所有所述排序数据显示所述用户图表，即优先显示X_i和X_j，再显示第一数据，最后显示第二数据和第三数据；若是则基于所有所述X_i和所有所述X_j获得每个项目的极差，基于所有所述项目数据获得每个项目的方差；基于所有所述极差和所有所述方差显示所述用户图表。

其中，基于所有所述极差和所有所述方差显示所述用户图表的具体步骤包括：

B501、将所有所述极差进行降序排序获得所述用户图表的第一项目列表，将所有所述方差进行升序排序获得所述用户图表的第二项目列表；

B502、基于所述第一项目列表和所述第二项目列表对所述用户图表进行显示。

其中，在步骤B502中，基于所述第一项目列表和所述第二项目列表对所述用户图表进行显示的具体步骤包括：基于所述第一项目列表和所述第二项目列表的首位项目分别获得差异项目和稳定项目；基于所述代码数据分别获取所述差异项目和所述稳定项目的样式分别获得差异样式和稳定样式；基于所述差异样式和所述稳定样式获得突出项目；若所述突出项目为所述差异项目，则基于所述第一项目列表对所述用户图表进行显示；若所述突出项目为所述稳定项目，则基于所述第二项目列表对所述用户图表进行显示。

如根据项目的极差大小进行降序排序获得第一项目列表，第一项目列表的顺序为项目A、项目E、项目C、项目B、项目D和项目F，根据项目的方差大小进行升序排序获得第二项目列表，第二项目列表的顺序为项目F、项目B、项目C、项目D、项目E和项目A，则项目A和项目F分别为差异项目和稳定项目；通过代码数据中的样式数据分别获取差异项目和稳定项目的样式，分别获得差异样式和稳定样式，对差异样式和稳定样式的样式代码进行分析获得用户希望突出的项目，如差异样式中定义了color: '#a90000'，即颜色为红色，或width:6，为最粗的线条或字体，则将差异项目视为突出项目。

其中，基于所述第一项目列表对所述用户图表进行显示的具体步骤包括：获取所述第一项目列表的第一末位项目，将所述第一末位项目的位置更新为所述第一项目列表的第二位，获得差异项目列表，基于所述差异项目列表的顺序依次对所述用户图表进行显示。

如第一项目列表的顺序为项目A、项目E、项目C、项目B、项目D和项目F，则将项目F放置于项目A的下一位，即差异项目列表为项目A、项目F、项目E、项目C、项目B、和项目D，再基于差异项目列表中项目的顺序依次显示用户图表。

其中，基于所述第二项目列表对所述用户图表进行显示的具体步骤包括：获取所述第二项目列表的第二末位项目，将所述第二末位项目的位置更新为所述第二项目列表的第二位，获得稳定项目列表，基于所述稳定项目列表的顺序依次对所述用户图表进行显示。

在本实施例中，在更为具体的实施例中，每个项目的数据还可采用实施例一中第一种方式进行显示，即优先显示项目A时，可优先显示项目A的最大值和最小值，再依次显示第一数据、第二数据和第三数据。

实施例3

参考图3，在上述实施例的基础上，本实施例提供了一种Echarts图表显示优化系统，所述系统包括：

显示模块：用于获取Echarts的待显示图表，判断所述待显示图表的图表类型，根据不同的所述图表类型采用不同的显示方式显示所述待显示图表；若所述图表类型为模板类型，则采用第一模块显示所述待显示图表，所述第一模块包括：

模板模块：用于获取Echarts图表库的第一模板图表，对所述第一模板图表进行分析获取第一模板图表数据，所述第一模板图表数据包括第一图表类型、第一模板线条图表、第一线条图片、第一渲染图片和第一加载时间；

预览模块：用于获取用户预览的第二模板图表类型，获取所述Echarts图表库中与所述第二模板图表类型对应的若干第二模板图表，获取每个所述第二模板图表的第二模板图表数据，所述第二模板图表数据包括所述第二图表类型、第二模板线条图表、第二线条图片、第二渲染图片和第二加载时间；

线条模块：用于判断每个所述第二加载时间是否小于预设加载时间，若是则加载所述第二模板图表的所述第二模板线条图表，若否则加载所述第二模板图表的所述第二线条图片；

渲染模块：用于获取用户预览所述第二模板图表类型的累计预览时间，判断所述累计预览时间是否大于或等于预设预览时间，若是基于所有所述第二模板线条图表、所有所述第二线条图片和所有所述第二渲染图片，获得若干第一模板渲染图，基于所有所述第一模板渲染图对所有所述第二模板图表进行显示。

尽管已描述了本发明的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims (11)

1.一种Echarts图表显示优化方法，其特征在于，所述方法包括：

获取Echarts的待显示图表，判断所述待显示图表的图表类型，根据不同的所述图表类型采用不同的显示方式显示所述待显示图表；若所述图表类型为模板类型，则采用第一种方式显示所述待显示图表，所述第一种方式为：

A1、获取Echarts图表库的第一模板图表，对所述第一模板图表进行分析获取第一模板图表数据，所述第一模板图表数据包括第一图表类型、第一模板线条图表、第一线条图片、第一渲染图片和第一加载时间；

A2、获取用户预览的第二模板图表类型，获取所述Echarts图表库中与所述第二模板图表类型对应的若干第二模板图表，获取每个所述第二模板图表的第二模板图表数据，所述第二模板图表数据包括所述第二图表类型、第二模板线条图表、第二线条图片、第二渲染图片和第二加载时间；

A3、判断每个所述第二加载时间是否小于预设加载时间，若是则加载所述第二模板图表的所述第二模板线条图表，若否则加载所述第二模板图表的所述第二线条图片；

A4、获取用户预览所述第二模板图表类型的累计预览时间，判断所述累计预览时间是否大于或等于预设预览时间，若是基于所有所述第二模板线条图表、所有所述第二线条图片和所有所述第二渲染图片，获得若干第一模板渲染图，基于所有所述第一模板渲染图对所有所述第二模板图表进行显示。

2.根据权利要求1所述的一种Echarts图表显示优化方法，其特征在于，步骤A4中，基于所有所述第二模板线条图表、所有所述第二线条图片和所有所述第二渲染图片，获得若干第一模板渲染图的具体步骤包括：

将每张所述第二渲染图片叠加显示在与所述第二渲染图片对应的所述第二模板线条图表或所述第二线条图片上，获得所有所述第一模板渲染图。

3.根据权利要求1所述的一种Echarts图表显示优化方法，其特征在于，所述方法还包括：

A5、获取用户预览的第三模板图表类型，将所述第三模板图表类型返回至步骤A2，将所述第二模板图表类型更新为所述第三模板图表类型。

4.根据权利要求1所述的一种Echarts图表显示优化方法，其特征在于，步骤A4中，所述方法还包括：

获取用户选定的所述第二模板图表获得选定模板图表，获取与所述选定模板图表对应的所述第二模板线条图表获得选定模板线条图表，对所述选定模板线条图表进行渲染获得最终模板图表，将所有所述第一模板渲染图更新为所述最终模板图表。

5.根据权利要求1所述的一种Echarts图表显示优化方法，其特征在于，若所述图表类型为用户类型，则采用第二种方式显示所述待显示图表，所述第二种方式为：

B1、获取用户的用户图表，对所述用户图表进行分析获得所述用户图表的用户图表数据，所述用户图表数据包括用户图表类型、图表数据和代码数据；

B2、基于所述图表数据获得项目数量和每个项目的项目数据，所述项目数据包括n个数据，X_i和X_j分别是所述项目数据的数值最小值和数值最大值，n为大于或等于1的整数，i和j均为大于或等于1，且小于或等于n的整数；

B3、基于所有所述X_i和所有所述X_j获得每个项目的第一数据、第二数据和第三数据；

B4、判断所述项目数量是否大于2；

B5、若否则基于每个项目的所述X_i、所述X_j、所述第一数据、所述第二数据和所述第三数据获得每个项目的排序数据，基于所有所述排序数据显示所述用户图表；若是则基于所有所述X_i和所有所述X_j获得每个项目的极差，基于所有所述项目数据获得每个项目的方差；基于所有所述极差和所有所述方差显示所述用户图表。

6.根据权利要求5所述的一种Echarts图表显示优化方法，其特征在于，步骤B3中，基于所有所述X_i和所有所述X_j获得每个项目的第一数据、第二数据和第三数据的具体步骤包括：

若i≤j，则基于每个项目的所述X_i和所述X_j之间所有数据获得所述第一数据，基于每个项目的X₁与X₁和所述X_i之间所有数据获得所述第二数据，基于每个项目中X_n与X_j和X_n之间所有数据获得所述第三数据；

若i>j，则基于每个项目的所述X_j和所述X_i之间所有数据获得所述第一数据，基于每个项目的X₁与X₁和X_j之间所有数据获得所述第二数据，基于每个项目的X_n与X_i和X_n之间所有数据获得所述第三数据。

7.根据权利要求5所述的一种Echarts图表显示优化方法，其特征在于，基于所有所述极差和所有所述方差显示所述用户图表的具体步骤包括：

B501、将所有所述极差进行降序排序获得所述用户图表的第一项目列表，将所有所述方差进行升序排序获得所述用户图表的第二项目列表；

B502、基于所述第一项目列表和所述第二项目列表对所述用户图表进行显示。

8.根据权利要求7所述的一种Echarts图表显示优化方法，其特征在于，在步骤B502中，基于所述第一项目列表和所述第二项目列表对所述用户图表进行显示的具体步骤包括：

基于所述第一项目列表和所述第二项目列表的首位项目分别获得差异项目和稳定项目；

基于所述代码数据分别获取所述差异项目和所述稳定项目的样式分别获得差异样式和稳定样式；基于所述差异样式和所述稳定样式获得突出项目；

若所述突出项目为所述差异项目，则基于所述第一项目列表对所述用户图表进行显示；若所述突出项目为所述稳定项目，则基于所述第二项目列表对所述用户图表进行显示。

9.根据权利要求8所述的一种Echarts图表显示优化方法，其特征在于，基于所述第一项目列表对所述用户图表进行显示的具体步骤包括：

获取所述第一项目列表的第一末位项目，将所述第一末位项目的位置更新为所述第一项目列表的第二位，获得差异项目列表，基于所述差异项目列表的顺序依次对所述用户图表进行显示。

10.根据权利要求8所述的一种Echarts图表显示优化方法，其特征在于，基于所述第二项目列表对所述用户图表进行显示的具体步骤包括：

获取所述第二项目列表的第二末位项目，将所述第二末位项目的位置更新为所述第二项目列表的第二位，获得稳定项目列表，基于所述稳定项目列表的顺序依次对所述用户图表进行显示。

11.一种Echarts图表显示优化系统，其特征在于，所述系统包括：

显示模块：用于获取Echarts的待显示图表，判断所述待显示图表的图表类型，根据不同的所述图表类型采用不同的显示方式显示所述待显示图表；若所述图表类型为模板类型，则采用第一模块显示所述待显示图表，所述第一模块包括：

模板模块：用于获取Echarts图表库的第一模板图表，对所述第一模板图表进行分析获取第一模板图表数据，所述第一模板图表数据包括第一图表类型、第一模板线条图表、第一线条图片、第一渲染图片和第一加载时间；

预览模块：用于获取用户预览的第二模板图表类型，获取所述Echarts图表库中与所述第二模板图表类型对应的若干第二模板图表，获取每个所述第二模板图表的第二模板图表数据，所述第二模板图表数据包括所述第二图表类型、第二模板线条图表、第二线条图片、第二渲染图片和第二加载时间；

线条模块：用于判断每个所述第二加载时间是否小于预设加载时间，若是则加载所述第二模板图表的所述第二模板线条图表，若否则加载所述第二模板图表的所述第二线条图片；

渲染模块：用于获取用户预览所述第二模板图表类型的累计预览时间，判断所述累计预览时间是否大于或等于预设预览时间，若是基于所有所述第二模板线条图表、所有所述第二线条图片和所有所述第二渲染图片，获得若干第一模板渲染图，基于所有所述第一模板渲染图对所有所述第二模板图表进行显示。