一种基于Echarts的大量数据图形显示方法与流程

一种基于echarts的大量数据图形显示方法
技术领域
1.本发明属于数据处理技术领域，涉及一种基于echarts工具的数据可视化显示方法、装置、设备及介质。


背景技术：

2.近年来，数据可视化技术作为高新技术的一种，在大数据时代下显得尤为重要，现已被应用于各领域及场景的数据显示。百度开发的echarts是优秀的图表展示前端框架，应用该框架能够将分散的监控数据直观的用图表形式展现出来，体现数据的分布，数据的变化历程，数据的相互关联关系等，为决策者提供更低门槛的数据表现，越来越多的数据展现使用echarts类似的前端图形化展现。但echarts对于上百万的图形显示需要复杂的参数配置，该复杂程度对于新接触的开发人员是一个很耗时的调试过程，并且其数据传输过程还需后端和数据库开发人员的优化配合，才能快速流畅地显示大量数据。因此缺乏一套用于大量数据图形显示的前后端以及数据采集端处理方法。


技术实现要素：

3.针对上述技术问题，本发明提供了一种基于echarts的大量数据图形显示方法。实现网页上对百万级的数据实现秒级的展现输出，流畅实现echarts拖拽筛选等数据操作功能。
4.为达到上述目的，本发明采用的技术方案为：一种基于echarts的大量数据图形显示方法，该方法包括以下步骤：
5.用数据采集系统每秒从设备采集数据存储至数据库；
6.网页前端发送多个并发请求；
7.后端系统根据并发请求内容从数据库查询数据，将查询的数据压缩返回给网页前端；
8.网页前端接收后端系统的查询数据，根据查询数据生成echarts参数配置项，并将查询数据传递给echarts组件；
9.后端系统每返回一次查询数据，网页前端立即异步接收，并将查询数据添加至echarts配置项，从而在界面上动态递增地渲染图表。
10.进一步地，数据采集系统每秒从设备采集数据存储至数据库，存储是以json格式存储，json数据格式采用以下形式：{vls:[[time1,data1],[time2,data2],
……
]}，其中time为x轴对应的时间位置，data为y轴需要展示的数据。调用函数判断当前配置参数的类型，后端程序将数据格式解析成网页前端易转换的格式，网页前端再将其转换成echarts原生的json配置参数；通过该方法存储数据库，从原来的一秒一条，到以json格式一小时一条记录，每一行json数据包含了上千个数据，减少了数据的索引量，大幅提升数据查询速度。
[0011]
进一步地，根据并发请求内容，从数据库按索引查询数据，按索引查询数据开始之前开启缓存，当查询完全相同时(逐字节相同)，就不用到数据库中执行查询，而直接调用缓
存中的结果，免去了重复的数据检索。
[0012]
进一步地，生成的echarts参数配置均为json格式的数据，所述参数包括如下的一种或多种：标题组件属性，图例组件属性，系列sampling属性，直角坐标系中的x轴属性，直角坐标系中的y轴属性，区域缩放组件，序列名称属性，序列类型属性，线条样式属性，线条颜色属性，区域填充样式属性，区域颜色属性，数据堆叠属性，线两端的标记类型属性，线两端的标记的显示样式等属性。
[0013]
进一步地，在数据配置到echarts之前，添加区域缩放组件datazoom，datazoom调用统一封装的配置文件(echarts区域缩放组件datazoom的配置文件)，包括滑动条型数据区域缩放组件datazoomslider和内置型数据区域缩放组件datazoominside，datazoom通过数据过滤以及在内部设置轴的显示窗口来达到数据窗口缩放的效果，实现缩放展示每一个数据点详细数据。datazoom组件用于区域缩放、数据过滤，可在图表上缩放展示具体的每一段数据，以及每一个数据包含的详细内容以提示框展示。
[0014]
进一步地，echarts采用异步渲染。一次查询需要上百万的数据量，由于数据量巨大，容易造成数据库阻塞，因此采用多段并发查询的方式减少每一次请求的数据量。后端每返回一次数据，前端立刻发送下一次请求，同时将接收的数据通过appenddata接口方式加载到echarts中，一次请求的数据量加载完成后，调用resize接口及时将数据渲染至画面中，使曲线图动态不间断地增量显示。采用appenddata()方法实现数据增量渲染，echarts配置项系列(series)中的sampling属性可以在数据量远大于像素点时候的降采样策略，开启后可以有效的优化图表的绘制效率。
[0015]
由于采集端按秒采集设备数据，数据量巨大，因此网页端的数据展示需采用分段加载、异步加载等一系列性能优化方法，最终本发明可实现网页上对百万级的数据实现秒级的展现输出，流畅实现echarts拖拽筛选等数据操作功能。通过本技术，解决了网页端数据量过大时，echarts数据加载慢、卡顿、易崩溃等问题。
[0016]
使用本发明的基于echarts的大量数据图形显示方法，echarts数据不断加载的过程中，界面其他功能维持正常且无卡顿，根据请求的参数变化判断数据加载的状态，并在提示框显示状态。
[0017]
基于echarts组件的配置数据进行渲染后的数据曲线能准确反映数据的变化趋势，对于上百万的数据能缩放展示每一个数据点详细数据。
附图说明
[0018]
图1为本发明实施例的基于echarts的大量数据图形显示方法流程示意图。
[0019]
图2为本发明实施例的基于echarts的大量数据图像显示方法的网页前端流程图。
具体实施方式
[0020]
为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实例仅仅用以解释本发明，并不用于限定本发明。
[0021]
本实施例的基于echarts工具的数据可视化显示装置包括网页前端、后端系统(后端软件)和数据采集系统(数据采集程序)，数据采集系统用以采集数据，并将采集到的数据
通过统一的数据保存接口存储为时间与数据对象关系数组；后端系统配置样式参数和数据存储路径参数，并将数据存储路径参数传递到网页前端，用以查询时间与数据对象关系数组，并合并网页前端的样式参数完成echarts图表参数组装展示图表。
[0022]
数据库包括但不限于关系型数据库、缓存数据库、或文本文件。
[0023]
如图1所示，本实施例的基于echarts的大量数据图形显示方法，包括数据生产设备，采集程序、数据库、后端程序、网页前端。该方法包括以下步骤：
[0024]
步骤1，用数据采集系统每秒从设备采集数据存储至数据库，采集程序通过opc协议读取所述设备的实时数据，一天一个设备的数据量为八万左右。存储是以json格式存储，json数据格式采用例如以下形式：{vls:[["2021-01-06 08:59:54",38],["2021-01-06 08:59:55",38],
……
]}，其中"2021-01-06 08:59:54"即为x轴对应的时间位置，38即为y轴需要展示的数据。调用函数判断当前配置参数的类型，后端程序将数据格式解析成网页前端易转换的格式，网页前端再将其转换成echarts原生的json配置参数；通过该方法存储数据库，从原来的一秒一条，到以json格式一小时一条记录，每一行json数据包含了上千个数据，减少了数据的索引量，大幅提升数据查询速度。
[0025]
步骤2，数据库读取查询在开始之前要开启缓存，后端程序通过数据库接口获取数据库的数据；当查询完全相同时(逐字节相同)，就不用到数据库中执行查询，而直接调用缓存中的结果，免去了上百万的数据检索。以mysql数据库为例，开启缓存的sql语句为：
[0026]
set global query_cache_type＝1；
[0027]
set global query_cache_size＝600000；
[0028]
步骤3，前端发送ajax并发请求，后端程序响应请求后将压缩后的数据发送给前端。如图2所示，前端程序处理用户的查询请求，将一个包含百万数据量的查询语句平均分为多个并发请求，并发请求量需要经过测试决定。通过并发函数控制并发请求数量，测试不同的并发量下从请求到数据渲染结束的时间，选择最适合当前数据库以及服务器性能的并发量。经过调控测试，用时最短即最适合数据承载的并发量为2。发送多个并发请求后，后端根据请求内容从数据库执行sql语句，将查询结果压缩返回给前端；后端程序以.net平台的c#代码为例，将数据压缩并返回的代码为：filtercontext.httpcontext.response.filter＝newgzipstream(filtercontext.httpcontext.response.filter,compressionmode.compress)
[0029]
步骤4，在数据配置到echarts之前，先根据不同的查询条件生成的不同的echarts参数配置，所述参数包括如下的一种或多种：标题组件属性，图例组件属性，直角坐标系中的x轴属性，直角坐标系中的y轴属性，区域缩放组件，序列名称属性，序列类型属性，线条样式属性，线条颜色属性，区域填充样式属性，区域颜色属性，数据堆叠属性，线两端的标记类型属性，线两端的标记的显示样式等属性。系列(series)中的sampling属性可以在数据量远大于像素点时候的降采样策略，开启后可以有效的优化图表的绘制效率。
[0030]
添加统一封装的配置项datazoom，包括滑动条型数据区域缩放组件datazoomslider和内置型数据区域缩放组件(datazoominside)，datazoom通过数据过滤以及在内部设置轴的显示窗口来达到数据窗口缩放的效果，实现缩放展示每一个数据点详细数据。
[0031]
步骤5，如图2所示，前端程序对于每一次请求返回的数据，用异步函数异步调用
echartsinstance.appenddata接口，此接口用于，在大数据量(百万以上)的渲染场景，分片加载数据和增量渲染。在大数据量的场景下往往需要分片加载。appenddata接口提供了分片加载后增量渲染的能力，渲染新加入的数据块时不会清除原有已经渲染的部分。一次请求的数据量加载完成后，使用echartsinstance.resize()及时将数据渲染至画面中，每一次请求完成后都渲染一次画面，使曲线图动态不间断地递增显示。
[0032]
在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。
[0033]
以上所述仅为本技术的优选实施例，并不用于限制本技术，对于本领域的技术人员来说，本技术可以有各种更改和变化。凡在本技术的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本技术的保护范围之内。