基于后台管理系统数据可视化首页的实现方法及系统技术方案

本发明专利技术涉及数据管理技术领域，具体为基于后台管理系统数据可视化首页的实现方法包括以下步骤：使用masterGo进行了界面设计；使用html、css搭建页面；使用者精准查询观察数据；有益效果为：本发明专利技术提出的基于后台管理系统数据可视化首页的实现方法及系统用于web端的运行程序、触控交互或显示信息；发明专利技术的实现是由前端、后端、一数据库和一服务器配合搭建完成；其中数据走势图是一种基于ECharts的折线图表，可以分析数据近三十天的走向，界面显示的数据会根据后端每次返回的接口实时更新，可以取消人工数据统计，减少时间和人工成本，数据精准，界面美观，更方便使用该后台管理系统的人员观察、统计数据。统计数据。统计数据。

【技术实现步骤摘要】
基于后台管理系统数据可视化首页的实现方法及系统


[0001]本专利技术涉及数据管理
，具体为基于后台管理系统数据可视化首页的实现方法及系统。

技术介绍

[0002]企业数据统计是以统计的方法收集企业生产经营过程中的数量方面相关信息，再通过对信息的统计分析得出科学的结论作出预测来指导企业以后的生产经营。
[0003]现有技术中，企业传统数据统计是由人工手动统计，会有很多弊端：数据容易因为员工的疏忽出错，造成数据不够准确；数据较为分散，对数据进行分析时不够直观，数据不能实时更新。
[0004]但是，当企业用后台管理系统进行数据统计时，会有页面不知如何布局、不够美观等问题出现。

技术实现思路

[0005]本专利技术的目的在于提供基于后台管理系统数据可视化首页的实现方法及系统，以解决上述
技术介绍
中提出的问题。
[0006]为实现上述目的，本专利技术提供如下技术方案：基于后台管理系统数据可视化首页的实现方法，该实现方法包括以下步骤：
[0007]使用masterGo进行了界面设计；
[0008]使用html、css搭建页面；
[0009]使用者精准查询观察数据。
[0010]优选的，界面设计时，绘制出设计稿，整体页面设计采用了模块化数据展示。
[0011]优选的，在vue框架下按照设计稿使用html、css搭建页面，使用flex布局和rem单位实现适配屏幕展示。
[0012]优选的，使用select组件和input组件实现条件与精确的混合查询功能；
[0013]使用Pagination组件实现分页查看。
[0014]优选的，使用数据走势图形式作为展示，数据走势图基于ECharts的折线图表；
[0015]数据来源后台服务器接口返回的数据。
[0016]一种基于后台管理系统数据可视化首页的实现系统，该系统由界面设计模块、界面搭建模块以及查询模块构成；
[0017]界面设计模块，用于使用masterGo进行了界面设计；
[0018]界面搭建模块，用于使用html、css搭建页面；
[0019]查询模块，用于使用者精准查询观察数据。
[0020]优选的，所述界面设计模块中，界面设计时，绘制出设计稿，整体页面设计采用了模块化数据展示。
[0021]优选的，所述界面搭建模块中，在vue框架下按照设计稿使用html、css搭建页面，
使用flex布局和rem单位实现适配屏幕展示。
[0022]优选的，所述查询模块中，使用select组件和input组件实现条件与精确的混合查询功能；
[0023]使用Pagination组件实现分页查看。
[0024]优选的，所述查询模块中，使用数据走势图形式作为展示，数据走势图基于ECharts的折线图表；
[0025]数据来源后台服务器接口返回的数据。
[0026]与现有技术相比，本专利技术的有益效果是：
[0027]本专利技术提出的基于后台管理系统数据可视化首页的实现方法及系统用于web端的运行程序、触控交互或显示信息；专利技术的实现是由前端、后端、一数据库和一服务器配合搭建完成；其中数据走势图是一种基于ECharts的折线图表，可以分析数据近三十天的走向，界面显示的数据会根据后端每次返回的接口实时更新，可以取消人工数据统计，减少时间和人工成本，数据精准，界面美观，更方便使用该后台管理系统的人员观察、统计数据。
附图说明
[0028]图1为基于后台管理系统数据可视化的首页示意图；
[0029]图2为基于后台管理系统数据可视化的首页待办事项模块示意图；
[0030]图3为基于后台管理系统数据可视化的首页实时数据统计模块示意图；
[0031]图4为基于后台管理系统数据可视化的首页在途货物详情表模块示意图；
[0032]图5为基于后台管理系统数据可视化的首页历史数据统计模块示意图；
[0033]图6为基于后台管理系统数据可视化的首页货物数量走势模块示意图；
[0034]图7为基于后台管理系统数据可视化的首页排行榜模块示意图。
具体实施方式
[0035]为了使本专利技术的目的、技术方案进行清楚、完整地描述，及优点更加清楚明白，以下结合附图对本专利技术实施例进行进一步详细说明。应当理解，此处所描述的具体实施例是本专利技术一部分实施例，而不是全部的实施例，仅仅用以解释本专利技术实施例，并不用于限定本专利技术实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本专利技术保护的范围。
[0036]实施例一
[0037]请参阅图1至图7，本专利技术提供一种技术方案：基于后台管理系统数据可视化首页的实现方法，该实现方法包括以下步骤：
[0038]使用masterGo进行了界面设计；
[0039]使用html、css搭建页面；
[0040]使用者精准查询观察数据。
[0041]实施例二
[0042]基于后台管理系统数据可视化首页的实现方法，该实现方法包括以下步骤：首先使用masterGo进行了界面设计，绘制出设计稿，整体页面设计采用了模块化数据展示，数据分类清晰，界面简洁美观。接着在vue框架下按照设计稿使用html、css搭建页面，其中使用
了flex布局和rem单位来实现可以适配各种尺寸的屏幕展示，其显示屏幕面板可用于电脑、平板电脑、智能电视。为了让使用者精准查询观察数据，使用了select组件和input组件实现了条件与精确的混合查询功能。为了防止数据总数过多，用户观看效果不佳这种情况出现，使用了Pagination组件实现分页查看来解决这一问题。为了让用户更好地观察分析数据近30天的走向，使用了数据走势图这种形式作为展示，它是一种基于ECharts的折线图表。数据来源后台服务器接口返回的数据，数据真实，实时更新，可以让用户观察到最新的数据。
[0043]实施例三
[0044]一种基于后台管理系统数据可视化首页的实现系统，该系统由界面设计模块、界面搭建模块以及查询模块构成；
[0045]界面设计模块，用于使用masterGo进行了界面设计；界面设计时，绘制出设计稿，整体页面设计采用了模块化数据展示；
[0046]界面搭建模块，用于使用html、css搭建页面；在vue框架下按照设计稿使用html、css搭建页面，使用flex布局和rem单位实现适配屏幕展示；使用select组件和input组件实现条件与精确的混合查询功能；使用Pagination组件实现分页查看；
[0047]查询模块，用于使用者精准查询观察数据；使用数据走势图形式作为展示，数据走势图基于ECharts的折线图表；数据来源后台服务器接口返回的数据。
[0048]尽管已经示出和描述了本专利技术的实施例，对于本领域的普通技术人员而言，可以理解在不脱离本专利技术的原理和精神的情况下可以对这些实施例进行多种变化、本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.基于后台管理系统数据可视化首页的实现方法，其特征在于，该实现方法包括以下步骤：使用masterGo进行了界面设计；使用html、css搭建页面；使用者精准查询观察数据。2.根据权利要求1所述的基于后台管理系统数据可视化首页的实现方法，其特征在于：界面设计时，绘制出设计稿，整体页面设计采用了模块化数据展示。3.根据权利要求2所述的基于后台管理系统数据可视化首页的实现方法，其特征在于：在vue框架下按照设计稿使用html、css搭建页面，使用flex布局和rem单位实现适配屏幕展示。4.根据权利要求1所述的基于后台管理系统数据可视化首页的实现方法，其特征在于：使用select组件和input组件实现条件与精确的混合查询功能；使用Pagination组件实现分页查看。5.根据权利要求4所述的基于后台管理系统数据可视化首页的实现方法，其特征在于：使用数据走势图形式作为展示，数据走势图基于ECharts的折线图表；数据来源后台服务器接口返回的数据。6.一种如上述权利要求1
‑
5任意一项所述的基于后台管理系统数据可视化首页的实现系统，其特...

【专利技术属性】
技术研发人员：隋妲，宋明艳，陈士哲，赵策，胡振升，
申请(专利权)人：浪潮海链易贸山东信息科技有限公司，
类型：发明
国别省市：