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

技术特征：
1.一种基于echarts的大量数据图形显示方法，其特征在于，包括以下步骤：用数据采集系统每秒从设备采集数据存储至数据库；网页前端发送多个并发请求；后端系统根据并发请求内容从数据库查询数据，将查询的数据压缩返回给网页前端；网页前端接收后端系统的查询数据，根据查询数据生成echarts参数配置项，并将查询数据传递给echarts组件；后端系统每返回一次查询数据，网页前端立即异步接收，并将查询数据添加至echarts参数配置。2.根据权利要求1所述的基于echarts的大量数据图形显示方法，其特征在于，具体流程为：数据采集系统每秒从设备采集数据存储至数据库，存储是以json格式存储，json数据格式采用以下形式：{vls:[[time1,data1],[time2,data2],
……
]}，其中time为x轴对应的时间位置，data为y轴需要展示的数据。3.根据权利要求1所述的基于echarts的大量数据图形显示方法，其特征在于，具体流程为：数据库在读取查询之前开启缓存，当查询完全相同时，直接调用缓存中的结果，不到数据库中执行查询。4.根据权利要求1所述的基于echarts的大量数据图形显示方法，其特征在于，具体流程为：生成的echarts参数配置均为json格式的数据，参数配置包括如下的一种或多种：标题组件属性，图例组件属性，系列sampling属性，直角坐标系中的x轴属性，直角坐标系中的y轴属性，区域缩放组件，序列名称属性，序列类型属性，线条样式属性，线条颜色属性，区域填充样式属性，区域颜色属性，数据堆叠属性，线两端的标记类型属性，线两端的标记的显示样式属性。5.根据权利要求1或4所述的基于echarts的大量数据图形显示方法，其特征在于，具体流程为：在数据配置到echarts之前，添加区域缩放组件datazoom，datazoom调用统一封装的配置文件，包括滑动条型数据区域缩放组件datazoomslider和内置型数据区域缩放组件datazoominside，datazoom通过数据过滤以及在内部设置轴的显示窗口来达到数据窗口缩放的效果，实现缩放展示每一个数据点详细数据。6.根据权利要求1所述的基于echarts的大量数据图形显示方法，其特征在于，具体流程为：网页前端处理用户的查询请求，将一个查询语句平均分为多个并发请求，当网页前端发送多个并发请求后，后端系统每返回一次数据，网页前端立刻发送下一次请求，同时将接收的数据通过appenddata接口方式加载到echarts中，一次请求的数据量加载完成后，调用resize接口及时将数据渲染至画面中，使曲线图动态不间断地增量显示。

技术总结
本发明公开了一种基于Echarts的大量数据图形显示方法，用数据采集系统每秒从设备采集数据存储至数据库；网页前端发送多个并发请求；后端系统根据并发请求内容从数据库查询数据，将查询的数据压缩返回给网页前端；网页前端接收后端系统的查询数据，根据查询数据生成Echarts参数配置项，并将查询数据传递给Echarts组件；后端系统每返回一次查询数据，网页前端立即异步接收，并将查询数据添加至Echarts参数配置。由于采集端按秒采集设备数据，数据量巨大，因此网页端的数据展示需采用分段加载、异步加载等优化方法，本发明可实现网页上对百万级的数据实现秒级的展现输出，流畅实现Echarts拖拽筛选等数据功能。畅实现Echarts拖拽筛选等数据功能。畅实现Echarts拖拽筛选等数据功能。


技术研发人员：张培军 张达鑫 宋爱国
受保护的技术使用者：江苏天和信息技术有限公司
技术研发日：2021.09.03
技术公布日：2022/1/10