CN115510361A

CN115510361A - 一种基于可视化配置的数据图表页面生成方法及相关设备

Info

Publication number: CN115510361A
Application number: CN202211279844.5A
Authority: CN
Inventors: 周健; 刘正强; 戴荣兴
Original assignee: Beijing Motie Sumeng Information Technology Co ltd
Current assignee: Beijing Motie Sumeng Information Technology Co ltd
Priority date: 2022-10-19
Filing date: 2022-10-19
Publication date: 2022-12-23

Abstract

本发明公开了一种基于可视化配置的数据图表页面生成方法及相关设备，所述方法包括：将数据分析系统页面的需求进行分析后整理得到四种页面模板，分别是表格+图表页、图表页、表格页和详情页；通过可视化页面配置四种页面模板的不同功能，并生成四种页面模板的JSON数据；根据目标页面选择页面模板，在进行页面渲染时，通过唯一ID获取JSON数据，解析JSON数据，并根据JSON数据的格式动态匹配组件，完成目标页面的展示；其中，所述目标页面为数据图表页面。本发明通过可视化配置快速搭建支持数据展示的数据图表页面的目的，节省开发资源，缩短项目周期，且具有高复用、易维护的特点。

Description

一种基于可视化配置的数据图表页面生成方法及相关设备

技术领域

本发明涉及互联网应用技术领域，尤其涉及一种基于可视化配置的数据图表页面生成方法、系统、终端及计算机可读存储介质。

背景技术

在互联网行业中，很多企业(公司)都有对应的数据分析系统，用来监测数据的变化。例如，产品经理通过收集公司内部对数据展示的需求后进行原型页面设计，一般这类系统都有着类似的功能，比如列表、图表、汇总、详情等，且不同数据纬度的页面功能基本类似。按照传统的开发方式，前端工作人员需要对每个页面进行单独的开发，这个过程中需要做太多重复的开发工作，且如果后期产品经理对页面进行调整时还需要前端开发人员频繁修改代码并重新部署，这种方式比较浪费开发资源。

在一些后台项目比如数据分析系统中存在着多数页面功能且交互基本类似，只有数据统计纬度不同的页面，在传统的开发流程中，每个同样功能的页面都对应一个或多个文件，开发工作是繁重的。当页面功能统一调整时也需要开发者重新一个页面的去修改代码并部署，这样会导致项目开发周期变长、操作复杂、效率低下的情况出现。

因此，现有技术还有待于改进和发展。

发明内容

本发明的主要目的在于提供一种基于可视化配置的数据图表页面生成方法、系统、终端及计算机可读存储介质，旨在解决现有技术中根据数据处理开发得到数据展示页面过程繁琐，浪费开发资源的问题。

为实现上述目的，本发明提供一种基于可视化配置的数据图表页面生成方法，所述基于可视化配置的数据图表页面生成方法包括如下步骤：

将数据分析系统页面的需求进行分析后整理得到四种页面模板，分别是表格+图表页、图表页、表格页和详情页；

通过可视化页面配置四种页面模板的不同功能，并生成四种页面模板的JSON数据；

根据目标页面选择页面模板，在进行页面渲染时，通过唯一ID获取JSON数据，解析JSON数据，并根据JSON数据的格式动态匹配组件，完成目标页面的展示；

其中，所述目标页面为数据图表页面。

可选地，所述的基于可视化配置的数据图表页面生成方法，其中，所述可视化页面配置包括表单页面配置和JSON编辑器配置。

可选地，所述的基于可视化配置的数据图表页面生成方法，其中，所述通过可视化页面配置四种页面模板的不同功能，具体包括：

当所述页面模板为表格+图表页时，支持配置检索条件、表格字段、公共API资源、图表、导出和汇总的功能；

当所述页面模板为图表页时，支持配置检索条件、表格字段、公共API资源、汇总和导出的功能；

当所述页面模板为表格页时，支持配置检索条件和图表的功能；

当所述页面模板为详情页时，支持配置检索条件、表格字段和汇总的功能。

可选地，所述的基于可视化配置的数据图表页面生成方法，其中，当配置功能为检索条件时，在后台页面中包括多种类型的检索条件，每种类型都存在相同或不同的属性，在添加检索条件后，通过选择条件类型后的单独设置进行不同属性的特殊配置；

当配置功能为表格字段时，目标页面列表区域展示字段在可视化页面中的表格字段配置模块进行配置，支持配置通用API接口、表头名称、字段、单元格宽度、是否排序、是否支持过滤、自定义样式、是否支持链接、关联查询条件、和集合字段；

当配置功能为公共API资源时，通过公共API资源配置模块，配置数据页面中的表格接口地址、请求方式、排序字段、排序方式和运算符；

当配置功能为图表时，当数据分析系统中存在图表需求时，在图表配置模块进行配置，支持配置图表类型、数据来源、主副标题、X轴字段和Y轴字段；

当配置功能为汇总时，在数据分析系统中汇总数据用于展示页面统计范围内的重点数据，并在汇总模块进行配置，支持配置名称、字段和格式过滤器；

当配置功能为导出时，对于存在导出功能的页面，在导出配置模块配置导出接口相关参数，通过表格配置需要导出的字段。

可选地，所述的基于可视化配置的数据图表页面生成方法，其中，每份JSON数据都对应一个唯一ID。

可选地，所述的基于可视化配置的数据图表页面生成方法，其中，所述解析JSON数据，并根据JSON数据的格式动态匹配组件，具体包括：

通过URL上的唯一ID获取到对应的JSON数据；

初始化JSON数据的JSON配置，包括Table、Search、Total、Export、Chart的配置，通过配置信息确认需要展示的动态组件。

可选地，所述的基于可视化配置的数据图表页面生成方法，其中，所述基于可视化配置的数据图表页面生成方法还包括：

在需要修改所述目标页面时，通过可视化页面配置修改对应ID下的JSON数据并执行保存。

此外，为实现上述目的，本发明还提供一种基于可视化配置的数据图表页面生成系统，其中，所述基于可视化配置的数据图表页面生成系统包括：

模板获取模块，用于将数据分析系统页面的需求进行分析后整理得到四种页面模板，分别是表格+图表页、图表页、表格页和详情页；

配置生成模块，用于通过可视化页面配置四种页面模板的不同功能，并生成四种页面模板的JSON数据；

页面渲染模块，用于根据目标页面选择页面模板，在进行页面渲染时，通过唯一ID获取JSON数据，解析JSON数据，并根据JSON数据的格式动态匹配组件，完成目标页面的展示；

其中，所述目标页面为数据图表页面。

此外，为实现上述目的，本发明还提供一种终端，其中，所述终端包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的基于可视化配置的数据图表页面生成程序，所述基于可视化配置的数据图表页面生成程序被所述处理器执行时实现如上所述的基于可视化配置的数据图表页面生成方法的步骤。

此外，为实现上述目的，本发明还提供一种计算机可读存储介质，其中，所述计算机可读存储介质存储有基于可视化配置的数据图表页面生成程序，所述基于可视化配置的数据图表页面生成程序被处理器执行时实现如上所述的基于可视化配置的数据图表页面生成方法的步骤。

本发明中，将数据分析系统页面的需求进行分析后整理得到四种页面模板，分别是表格+图表页、图表页、表格页和详情页；通过可视化页面配置四种页面模板的不同功能，并生成四种页面模板的JSON数据；根据目标页面选择页面模板，在进行页面渲染时，通过唯一ID获取JSON数据，解析JSON数据，并根据JSON数据的格式动态匹配组件，完成目标页面的展示；其中，所述目标页面为数据图表页面。本发明通过可视化配置快速搭建支持数据展示的数据图表页面的目的，节省开发资源，缩短项目周期，且具有高复用、易维护的特点。

附图说明

图1是本发明基于可视化配置的数据图表页面生成方法的较佳实施例的流程图；

图2是本发明基于可视化配置的数据图表页面生成方法的较佳实施例整个生成过程的示意图；

图3是本发明基于可视化配置的数据图表页面生成方法的较佳实施例中页面渲染过程的流程示意图；

图4是本发明基于可视化配置的数据图表页面生成方法的较佳实施例中目标页面展示效果的示意图；

图5是本发明基于可视化配置的数据图表页面生成系统的较佳实施例的原理示意图；

图6为本发明终端的较佳实施例的运行环境示意图。

具体实施方式

为使本发明的目的、技术方案及优点更加清楚、明确，以下参照附图并举实施例对本发明进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

本发明用于解决后台数据分析页面同质化严重，开发阶段代码重复的问题，通过对页面元素进行抽象，实现了通过可视化配置快速搭建支持数据展示的数据图表页面的目的。

本发明较佳实施例所述的基于可视化配置的数据图表页面生成方法，如图1和图2所示，所述基于可视化配置的数据图表页面生成方法包括以下步骤：

步骤S10、将数据分析系统页面的需求进行分析后整理得到四种页面模板，分别是表格+图表页、图表页、表格页和详情页。

具体地，对于一般数据分析系统来说，页面的展示形式相对单一，因此，本发明将数据分析系统页面的需求进行分析后整理出四种页面模板，分别是“表格+图表页”“图表页”“表格页”“详情页”。

步骤S20、通过可视化页面配置四种页面模板的不同功能，并生成四种页面模板的JSON数据。

具体地，所述可视化页面配置包括表单页面配置和JSON编辑器配置，其中，表单页面配置展示方式更倾向配置完成后的目标页面，配置效果更直观，上手简单；JSON编辑器配置方式的目标对象为熟悉JSON规范格式的人员，可以直接通过维护JSON的方式完成对页面的快速配置。

其中，当所述页面模板的类型为表格+图表页时，支持配置检索条件、表格字段、公共API资源、图表、导出和汇总的功能。

其中，当所述页面模板的类型为图表页时，支持配置检索条件、表格字段、公共API资源、汇总和导出的功能。

其中，当所述页面模板的类型为表格页时，支持配置检索条件和图表的功能。

其中，当所述页面模板的类型为详情页时，支持配置检索条件、表格字段和汇总的功能。

进一步地，当配置功能为检索条件时，在后台页面中包括多种类型的检索条件，每种类型都存在相同或不同的属性，在添加检索条件后，通过选择条件类型后的单独设置进行不同属性的特殊配置；另外，在操作列中，还可以通过点击“其它设置”打开配置弹窗，来修改同其他条件一样同时存在的相同属性。检索条件JSON格式中说明如下：

字段	含义
		text	检索条件文本
field	查询字段
		span	检索条件所占区域
placeholder	占位符
		type	检索条件类型

进一步地，当配置功能为表格字段时，目标页面列表区域展示字段在可视化页面中的表格字段配置模块进行配置，支持配置通用API接口、表头名称、字段、单元格宽度、是否排序、是否支持过滤等功能，同时在其他设置弹窗中还支持配置更具体的功能，比如自定义样式、是否支持链接、关联查询条件、和集合字段；表格字段JSON格式中说明如下：

进一步地，当配置功能为公共API资源时，通过公共API资源配置模块，配置数据页面中的表格接口地址、请求方式(post/get)、排序字段、排序方式(升序arc/降序desc)，运算符(接口取值字段)等内容；公共API资源JSON格式中说明如下：

字段	含义
		api	请求接口
method	请求方式
		orderByField	排序字段
orderDirect	排序方式
		jsonpath_expr	运算符

进一步地，当配置功能为图表时，数据分析系统大多都有图表展示的需求，用图表来展示数据的变化更为直观，当数据分析系统中存在图表需求时，在图表配置模块进行配置，支持配置图表类型、数据来源、主副标题、X轴字段和Y轴字段等内容；图表JSON格式中说明如下：

进一步地，当配置功能为汇总时，在数据分析系统中汇总数据用于展示页面统计范围内的重点数据，并在汇总模块进行配置，支持配置名称、字段和格式过滤器等内容；汇总JSON格式中说明如下：

字段	含义
		api	请求接口
method	请求方式
		jsonpath_expr	运算符
label	汇总文本
		field	汇总字段
valueFilter	格式过滤器

进一步地，当配置功能为导出时，对于存在导出功能的页面，在导出配置模块配置导出接口相关参数，通过表格配置需要导出的字段；配置JSON格式中说明如下：

字段	含义
		fileName	导出文件名
apiOptions	导出接口相关
		label	导出字段文本
field	导出字段
		valueFilter	格式过滤器

步骤S30、根据目标页面选择页面模板，在进行页面渲染时，通过唯一ID获取JSON数据，解析JSON数据，并根据JSON数据的格式动态匹配组件，完成目标页面的展示；其中，所述目标页面为数据图表页面。

具体地，如图3所示，通过在可视化页面配置完成对目标页面的配置工作以后，进行保存操作可以得到一份JSON数据，每份JSON数据都对应一个唯一ID，在页面渲染时，通过唯一ID获取JSON数据，解析JSON配置，渲染对应的检索条件、列表、图表、汇总、导出组件，完成目标页面的展示。

其中，解析JSON配置，匹配组件的过程为

(1)通过URL上的唯一ID获取到对应的JSON数据；

(2)初始化JSON配置，分别有Table、Search、Total、Export、Chart等配置，通过配置信息确认需要展示的动态组件；

(3)分别将各项配置信息初始化，作为动态组件属性传入，渲染出页面。

本发明提供了前端在面对数据分析管理后台项目页面数量多、功能点相似时的解决办法，通过开发可视化页面配置来达到快速搭建页面的目的，且具有高复用、易维护的特点；本发明实现了通过可视化页面配置来达到快速搭建数据分析页面的目的，通过可视化页面配置可以最大限度的保证页面质量以及优化后续修改部署流程，节省开发资源，缩短项目周期，同时可视化配置对非开发人员也很友好，做到了哪怕不熟悉代码，也可以上手自主配置新页面。

以下内容将描述从可视化页面配置到完成目标页面展示的流程。

新建页面：在动态表单列表页新建一个BI类型页面，选择目标页面的模板类型，切换模板类型，动态显示可支持的配置模块(表单、表格、图表、导出、汇总)，配置目标页面对应的查询条件、列表展示字段、图表类型、数据来源等信息，生成JSON。

(1)表单配置详情：

通过表单配置模块配置最后生成JSON格式，在表单配置模块可以配置查询条件的布局状态、label文本、检索条件类型、占位符、所占栅格数量、以及特殊类型选择器的配置，如下拉条件的数据来源等。

(2)列表配置详情：

在表格字段配置模块配置表格字段的表头名称、字段值、单元格宽度、是否排序等属性，同时配置列表数据来源，其中apiOptions对象就包含数据来源的具体数据，如请求方式、默认排序、接口地址等。

(3)图表配置详情：

在图表配置模块配置图表类型，选择柱状图或折线图等类型，然后配置图表数据来源，对应X轴Y轴取值字段，主标题副标题等具体内容。

配置路由：配置完成目标页面的JSON数据后，保存的JSON字符串对应唯一ID。目标系统展示时需要遍历所有添加到菜单资源里的页面，生成对应的菜单，通过点击菜单进入目标页面。

页面展示：完成对目标页面的配置并且添加到菜单资源以后，在目标系统打开页面，通过ID获取到JSON数据，根据JSON数据的格式动态匹配组件，达成目标页面的展示工作。在需要修改时，通过可视化配置页面修改对应ID下的JSON，执行保存，便可以实现最高效的动态配置工作，目标页面展示效果如图4所示。

本发明通过对页面元素、页面布局进行分析，按数据分析系统新增页面的业务需求选择页面模版，配置各模块功能，最后生成一套属于这个页面独有的JSON，按照JSON格式渲染出对应组件最后拼成页面，从而达到通过可视化页面快速配置新的数据分析页面，且具有可复用性增强、易维护、缩短后期开发时间的特点，亦可达到给企业提速增效的目的。

进一步地，如图5所示，基于上述基于可视化配置的数据图表页面生成方法，本发明还相应提供了一种基于可视化配置的数据图表页面生成系统，其中，所述基于可视化配置的数据图表页面生成系统包括：

模板获取模块51，用于将数据分析系统页面的需求进行分析后整理得到四种页面模板，分别是表格+图表页、图表页、表格页和详情页；

配置生成模块52，用于通过可视化页面配置四种页面模板的不同功能，并生成四种页面模板的JSON数据；

页面渲染模块53，用于根据目标页面选择页面模板，在进行页面渲染时，通过唯一ID获取JSON数据，解析JSON数据，并根据JSON数据的格式动态匹配组件，完成目标页面的展示；

其中，所述目标页面为数据图表页面。

进一步地，如图6所示，基于上述基于可视化配置的数据图表页面生成方法和系统，本发明还相应提供了一种终端，所述终端包括处理器10、存储器20及显示器30。图6仅示出了终端的部分组件，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。

所述存储器20在一些实施例中可以是所述终端的内部存储单元，例如终端的硬盘或内存。所述存储器20在另一些实施例中也可以是所述终端的外部存储设备，例如所述终端上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(SecureDigital,SD)卡，闪存卡(Flash Card)等。进一步地，所述存储器20还可以既包括所述终端的内部存储单元也包括外部存储设备。所述存储器20用于存储安装于所述终端的应用软件及各类数据，例如所述安装终端的程序代码等。所述存储器20还可以用于暂时地存储已经输出或者将要输出的数据。在一实施例中，存储器20上存储有基于可视化配置的数据图表页面生成程序40，该基于可视化配置的数据图表页面生成程序40可被处理器10所执行，从而实现本申请中基于可视化配置的数据图表页面生成方法。

所述处理器10在一些实施例中可以是一中央处理器(Central Processing Unit,CPU)，微处理器或其他数据处理芯片，用于运行所述存储器20中存储的程序代码或处理数据，例如执行所述基于可视化配置的数据图表页面生成方法等。

所述显示器30在一些实施例中可以是LED显示器、液晶显示器、触控式液晶显示器以及OLED(Organic Light-Emitting Diode，有机发光二极管)触摸器等。所述显示器30用于显示在所述终端的信息以及用于显示可视化的用户界面。所述终端的部件10-30通过系统总线相互通信。

在一实施例中，当处理器10执行所述存储器20中基于可视化配置的数据图表页面生成程序40时实现以下步骤：

其中，所述目标页面为数据图表页面。

其中，所述可视化页面配置包括表单页面配置和JSON编辑器配置。

其中，所述通过可视化页面配置四种页面模板的不同功能，具体包括：

其中，当配置功能为检索条件时，在后台页面中包括多种类型的检索条件，每种类型都存在相同或不同的属性，在添加检索条件后，通过选择条件类型后的单独设置进行不同属性的特殊配置；

其中，每份JSON数据都对应一个唯一ID。

其中，所述解析JSON数据，并根据JSON数据的格式动态匹配组件，具体包括：

通过URL上的唯一ID获取到对应的JSON数据；

其中，所述基于可视化配置的数据图表页面生成方法还包括：

本发明还提供一种计算机可读存储介质，其中，所述计算机可读存储介质存储有基于可视化配置的数据图表页面生成程序，所述基于可视化配置的数据图表页面生成程序被处理器执行时实现如上所述的基于可视化配置的数据图表页面生成方法的步骤。

综上所述，本发明提供一种基于可视化配置的数据图表页面生成方法及相关设备，所述方法包括：将数据分析系统页面的需求进行分析后整理得到四种页面模板，分别是表格+图表页、图表页、表格页和详情页；通过可视化页面配置四种页面模板的不同功能，并生成四种页面模板的JSON数据；根据目标页面选择页面模板，在进行页面渲染时，通过唯一ID获取JSON数据，解析JSON数据，并根据JSON数据的格式动态匹配组件，完成目标页面的展示；其中，所述目标页面为数据图表页面。本发明通过可视化配置快速搭建支持数据展示的数据图表页面的目的，节省开发资源，缩短项目周期，且具有高复用、易维护的特点。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者终端不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者终端所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者终端中还存在另外的相同要素。

当然，本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关硬件(如处理器，控制器等)来完成，所述的程序可存储于一计算机可读取的计算机可读存储介质中，所述程序在执行时可包括如上述各方法实施例的流程。其中所述的计算机可读存储介质可为存储器、磁碟、光盘等。

应当理解的是，本发明的应用不限于上述的举例，对本领域普通技术人员来说，可以根据上述说明加以改进或变换，所有这些改进和变换都应属于本发明所附权利要求的保护范围。

Claims

1.一种基于可视化配置的数据图表页面生成方法，其特征在于，所述基于可视化配置的数据图表页面生成方法包括：

其中，所述目标页面为数据图表页面。

2.根据权利要求1所述的基于可视化配置的数据图表页面生成方法，其特征在于，所述可视化页面配置包括表单页面配置和JSON编辑器配置。

3.根据权利要求1所述的基于可视化配置的数据图表页面生成方法，其特征在于，所述通过可视化页面配置四种页面模板的不同功能，具体包括：

4.根据权利要求3所述的基于可视化配置的数据图表页面生成方法，其特征在于，当配置功能为检索条件时，在后台页面中包括多种类型的检索条件，每种类型都存在相同或不同的属性，在添加检索条件后，通过选择条件类型后的单独设置进行不同属性的特殊配置；

5.根据权利要求1所述的基于可视化配置的数据图表页面生成方法，其特征在于，每份JSON数据都对应一个唯一ID。

6.根据权利要求1所述的基于可视化配置的数据图表页面生成方法，其特征在于，所述解析JSON数据，并根据JSON数据的格式动态匹配组件，具体包括：

通过URL上的唯一ID获取到对应的JSON数据；

7.根据权利要求1所述的基于可视化配置的数据图表页面生成方法，其特征在于，所述基于可视化配置的数据图表页面生成方法还包括：

8.一种基于可视化配置的数据图表页面生成系统，其特征在于，所述基于可视化配置的数据图表页面生成系统包括：

其中，所述目标页面为数据图表页面。

9.一种终端，其特征在于，所述终端包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的基于可视化配置的数据图表页面生成程序，所述基于可视化配置的数据图表页面生成程序被所述处理器执行时实现如权利要求1-7任一项所述的基于可视化配置的数据图表页面生成方法的步骤。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有基于可视化配置的数据图表页面生成程序，所述基于可视化配置的数据图表页面生成程序被处理器执行时实现如权利要求1-7任一项所述的基于可视化配置的数据图表页面生成方法的步骤。