[发明专利]前端大屏数据展示的系统

说明书

本发明公开了一种前端大屏数据展示的系统，包括；前端和管理后台；前端用于进行前端大屏数据展示；管理后台用于提供数据接口和展示模板并配置前端的前端展示项；其中，前端对于大屏数据展示包括以下步骤：步骤1、通过HTTP获取指定的项目配置；步骤2、绘制页面，通过配置信息设置页面背景图；步骤3、根据配置信息里面的接口地址，获取对应的数据及展示图像类型。本发明的有益之处在于，可以实现一套代码适用于多个大屏展示的项目需求，高效，快速，节约成本。

技术领域

本发明涉及一种前端大屏数据展示的系统。

背景技术

在大屏数据展示的项目开发过程中，通常在前端针对该项目绘制页面，然后后台接口直接通过页面请求数据。对于同一类型的项目，后续也只是在原有代码基础上复制一份出来，改接口，改样式。后续样式变更，接口变更等微调需求变更问题，只能通过修改代码等方式来实现。对此多个项目，就需要每个项目去改一遍代码，操作起来枯燥且浪费时间。

发明内容

为解决现有技术的不足，本发明提供了一种前端大屏数据展示的系统，通过预设模板配置相关信息的方式，在后端只需提供数据接口，可以实现一套代码适用于多个大屏展示的项目需求，高效，快速，节约成本。

为了实现上述目标，本发明采用如下的技术方案：

一种前端大屏数据展示的系统，包括；前端和管理后台；前端用于进行前端大屏数据展示；管理后台用于提供数据接口和展示模板并配置前端的前端展示项；

其中，

前端对于大屏数据展示包括以下步骤：

步骤1、通过HTTP获取指定的项目配置；

步骤2、绘制页面，通过配置信息设置页面背景图；

步骤3、根据配置信息里面的接口地址，获取对应的数据及展示图像类型。

进一步地，前端对于大屏数据展示还包括以下步骤：

步骤4、根据配置颜色信息，标题，利用echar绘制图形，展示步骤3获取的信息。

进一步地，展示模板包括：自定义模板和系统模板。

进一步地，管理后台对于大屏数据展示包括以下步骤：

步骤1、进入项目管理页面，配置项目信息；

步骤2、选择展示模板；

步骤3、保存配置。

进一步地，选择展示模板包括以下步骤：

对于自定义模板，自定义宽高以及相对于页面的X轴和Y轴的位置，对于系统模板，直接选择展示位置；

配置项目数据列表，需要绘制的图像类型，图像类型的信息，接口地址。

进一步地，配置项目信息包括：项目名称、项目类目列表、数据接口列表和项目背景图。

进一步地，配置项目信息时，每个项目仅能选用一种模板。

进一步地，根据配置信息里面的接口地址，获取对应的数据及展示图像类型包括以下步骤；

步骤1、对于自定义模板读取用户自定义宽高以及相对于页面的X轴和Y轴的位置，对于系统模板读取用户选择的展示位置获得系统预设位置信息；

步骤2、根据图像类型，拼接当前图像类型所需的数据格式；

步骤3、判断模板类型，根据模板类型选择对应的渲染方式。

进一步地，配置项目类目列表后，出现统计图类型列表以对区域统计图进行配置；