[发明专利]一种简化开发图表前后端设计方法及系统

说明书

本发明涉及一种简化开发图表前后端设计方法及系统，包括前端与后端，所述后端用以采集数据，并将采集到的数据通过统一的数据保存接口存储为时间与数据对象关系数组；所述前端配置样式参数和数据存储路径参数，并将数据存储路径参数传递到后端，用以查询时间与数据对象关系数组，并合并前端的样式参数完成echarts图表参数组装展示图表。本发明能够统一后端的数据采集格式，简化前端构造echarts图形参数，提高图表的开发效率。

技术领域

本发明涉及软件开发技术领域，特别是一种简化开发图表前后端设计方法及系统。

背景技术

百度echarts.js是优秀的图表展示前端框架，应用该框架能够将分散的监控数据直观的用图表形式展现出来，体现数据的分布，数据的变化历程，数据的相互关联关系等，为决策者提供更低门槛的数据表现，越来越多的数据展现使用echarts.js类似的前端图形化展现。

echart.js是基于json参数进行构造，为了其通用、美观、丰富的表现形式，其参数配置也是异常的复杂。该复杂程度对于新接触的开发人员是一个很耗时的调试测试再调试再测试过程，且多数参数可以设置为默认值，并且根据后台获取数据的不一致性可能导致前端的构造echarts图形的参数重复编写。

发明内容

有鉴于此，本发明的目的是提出一种简化开发图表前后端设计方法及系统，能够统一后端的数据采集格式，简化前端构造echarts图形参数，提高图表的开发效率。

本发明采用以下方案实现：一种简化开发图表前后端设计方法，包括步骤：前端将数据存储路径参数传递到后端，并根据样式参数与后端返回的数据完成echarts图表参数组装，展示图表。

进一步地，具体包括以下步骤：

步骤S11：前端html配置图形样式参数和数据存储路径参数，并将数据存储路径参数传递至到后端；

步骤S12：后端根据数据路径存储参数查询存储数据并返回查询结果至前端；

步骤S13：前端根据样式参数以及后端返回的数据完成echarts图表参数组装，展示图表。

进一步地，步骤S13具体为：前端根据样式参数以及后端的返回数据通过js操作组装成前端echart.js所需的图形json参数，echarts加载该图形json参数展现图表。

本发明还包括步骤：后端采集数据后通过统一的数据保存接口保存至存储中。

进一步地，后端将采集到的数据存储为时间与数据对象关系数组。

进一步地，所述采集到的数据包括单一数据对象或数组数据对象。

同时，数据采集包括单一时间数据采集和多时间数据采集，所采集的数据为数据对象，不是监控对象的单一值，而是该时间点该对象对监控有效的多方面的数据集合，可一次性获取监控对象的多方面的数据值。

进一步地，所述存储包括但不限于关系型数据库、缓存数据库、或文本文件。

较佳的，所述的数据采集策略包括但不限于：定时任务、数据写死。

较佳的，所述的样式参数和数据存储路径参数包括但不限制于通过属性传递的方式来传递，并且都可设置在data-data属性中。

本发明还提供了一种简化开发图表前后端的系统，包括前端与后端，

所述后端用以采集数据，并将采集到的数据通过统一的数据保存接口存储为时间与数据对象关系数组；

所述前端配置样式参数和数据存储路径参数，并将数据存储路径参数传递到后端，用以查询时间与数据对象关系数组，并合并前端的样式参数完成echarts图表参数组装展示图表。