CN114968231A - 一种用于数据和图表的可视化组件响应式布局方法和系统 - Google Patents

Abstract

本发明提出一种用于数据和图表的可视化组件响应式布局方法和系统。方法包括：将屏幕上显示的看板上的栅格进行划分，栅格之间设置有边距，当屏幕大小发生变化时，根据屏幕实际宽高划分栅格，并将组件配置在栅格上，组件相对整个屏幕的比例不变；组件为数据和/或图表组成的可视化文件；将组件划分为不同的层次；通过监听组件尺寸的变化，并根据当前组件的尺寸及布局配置选择出最适合当前大小看板的布局模式，同时每个原子组件在尺寸变化时也执行原子图表组件自身的重新绘制，实现组件的自适应布局配置。本发明提出一种支持组件响应式布局组件的通用开发方法，以便技术人员可以快速的开发出保证质量的可视化组件。

Description

一种用于数据和图表的可视化组件响应式布局方法和系统

技术领域

本发明属于可视化领域，尤其涉及一种用于数据和图表的可视化组件响应式布局方法和系统。

背景技术

当前，数据可视化系统(商用的一般称之为BI系统)的主旨主要是借助图形化手段，清晰有效的展现数据的多种维度以及传达数据分析的信息，以便于用户从数据的视角，借助可视化(图形化、视觉)手段对行业业务情况进行描述以及更深入的洞察、分析、发掘数据规律的过程。

目前业界的可视化系统，通常是使用一些开源或商用的数据可视化分析工具：tableau，powerbi,Superset，Metabase,dataease，这种工具的使用方式通常是：选择数据源，包括要展示的数据指标及数据维度，选择要展现的图表类型，配置图表样式属性等形成一个可视化图表组件，然后在画布中拖拽调整图表组件的位置来实现调整页面布局。

在特定的应用场景或特定的行业中应用时，需要根据行业的业务需求，要解决的问题设计要分析的数据指标和数据分析维度，有时会需要一些复杂的图表或图集，有时需要汇聚多个子系统数据及做一些数据处理，这时也会有一些专注于特定行业的低代码平台或商业BI解决方案(fineBI)，或者直接由业务人员设计图表，技术人员使用现有的图表库(datav,echarts，antv)协作开发出各种不同类型或展现形式的复杂组合图表组件。

数据可视化页面的自适应布局功能是数据可视化系统的重要功能，用户在制作好页面给其他人查看的时候，经常遇到由于不同屏幕分辨率、长宽比、大小屏幕切换、浏览器缩放等问题导致仪表板变形或者显示不全等问题。

现有技术的缺点：

由于通常是期望能更普适性的支持大部分客户，给予了客户非常大的自由度，但同时也给不懂IT技术的客户带来了使用门槛，想正确表达数据的意义，用数据讲述论证一个清晰的问题，需要客户具备一定的数据知识和对it技术有一定的基础了解。

1、客户的学习成本高，数据可视化页面搭建周期长；

可视化系统或业界的低代码平台的做法，通常数据展现形式单一，为数据选择合适的图表类型以及给图表装载数据的方式对于客户来说复杂费时，需要客户对数据有一定的基本知识，对企业系统的业务数据有一定的了解，才能从一系列数据表中选择出要分析的数据指标和维度，而且大型企业的管理系统通常有多个业务子系统，构造多个子系统的数据组合或数据分析，或者对一组图形配置多个数据源及数据处理对于客户来说有一定的使用门槛。

仪表板布局方式上，网格布局调整视图虽然很自由，但是栅格间距也就是组件在页面中的最小移动单位通常是较小的网格(如1px)，客户想调整对齐一篇可视化组件的组合，也是需要花精力去慢慢调整的。并且一个多个图形组合的可视化组件在设计期，客户想要调整组件的大小时，有时还需要同时调整组件内部布局。或者在运行期，大屏幕和小屏幕，也可能有期望展现成不同的布局形式的需求。

2、开发可视化组件的时间周期长、时间成本高；

用现成的图表库开发组件，虽然使用更自由了，但是不同的企业做项目数据监控时，各家的管理水平模式都或多或少的有些差异，如何快速的设计，定制化的快速开发也是需要解决的问题。另外在同一个项目中，每种图表的options(配置项)配置非常类似，这就给需求，设计和开发都带来了不少重复性工作和冗余代码。组件的配置繁复，复用性低、没有通用的组件开发方法。

3、业界常见缩放方案的技术局限性：

1)基于Scale(缩放)方案：

常见方案1，采用在保留一定最小高度或最小宽度的情况下，对整个页面图形进行等比缩放，该方案通常会导致页面无法有效充满显示屏幕。

常见方案2，采用在保留一定最小高度或最小宽度的情况下，对整个页面图形采用非等比缩放充满整个可视化区域，该方案通常会导致页面中的图形、文字元素发生变形。

且上述两种方案，都会使页面中的图形、图表与文字由于缩放导致失真。

2)基于rem的缩放方案：当缩小至根元素fontsize(文字大小)<10px时，其中，由于浏览器展示的最小字号是10px，文字不能被再缩小，会出现比例不协调的情况。而且echarts图表里的参数没办法应用rem的比例。

发明内容

为解决上述技术问题，本发明提出一种用于数据和图表的可视化组件响应式布局方法的技术方案，以解决上述技术问题。

本发明第一方面公开了一种用于数据和图表的可视化组件响应式布局方法；所述方法包括：

将屏幕上显示的看板上的栅格进行划分，所述栅格之间设置有边距，当屏幕大小发生变化时，根据屏幕实际宽高划分栅格，并将组件配置在所述栅格上，所述组件相对整个屏幕的比例不变；所述组件为数据和/或图表组成的可视化文件；

将组件划分为不同的层次，所述组件包括：原子组件和组件基类；所述组件即可视化组件。可视化组件继承自组件基类，所以组件具备组件基类中描述的组件的基本特性。

通过监听组件尺寸的变化，并根据当前组件的尺寸及布局配置选择出最适合当前大小看板的布局模式，同时每个原子组件在尺寸变化时也执行原子图表组件自身的重新绘制，通过抽提组件不同层次的共性和特性，实现所述组件的自适应布局配置；完成组件响应式布局。

根据本发明第一方面的方法，在看板布局中：将栅格进行划分，如果是电脑端显示，将显示的屏幕横向划分为4或者6个方格；如果是移动端显示，将显示的屏幕横向划分为2个方格；组件的行和列设置为可任意拖动，所述栅格的最小宽高为1单位宽度即1个栅格的宽度；所述组件不重叠且所述组件的上边缘吸附在所述栅格/看板的顶部。

根据本发明第一方面的方法，所述将组件划分为不同的层次：

所述原子组件是组件的最小粒度，不可拆分，没有业务含义，通过与所述组件基类组合构成组件或组件的标题框、组件的筛选框、视图的筛选框、导航条中的至少一种。

所述原子组件为在原子组件基类上封装基础图标组件；通过封装，形成一套基础图表组件，并形成一套标准的基础可视化图表组件库；

所述组件基类包括组件的基础特性和行为、基于vue形式的组件基类；所述组件基类是对所述组件需要具备的基础特性做封装，并且所有的组件继承组件基类；

根据本发明第一方面的方法，所述组件响应式布局包括弹性布局：在vue模板内通过配置，构建出一个弹性布局的缩放的组件，使用的原子组件在屏幕大小变化时可以自适应的进行弹性缩放布局。

根据本发明第一方面的方法，所述组件内部的原子组件所占比例可自适应的弹性伸缩，所述原子组件作为布局组件的子组件，所述子组件的容器为子容器，所述组件的容器为父容器，子组件之间的布局方式受父容器约束，同时定义子容器为固定的宽高或其占父容器的比例。

根据本发明第一方面的方法，所述弹性布局的缩放方法为：

1)在组件所占宽度小于高度时，显示为列布局，每列显示一个组件的子组件；

2)在组件所占高度大于宽度时，显示为行布局，每行显示一个组件的子组件；

3)组件在布局模式下，当所述组件所占的栅格数为1*1时，显示为轮播模式，将所有的原子组件按轮播模式展示。

根据本发明第一方面的方法，所述组件响应式布局还包括灵活布局：给每个原子组件配置一个在组件内的唯一的id，再配置一组布局配置项；当监听到组件尺寸变化时，根据当前组件的尺寸，选择布局配置项中的最合适的配置项重新布局；

所述组件的布局配置项包括：单位尺寸、组件尺寸、布局尺寸、单元格；

单位尺寸：当前画布中单个栅格的尺寸，由单个数字组成；

组件尺寸：当前组件所占栅格的数量；

布局尺寸：组件内部布局；

单元格：每个原子组件的尺寸。

根据本发明第一方面的方法，当监听到组件变化时，通过当前的单位栅格尺寸和组件在横向和纵向所占的栅格的数量，选择最合适当前尺寸下的布局配置，具体方法如下：

步骤1：解析组件布局配置；

步骤2：计算当前看板单位栅格尺寸；

步骤3：获取组件符合当前看板尺寸的布局配置项；

步骤4：计算当前组件尺寸；

步骤5：选择最适合当前组件尺寸的布局配置项；

步骤6：恢复组件初始样式及dom结构；

步骤7：按布局配置渲染组件布局。

本发明第二方面公开了一种用于数据和图表的可视化组件响应式布局系统；所述系统包括：

第一处理模块，被配置为，将屏幕上显示的看板上的栅格进行划分，所述栅格之间设置有边距，当屏幕大小发生变化时，根据屏幕实际宽高划分栅格，并将组件配置在所述栅格上，所述组件相对整个屏幕的比例不变；所述组件为数据和/或图表组成的可视化文件；

第二处理模块，被配置为，将组件划分为不同的层次，所述组件包括：原子组件和组件基类；

第三处理模块，被配置为，通过监听组件尺寸的变化，并根据当前组件的尺寸及布局配置选择出最适合当前大小看板的布局模式，同时每个原子组件在尺寸变化时也执行原子图表组件自身的重新绘制，通过抽提组件不同层次的共性和特性，实现所述组件的自适应布局配置；完成组件响应式布局。

根据本发明第二方面的系统，所述第一处理模块具体被配置为，在看板布局中：将栅格进行划分，如果是电脑端显示，将横向划分为4或者6个方格；如果是移动端显示，将用户横向划分为2个方格；组件的行和列设置为可任意拖动，所述栅格的最小宽高为1单位宽度即1个栅格的宽度；所述组件不重叠且所述组件的上边缘吸附在所述栅格/看板的顶部。

根据本发明第二方面的系统，所述第二处理模块具体被配置为，所述将组件划分为不同的层次：

所述原子组件是组件的最小粒度，不可拆分，没有业务含义，通过与所述组件基类组合构成组件或组件的标题框、组件的筛选框、视图的筛选框、导航条中的至少一种。

所述原子组件为在原子组件基类上封装基础图标组件；通过封装，形成一套基础图表组件，并形成一套标准的基础可视化图表组件库；

所述组件基类包括组件的基础特性和行为、基于vue形式的组件基类；所述组件基类是对所述组件需要具备的基础特性做封装，并且所有的组件继承组件基类。

根据本发明第二方面的系统，所述第三处理模块具体被配置为，所述组件响应式布局包括弹性布局：在vue模板内通过配置，构建出一个弹性布局的缩放的组件，使用的原子组件在屏幕大小变化时可以自适应的进行弹性缩放布局；在组件在被拖拽成横向矩形时，原子组件展示为列布局。

根据本发明第二方面的系统，所述第三处理模块具体被配置为，所述组件内部的原子组件所占比例可自适应的弹性伸缩，所述原子组件作为布局组件的子组件，所述子组件的容器为子容器，所述组件的容器为父容器，子组件之间的布局方式受父容器约束，同时定义子容器为固定的宽高或其占父容器的比例。

根据本发明第二方面的系统，所述第三处理模块具体被配置为，所述弹性布局的缩放为：

1)在组件所占宽度小于高度时，显示为列布局，每列显示一个组件的子组件；

2)在组件所占高度大于宽度时，显示为行布局，每行显示一个组件的子组件；

3)组件在布局模式下，当所述组件所占的栅格数为1*1时，显示为轮播模式，将所有的原子组件按轮播模式展示。。

根据本发明第二方面的系统，所述第三处理模块具体被配置为，所述组件响应式布局还包括灵活布局：给每个原子组件配置一个在组件内的唯一的id，再配置一组布局配置项；当监听到组件尺寸变化时，根据当前组件的尺寸，选择布局配置项中的最合适的配置项重新布局；

所述组件的布局配置项包括：单位尺寸、组件尺寸、布局尺寸、单元格；

单位尺寸：当前画布中单个栅格的尺寸，由单个数字组成；

组件尺寸：当前组件所占栅格的数量；

布局尺寸：组件内部布局；

单元格：每个原子组件的尺寸。

根据本发明第二方面的系统，所述第三处理模块具体被配置为，当监听到组件变化时，通过当前的单位栅格尺寸和组件在横向和纵向所占的栅格的数量，选择最合适当前尺寸下的布局配置，具体如下：

步骤1：解析组件布局配置；

步骤2：计算当前看板单位栅格尺寸；

步骤3：获取组件符合当前看板尺寸的布局配置项；

步骤4：计算当前组件尺寸；

步骤5：选择最适合当前组件尺寸的布局配置项；

步骤6：恢复组件初始样式及dom结构；

步骤7：按布局配置渲染组件布局。

本发明第三方面公开了一种电子设备。电子设备包括存储器和处理器，存储器存储有计算机程序，处理器执行计算机程序时，实现本公开第一方面中任一项的一种用于数据和图表的可视化组件响应式布局方法中的步骤。

本发明第四方面公开了一种计算机可读存储介质。计算机可读存储介质上存储有计算机程序，计算机程序被处理器执行时，实现本公开第一方面中任一项的一种用于数据和图表的可视化组件响应式布局方法中的步骤。

可见，本发明提出的方案，具有如下有益效果：本申请的方法打破常规BI系统可视化组件配置数据的方式，将业务指标集成到可视化组件中去，为业务指标选择更合适展示的图表类型，开发出具有业务含义的可视化组件直接供客户选择使用，大大降低了客户的使用门槛。提出一套规范性设计的方法以及通用性的组件化的开发方法，采用自适应(响应式)的布局可以兼顾各种比例大小的屏幕。

附图说明

为了更清楚地说明本发明具体实施方式或现有技术中的技术方案，下面将对具体实施方式或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为现有技术的Superset创建可视化组件的方式；

图2为现有技术的dataease创建可视化组件的方式；

图3为根据本发明实施例的一种用于数据和图表的可视化组件响应式布局方法的流程图；

图4为根据本发明实施例的一种用于数据和图表的可视化组件响应式布局方法的页面布局模式示意图；

图5为根据本发明实施例的一种用于数据和图表的可视化组件响应式布局方法的组件层次划分示意图；

图6为根据本发明实施例的一种用于数据和图表的可视化组件响应式布局方法的组件布局示意图；

图7为根据本发明实施例的一种用于数据和图表的可视化组件响应式布局方法的弹性布局示意图；

图8为根据本发明实施例的一种用于数据和图表的可视化组件响应式布局方法的配置项示意图；

图9为根据本发明实施例的一种用于数据和图表的可视化组件响应式布局系统的结构图；

图10为根据本发明实施例的一种电子设备的结构图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例只是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

现有的可视化平台的做法：

连接到数据源，选择要分析的数据指标，或选择具体的数据表以及要分析的数据维度，然后配置数据的呈现形式：选择展示的图表类型，配置调整图表属性，最终形成一个可视化组件。然后在画布中拖拽调整可视化组件的位置，图1和图2分别是Superset和dataease创建可视化组件的方式。

还有一些可视化搭建系统或低代码平台如宜搭、微搭等，先选择数据展现的图表形式，如柱状图，饼图，仪表盘等，拖拽到画布上，然后根据需要给图表组件配置符合其数据格式的数据，组件基础样式等。

在仪表板布局上，通常采用网格布局的方式，把平面按规划分成多个单元小格子，每个组件占据一定数量的单元格，当屏幕大小发生变化时，随着屏幕实际宽高划分单元格，组件相对整个屏幕的比例不变。

在自适应缩放方案上，业界通常是以下两种方案：

1、基于整体scale(缩放)的方案

初始化的时候获取屏幕的比例，把这个比例设置给css的scale变量，监听浏览器的窗口大小，将新的比例赋给scale变量。

这样不管屏幕有多大，分辨率有多高，只要屏幕的比例和你定的比例一致，就可以尽可能还原设计稿的比例。

有些电商网站也是采用的scale的方案。

2、基于rem的自适应方法

首先计算缩放比，根据屏幕大小动态设置，根元素html的fontSize值。设置样式时，需要将元素长度单位转换为rem。

实施例：

为解决上述问题，本实施例公开了一种用于数据和图表的可视化组件响应式布局方法，所述方法包括：

将屏幕上显示的看板上的栅格进行划分，所述栅格之间设置有边距，当屏幕大小发生变化时，根据屏幕实际宽高划分栅格，并将组件配置在所述栅格上，所述组件相对整个屏幕的比例不变；所述组件为数据和/或图表组成的可视化文件。

通过监听组件尺寸的变化，并根据当前组件的尺寸及布局配置选择出最适合当前大小看板的布局模式，同时每个原子组件在尺寸变化时也执行原子图表组件自身的重新绘制，通过抽提组件不同层次的共性和特性，实现所述组件的自适应布局配置；完成组件响应式布局。

在看板布局中：将栅格进行划分，如果是电脑端显示，将显示的屏幕横向划分为4或者6个方格；如果是移动端显示，将显示的屏幕横向划分为2个方格；组件的行和列设置为可任意拖动，所述栅格的最小宽高为1单位宽度即1个栅格的宽度；所述组件不重叠且所述组件的上边缘吸附在所述栅格/看板的顶部。在认知心理学发现，人脑一次只能理解7+-2个信息，所以看板中的图表数量，最好也在5-9个之间，超过这个数目，只会造成信息干扰，为了让看板更清晰易懂好配，栅格缩减为4格或6格，移动端为2格，组件行列任意拖动，最小宽高为1单位宽度(1个栅格)，栅格间自带边距，保证相邻组件间具有相同的水平与垂直间距。当屏幕大小发生变化时，随着屏幕实际宽高划分单元格，组件相对整个屏幕的比例不变，布局方式如图4所示。

所述将组件划分为不同的层次：

所述原子组件是组件的最小粒度，不可拆分，没有业务含义，通过与所述组件基类组合构成组件或组件的标题框、组件的筛选框、视图的筛选框、导航条中的至少一种。

所述原子组件为在原子组件基类上封装基础图标组件；通过封装，形成一套基础图表组件，并形成一套标准的基础可视化图表组件库；

所述组件基类包括组件的基础特性和行为、基于vue形式的组件基类；所述组件基类是对所述组件需要具备的基础特性做封装，并且所有的组件继承组件基类；

所述组件包括标题、过滤器和容器(content)；

过滤器的作用是图表有时候会有过滤的需求，所以设置有过滤器；容器是指的装载可视化组件的容器；

组件不可重叠，吸附顶部，在空间允许的情况下，组件始终紧贴顶部边缘或上方组件，以及组件的规格设计如下：

整行组件:标题、工具栏等；

整列组件：组织项目导航面板；

方形组件n*n：单个图表

这时客户不用不断的去调整组件，就可以得到清晰简明布局的看板。

将组件划分为不同的层次，所述组件包括：原子组件和组件基类；

其中，原子组件是可视化组件的最小粒度的组件，不可拆分，没有业务含义，可通过组合构成组件或组件的标题框、组件的筛选框、视图的筛选框、导航条等。

原子组件继承自通用的原子组件基类，原子组件基类封装原子组件的共性，保证原子组件是flex布局的最小单元，支持可以传递size大小来调整原子组件在组件中的大小，支持在不同的主题下使用不同的色板等。

原子组件封装了基础类型的echarts图表组件(柱状图、线图、饼图、条形图、环形图等)，表格组件，文字指标组件、计时器、富文本、网页组件、轮播图以及实现一些特定的外观模式。通过封装，形成一套基础图表组件。

原子组件封装了大多数图表的公共样式配置，对外提供数据配置参数和部分样式参数配置。能很大程度的保证组件样式风格的一致性。

原子组件封装后，提供给设计和开发一套标准的基础可视化图表组件库，设计在设计大屏或bi页面时有了统一的参考设计模板，开发也从繁杂重复的图表配置中解脱出来去做一些其他更有技术含量的事情中去。

对组件需要具备的基础特性做了封装，所有组件继承组件基类。

在组件基类这一层中：定义了组件的共性的特性和处理逻辑，技术实现上如图5所示，分为两部分，一部分是用类的方式，描述了可视化组件基础特性和行为能力，一部分是基于vue实现的组件基类。

可视化组件基础特性和行为包括以下这些技术要点：

1)可视化组件基础特性和行为：

组件创建、刷新、销毁；

布局相关；

拖拽、吸附、缩放、全屏；

数据交互的能力；

快捷键支持；

组件和外界通信的能力；

2)Vue包装的基于一些视图要求的组件基类：

组件非响应式属性：页面布局列数、页面框架http对象

计算属性：组件当前所处的运行环境(web端、移动端)；

组件配置常量：

默认尺寸(即宽高默认所占栅格数量)

是否为整行组件(整行组件不允许拖动宽高，通用用于过滤条)

组件响应式属性：

上下文参数

组件基础可配置属性

组件模式(默认实时请求数据模式和使用示例数据模式)

组件尺寸(拖拽完成后的所占尺寸)

组件的基础布局(标题、筛选框、组件内容容器)；

监听上下文参数，可配置参数变化，以及变化后的公共处理逻辑；

组件根据配置渲染逻辑；

组件数据更新逻辑；

接收两种参数：系统的数据指标体系中的指标名称，数据接口url；

组件公共缩放处理逻辑、组件布局模式处理逻辑；

组件基类在布局及缩放处理上，提供了两种模式，用于开发简单缩放处理的组件，及复杂布局要求的图表组件。

具体的配置方式及处理逻辑见后图。

组件全屏/取消全屏显示方法

组件和外界通信的方法

组件销毁方法；

组件的快捷键支持。

在一些具体的实施例中，定义了数据可视化组件的vue开发代码模板，数据可视化组件需要实现的属性和方法有：

1)组件布局模式

组件内部的布局模式，分为两种模式：弹性布局模式，灵活布局模式。通过简单的配置就能实现组件在拖拽到不同大小时的展示样式，以及在不同大小屏幕时的展示样式。

灵活布局模式，支持配置组件在不同单位尺寸，占不同格子数时组件内部的布局模式。

弹性布局模式，内置了基础的组件尺寸变化时的布局变化模式。

2)组件配置常量：

组件可以配置的属性对象，如标题，筛选参数等，示例数据，用于不请求数据模式下使用。

3)组件获取数据逻辑

组件可以对接系统的数据指标体系，可以配置数据接口

4)支持组件自定义的缩放逻辑

在组件分层的处理后，开发组件变得非常简单，只需要在模板中选择组件需要的原子图表组件，配置组件的布局模式，添加获取数据的方法，就可以完成一个小组件的开发。

客户在制作看板时，有时候根据情况会调整组件的大小，制作好看板后，有时会在不同的屏幕下给其他人展示查看，由于不同屏幕分辨率、长宽比、大小屏幕切换、浏览器缩放等问题，看板中的组件可能会产生不同字体串行，字体图表展示失衡，图表变形等问题。

根据上述内容封装了图表组件作为原子组件，具有可视化组件中使用原子组件构成图表的组成部分。组件的内部容器结构可能有多种布局形式，如图6所示，主要由标题、原子组件,过滤器以及content容器组成，content容器的布局可能会有多种形式。

如果我们在每个组件中定义子组件的尺寸，以及定义组件不同大小时的布局配置逻辑，这样的开发过程也略显复杂，且重复性高，灵活性不足，而我们期望轻松的构建可以自适应调整布局的组件的，并且不需要开发在每个组件中写各式各样的缩放配置。

基于此我们设计了一种组件响应式布局模式的规则：可以对一个组件配置在不同单位尺寸，不同宽高时，显示不同的布局。通过监听组件尺寸的变化，基于当前尺寸及布局配置选择出最适合当前大小的布局模式，同时每个原子组件在尺寸变化时也会执行原子图表组件自身的重新绘制。这一套规则的解析在组件基类中实现，使所有的组件都可以通过简单的配置项就可以满足组件响应式布局的需求。

同时还设置了弹性布局模式，这种布局模式可以在模板中轻松配置组件的默认布局，以及默认就会支持最基础的缩放配置。组件在宽度大于高度时显示成行布局，在高度大于宽度时显示时显示成列布局。在极限小即1*1模式将组件的所有原子组件显示成轮播模式。

两种布局模式均由组件基类这一层提供，保证了所有组件，只需要简单的配置，就可以满足响应式布局。

另外，我们统一设计了pc端和移动端在不同尺寸范围内的字体大小，也能有效避免看板在不同尺寸设备上的展示效果偏差。

在一些实施例中，具体地，弹性布局，图7为根据本发明实施例的一种用于数据和图表的可视化组件响应式布局方法的弹性布局示意图；如图7所示，在vue模板内通过配置，构建出一个弹性布局的缩放的组件，使用的原子组件在屏幕大小变化时可以自适应的进行弹性缩放布局；在组件在被拖拽成横向矩形时，原子组件展示为列布局。

所述组件内部的原子组件所占比例可自适应的弹性伸缩，所述原子组件作为布局组件的子组件，所述子组件的容器为子容器，所述组件的容器为父容器，子组件之间的布局方式受父容器约束，同时定义子容器为固定的宽高或其占父容器的比例。

所述弹性布局的缩放方法为：

1)在组件所占宽度小于高度时，显示为列布局，每列显示一个组件的子组件；

2)在组件所占高度大于宽度时，显示为行布局，每行显示一个组件的子组件；

1和2的实现方式：只需要在监听到尺寸变化时，利用flex容器的属性，设置content容器的flex-direction为column或row即可。

3)组件在布局模式下，在极限小即1*1模式将业务组件的所有原子组件显示成轮播模式，将所有的原子组件按轮播模式展示；实现方式：递归找到content容器下的所有原子组件，将所有原子组件的布局的flex-grow设置为1，按轮播的模式显示即可。

弹性布局模式的主要设计思想是在vue模板内通过简单清晰的配置，即可以构建出一个弹性伸缩布局的组件，使用的原子组件在屏幕大小变化时可以自适应的进行弹性伸缩布局。另外组件在被拖拽成横向矩形时，原子组件展示为列布局，

为了实现组件在不同宽高时，组件内部的原子组件所占比例可以自适应的弹性伸缩，我们基于flex弹性布局的概念构建了三种用于实现不同布局的组件：纵向布局组件group-v、横向布局组件group-h、流式布局组件group-flow。原子组件可以作为布局组件的子组件，子组件之间的布局方式受父容器约束，同时支持设置size定义子容器为固定的宽高或其占父容器的比例。

如图7所示，在具体的实施例中，一个弹性容器组件flex-box中每一个子容器是一个弹性子容器flex-item，group-v组件中的子容器均是垂直排布，group-h组件中的容器均是水平排布，group-flow组件中的子容器为流式布局。通过三种组件的灵活组合即可轻松配置出一个弹性布局的容器。为每个子容器设置size(可以是数字也可以是百分比或固定的像素大小)即可达成父容器尺寸变化时子容器固定宽高或占父组件的比例固定不变。

flex-item根据size的定义设置flex-grow、flex-shrink和flex-basis来达到flex-item容器尺寸的设置。而且原子组件继承自原子组件基类，而原子组件基类继承自flex-item，继而达到轻松实现组件的弹性布局的。

在一些实施例中，还包括另一种布局模式，具体为灵活布局：给每个原子组件配置一个在组件内的唯一的id，再配置一组布局配置项；当监听到组件尺寸变化时，根据当前组件的尺寸，选择布局配置项中的最合适的配置项重新布局；

所述组件的布局配置项包括：单位尺寸、组件尺寸、布局尺寸、单元格；

单位尺寸：当前画布中单个栅格的尺寸，由单个数字组成；

组件尺寸：当前组件所占栅格的数量；

布局尺寸：组件内部布局；

单元格：每个原子组件的尺寸。

这种灵活布局模式，提供了一种更灵活的根据布局配置规则进行响应式布局的模式。只需配置组件中需要使用的原子组件，每个原子组件配置一个组件内唯一的id，再配置一组布局配置项，当监听到组件尺寸变化时，框架根据当前组件的尺寸，选择布局配置项中的最合适的配置项重新布局。

组件布局配置项规则的设计思想，如图8所示，每个子容器都是一个格子，子容器按顺序在组件内部流式排列，顶部吸附。为每个组件的布局设计配置项，我们需要配置当前组件所占栅格数，组件内部布局格子数，每个子容器占父容器的格子数。为了响应不同屏幕大小下的组件布局，我们还需要定义布局配置项所支持的单位栅格的尺寸范围。

在一些具体的实施例中，组件支持的每个布局配置项由4段组成：单位尺寸|组件尺寸|布局尺寸|单元格；

1、第一段，单位尺寸：当前画布中单个栅格的尺寸，由单个数字组成。

如两个配置项的第一段分别时0和200，

该段为0的配置项，代表该配置项为单位栅格大小在0到200时的布局配置。

该段为200的配置项，代表该配置项为单位栅格大小在大于200时的布局配置。

2、第二段，组件尺寸：当前组件所占格子数。如:1,3。逗号两边分别是宽度和高度。

1,3指组件占格子数为宽占一个栅格，高占3个栅格；

～3,1指组件的最小宽度maxW为3，h＝1；

3～,1指组件的最小宽度minW为3，h＝1；

～,～指组件的默认布局配置；

3、第三段，布局尺寸：指组件内部布局如2，3，其中2，3指的是组件内部布局为2行3列

4、第四段，单元格：每个原子组件的尺寸

a:1,1|b:1,2为子组件a宽1高1，子组件b宽1高2；轮播组件表示方法如下：a,b,c:1,1代表的一个轮播组件，轮播组件尺寸为宽1高1，轮播元素为子组件a、b、c；流式布局模式直接配置为flow

我们还可以设计了三段式简易布局配置，描述如下：单位尺寸|组件尺寸|布局模式

第一段配置同上，第二段配置同上，这段配置也可支持配置为width<height、height<width；第三段配置可以直接指定布局模式：horizontal(横向布局)、vertical(纵向布局)，carousel(轮播)。

组件可以配置多种布局模式，当监听到组件变化时，通过当前的单位栅格尺寸和组件在横向和纵向所占的栅格的数量，选择最合适当前尺寸下的布局配置，如图3所示，具体方法如下：

步骤1：解析组件布局配置，因为布局配置是一个字符串，解析出对象结构；

步骤2：计算当前看板单位栅格尺寸；

步骤3：获取组件符合当前看板尺寸的布局配置项；

步骤4：计算当前组件尺寸；

步骤5：选择最适合当前组件尺寸的布局配置项；

步骤6：恢复组件初始样式及dom结构；

步骤7：按布局配置渲染组件布局。

为了避免不同尺寸下，文本内容和图片内容的协调性，我们还对看板中的文字设计了不同的标准大小模式，在不同分辨率下显示不同的尺寸，这部分设计在原子组件开发时即封装在内，保证了所有组件在不同尺寸的设备上，文字显示大小的一致性。包括组件标题、组件内部子标题、指标卡片的文本和数值，图表的标签，表格的表头和内容，富文本组件等，我们统一设计了超大、大、中、小四种模式。设计看板和原子组件开发时统一按照这种字体的大小进行设计。

综上，本发明提出的方案能够降低客户使用的复杂度，同时还能快速的配出一篇讲清楚故事的看板。

本发明主要通过前端组件化的维度上解决上述通用技术缺点中的技术问题，以及提出一种复杂图表且支持响应式布局的前端组件的通用开发方法。以便技术人员可以快速的开发出保证质量的可视化组件：

1、简化组件数据及样式配置过程；

无需客户了解数据知识，了解图表的适合的数据结构，了解数据来源，配置繁复的数据源，所看到的组件具有一定的业务意义，实时查询业务系统的数据，直接就可以拖拽到画布中使用，只需要简单的配置查询参数及钻取逻辑即可，配置过程极简。

2、组件能够正确表达数据的意义

表达清楚一组数据的含义，有时候可能用简单单一的图形并不能表达清楚，有时候可能需要多个图形支持一组数据的展现，或者多个数据源的数据综合表达想要传达的数据的含义。

客户无需自己不断变换调整数据展现形式，组件为客户提供了相对更适宜好看的形式展现业务数据的分析结果。使用门槛大大降低，使用复杂度也大大降低。

3、在不同的屏幕大小下，组件可以展现成不同的布局形式。

组件支持开发通过配置项在不同的屏幕中展现成不同的布局，以及组件在设计期的画布中拖拽占用不同的栅格数时，也可以展现成不同的布局。

本发明第二方面公开了一种用于数据和图表的可视化组件响应式布局系统。图9为根据本发明实施例的一种用于数据和图表的可视化组件响应式布局系统的结构图；如图9所示，所述系统100包括：

第一处理模块101，被配置为，将屏幕上显示的看板上的栅格进行划分，所述栅格之间设置有边距，当屏幕大小发生变化时，根据屏幕实际宽高划分栅格，并将组件配置在所述栅格上，所述组件相对整个屏幕的比例不变；所述组件为数据和/或图表组成的可视化文件；

第二处理模块102，被配置为，将组件划分为不同的层次，所述组件包括：原子组件和组件基类；

第三处理模块103，被配置为，通过监听组件尺寸的变化，并根据当前组件的尺寸及布局配置选择出最适合当前大小看板的布局模式，同时每个原子组件在尺寸变化时也执行原子图表组件自身的重新绘制，通过抽提组件不同层次的共性和特性，实现所述组件的自适应布局配置；完成组件响应式布局。

根据本发明第二方面的系统，所述第一处理模块101具体被配置为，在看板布局中：将栅格进行划分，如果是电脑端显示，将横向划分为4或者6个方格；如果是移动端显示，将用户横向划分为2个方格；组件的行和列设置为可任意拖动，所述栅格的最小宽高为1单位宽度即1个栅格的宽度；所述组件不重叠且所述组件的上边缘吸附在所述栅格/看板的顶部。

根据本发明第二方面的系统，所述第二处理模块102具体被配置为，所述将组件划分为不同的层次：

所述原子组件是组件的最小粒度，不可拆分，没有业务含义，通过与所述组件基类组合构成组件或组件的标题框、组件的筛选框、视图的筛选框、导航条中的至少一种。

所述原子组件为在原子组件基类上封装基础图标组件；通过封装，形成一套基础图表组件，并形成一套标准的基础可视化图表组件库；

所述组件基类包括组件的基础特性和行为、基于vue形式的组件基类；所述组件基类是对所述组件需要具备的基础特性做封装，并且所有的组件继承组件基类。

根据本发明第二方面的系统，所述第三处理模块103具体被配置为，所述组件响应式布局包括弹性布局：在vue模板内通过配置，构建出一个弹性布局的缩放的组件，使用的原子组件在屏幕大小变化时可以自适应的进行弹性缩放布局；在组件在被拖拽成横向矩形时，原子组件展示为列布局。

根据本发明第二方面的系统，所述第三处理模块103具体被配置为，所述组件内部的原子组件所占比例可自适应的弹性伸缩，所述原子组件作为布局组件的子组件，所述子组件的容器为子容器，所述组件的容器为父容器，子组件之间的布局方式受父容器约束，同时定义子容器为固定的宽高或其占父容器的比例。

根据本发明第二方面的系统，所述第三处理模块103具体被配置为，所述弹性布局的缩放为：

1)在组件所占宽度小于高度时，显示为列布局，每列显示一个组件的子组件；

2)在组件所占高度大于宽度时，显示为行布局，每行显示一个组件的子组件；

3)组件在布局模式下，当所述组件所占的栅格数为1*1时，显示为轮播模式，将所有的原子组件按轮播模式展示。。

根据本发明第二方面的系统，所述第三处理模块103具体被配置为，所述组件响应式布局还包括灵活布局：给每个原子组件配置一个在组件内的唯一的id，再配置一组布局配置项；当监听到组件尺寸变化时，根据当前组件的尺寸，选择布局配置项中的最合适的配置项重新布局；

所述组件的布局配置项包括：单位尺寸、组件尺寸、布局尺寸、单元格；

单位尺寸：当前画布中单个栅格的尺寸，由单个数字组成；

组件尺寸：当前组件所占栅格的数量；

布局尺寸：组件内部布局；

单元格：每个原子组件的尺寸。

根据本发明第二方面的系统，所述第三处理模块103具体被配置为，当监听到组件变化时，通过当前的单位栅格尺寸和组件在横向和纵向所占的栅格的数量，选择最合适当前尺寸下的布局配置，具体如下：

步骤1：解析组件布局配置；

步骤2：计算当前看板单位栅格尺寸；

步骤3：获取组件符合当前看板尺寸的布局配置项；

步骤4：计算当前组件尺寸；

步骤5：选择最适合当前组件尺寸的布局配置项；

步骤6：恢复组件初始样式及dom结构；

步骤7：按布局配置渲染组件布局。

本发明第三方面公开了一种电子设备。电子设备包括存储器和处理器，存储器存储有计算机程序，处理器执行计算机程序时，实现本发明公开第一方面中任一项的一种用于数据和图表的可视化组件响应式布局方法中的步骤。

图10为根据本发明实施例的一种电子设备的结构图，如图10所示，电子设备包括通过系统总线连接的处理器、存储器、通信接口、显示屏和输入装置。其中，该电子设备的处理器用于提供计算和控制能力。该电子设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该电子设备的通信接口用于与外部的终端进行有线或无线方式的通信，无线方式可通过WIFI、运营商网络、近场通信(NFC)或其他技术实现。该电子设备的显示屏可以是液晶显示屏或者电子墨水显示屏，该电子设备的输入装置可以是显示屏上覆盖的触摸层，也可以是电子设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。

本领域技术人员可以理解，图10中示出的结构，仅仅是与本公开的技术方案相关的部分的结构图，并不构成对本申请方案所应用于其上的电子设备的限定，具体的电子设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

本发明第四方面公开了一种计算机可读存储介质。计算机可读存储介质上存储有计算机程序，计算机程序被处理器执行时，实现本发明公开第一方面中任一项的一种用于数据和图表的可视化组件响应式布局方法中的步骤中的步骤。

请注意，以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。以上实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。

Claims (10)

1.一种用于数据和图表的可视化组件响应式布局方法，其特征在于，所述方法包括：

将屏幕上显示的看板上的栅格进行划分，所述栅格之间设置有边距，当屏幕大小发生变化时，根据屏幕实际宽高划分栅格，并将组件配置在所述栅格上，所述组件相对整个屏幕的比例不变；所述组件为数据和/或图表组成的可视化文件；

将组件划分为不同的层次，所述组件包括：原子组件和组件基类；

通过监听组件尺寸的变化，并根据当前组件的尺寸及布局配置选择出最适合当前大小看板的布局模式，同时每个原子组件在尺寸变化时也执行原子图表组件自身的重新绘制，通过抽提组件不同层次的共性和特性，实现所述组件的自适应布局配置；完成组件响应式布局。

2.根据权利要求1所述的一种用于数据和图表的可视化组件响应式布局方法，其特征在于，在看板布局中：将栅格进行划分，如果是电脑端显示，将显示的屏幕横向划分为4或者6个方格；如果是移动端显示，将显示的横向划分为2个方格；组件的行和列设置为可任意拖动，所述栅格的最小宽高为1单位宽度即1个栅格的宽度；所述组件不重叠且所述组件的上边缘吸附在所述栅格/看板的顶部。

3.根据权利要求1所述的一种用于数据和图表的可视化组件响应式布局方法，其特征在于，所述将组件划分为不同的层次：

所述原子组件是组件的最小粒度，不可拆分，没有业务含义，通过与所述组件基类组合构成组件或组件的标题框、组件的筛选框、视图的筛选框、导航条中的至少一种。

所述原子组件为在原子组件基类上封装基础图标组件；通过封装，形成一套基础图表组件，并形成一套标准的基础可视化图表组件库；

所述组件基类包括组件的基础特性和行为、基于vue形式的组件基类；所述组件基类是对所述组件需要具备的基础特性做封装，并且所有的组件继承组件基类。

4.根据权利要求3所述的一种用于数据和图表的可视化组件响应式布局方法，其特征在于，所述组件响应式布局包括弹性布局：在vue模板内通过配置，构建出一个弹性布局的缩放的组件，使用的原子组件在屏幕大小变化时可以自适应的进行弹性缩放布局。

5.根据权利要求4所述的一种用于数据和图表的可视化组件响应式布局方法，其特征在于，所述组件内部的原子组件所占比例可自适应的弹性伸缩，所述原子组件作为布局组件的子组件，所述子组件的容器为子容器，所述组件的容器为父容器，子组件之间的布局方式受父容器约束，同时定义子容器为固定的宽高或其占父容器的比例。

6.根据权利要求5所述的一种用于数据和图表的可视化组件响应式布局方法，其特征在于，

所述弹性布局的缩放方法为：

1)在组件所占宽度小于高度时，显示为列布局，每列显示一个组件的子组件；

2)在组件所占高度大于宽度时，显示为行布局，每行显示一个组件的子组件；

3)组件在布局模式下，当所述组件所占的栅格数为1*1时，显示为轮播模式，将所有的原子组件按轮播模式展示。

7.根据权利要求3所述的一种用于数据和图表的可视化组件响应式布局方法，其特征在于，所述组件响应式布局还包括灵活布局：给每个原子组件配置一个在组件内的唯一的id，再配置一组布局配置项；当监听到组件尺寸变化时，根据当前组件的尺寸，选择布局配置项中的最合适的配置项重新布局；

所述组件的布局配置项包括：单位尺寸、组件尺寸、布局尺寸、单元格；

单位尺寸：当前画布中单个栅格的尺寸，由单个数字组成；

组件尺寸：当前组件所占栅格的数量；

布局尺寸：组件内部布局；

单元格：每个原子组件的尺寸。

8.根据权利要求7所述的一种用于数据和图表的可视化组件响应式布局方法，其特征在于，当监听到组件变化时，通过当前的单位栅格尺寸和组件在横向和纵向所占的栅格的数量，选择最合适当前尺寸下的布局配置，具体方法如下：

步骤1：解析组件布局配置；

步骤2：计算当前看板单位栅格尺寸；

步骤3：获取组件符合当前看板尺寸的布局配置项；

步骤4：计算当前组件尺寸；

步骤5：选择最适合当前组件尺寸的布局配置项；

步骤6：恢复组件初始样式及dom结构；

步骤7：按布局配置渲染组件布局。

9.一种用于数据和图表的可视化组件响应式布局系统，其特征在于，所述系统包括：

第一处理模块，被配置为，将屏幕上显示的看板上的栅格进行划分，所述栅格之间设置有边距，当屏幕大小发生变化时，根据屏幕实际宽高划分栅格，并将组件配置在所述栅格上，所述组件相对整个屏幕的比例不变；所述组件为数据和/或图表组成的可视化文件；

第二处理模块，被配置为，将组件划分为不同的层次，所述组件包括：原子组件和组件基类；

第三处理模块，被配置为，通过监听组件尺寸的变化，并根据当前组件的尺寸及布局配置选择出最适合当前大小看板的布局模式，同时每个原子组件在尺寸变化时也执行原子图表组件自身的重新绘制，通过抽提组件不同层次的共性和特性，实现所述组件的自适应布局配置；完成组件响应式布局。

10.一种电子设备，其特征在于，所述电子设备包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时，实现权利要求1至8中任一项所述的一种用于数据和图表的可视化组件响应式布局方法中的步骤。

Images