(12)发明专利申请
(10)申请公布号 CN 110597586 A(43)申请公布日 2019.12.20
(21)申请号 201910765518.7(22)申请日 2019.08.19
(71)申请人 北京邮电大学
地址 100876 北京市海淀区西土城路10号
北京邮电大学新科研楼627室(72)发明人 鄂海红 宋美娜 宋雅 朱永波 (74)专利代理机构 北京清亦华知识产权代理事
务所(普通合伙) 11201
代理人 王艳斌(51)Int.Cl.
G06F 9/451(2018.01)G06F 3/0484(2013.01)
权利要求书2页 说明书11页 附图3页
CN 110597586 A(54)发明名称
基于拖拽的组件化布局大屏方法和装置(57)摘要
本发明公开了一种基于拖拽的组件化布局大屏方法和装置，其中，方法包括以下步骤：导入静态数据Excel/csv文件和关系型数据库数据；根据导入的静态数据Excel/csv文件和关系型数据库数据选择目标数据源，通过视图模型生成可视化视图，其中，所述视图模型包括图表组件和自定义组件；根据拖拽指令将所述可视化视图在画布内自由拖拽布局，以实现对所述图表组件和所述自定义组件进行样式配置。该方法将复杂数据通过可视化的方式展现出来，将各类组件在大屏内自由拖拽，灵活布局，可以满足各种不同的业务场景，有效解决目前常用的大屏可视化系统组件单一、布局定制、且无法让用户根据自己的实际场景制作大屏的问题。
CN 110597586 A
权 利 要 求 书
1/2页
1.一种基于拖拽的组件化布局大屏方法，其特征在于，包括以下步骤：导入静态数据Excel/csv文件和关系型数据库数据；
根据导入的静态数据Excel/csv文件和关系型数据库数据选择目标数据源，通过视图模型生成可视化视图，其中，所述视图模型包括图表组件和自定义组件；以及
根据拖拽指令将所述可视化视图在画布内自由拖拽布局，以实现对所述图表组件和所述自定义组件进行样式配置。
2.根据权利要求1所述的方法，其特征在于，所述导入静态数据Excel/csv文件和关系型数据库数据，包括：
接收用户上传的所述Excel/csv文件，和/或，采集数据并经过数据治理后生成所述csv文件；和/或
从关系型数据库中读取所述关系型数据库数据。3.根据权利要求1所述的方法，其特征在于，还包括：根据选中的画布尺寸、背景色、画布缩放、画布内组件改变配置项。4.根据权利要求1所述的方法，其特征在于，还包括：通过拖拽或者点击将所述图表组件进入画布，并在在所述画布内自由拖拽，监听并记录每个组件的位置；
在所述图表组件拖拽到所述画布过程中，将所述图表组件的draggable属性设置为true，并监听ondragstart事件，在选中的图表元素拖拽动作开始时执行；
在所述图表组件在所述画布中拖拽的过程中，监听ondrop事件，即把所述图表组件放到所述画布上时触发，监听ondragover事件，当所述图表组件在所述画布上拖动时执行。
5.根据权利要求1所述的方法，其特征在于，还包括：对所述自定义组件的拖拽封装一个DragTool组件，在所述DragTool组件内记录组件位置宽高属性，监听所述自定义组件的拖拽事件、缩放事件。
6.一种基于拖拽的组件化布局大屏装置，其特征在于，包括：可视化数据源模块，用于导入静态数据Excel/csv文件和关系型数据库数据；可视化视图模块，用于根据导入的静态数据Excel/csv文件和关系型数据库数据选择目标数据源，通过视图模型生成可视化视图，其中，所述视图模型包括图表组件和自定义组件；以及
可视化配置模块，用于根据拖拽指令将所述可视化视图在画布内自由拖拽布局，以实现对所述图表组件和所述自定义组件进行样式配置。
7.根据权利要求6所述的装置，其特征在于，所述可视化数据源模块包括：静态数据单元，用于接收用户上传的所述Excel/csv文件，和/或，采集数据并经过数据治理后生成所述csv文件；和/或
实时数据单元，用于从关系型数据库中读取所述关系型数据库数据。8.根据权利要求6所述的装置，其特征在于，所述可视化配置模块包括：画布配置单元，用于根据选中的画布尺寸、背景色、画布缩放、画布内组件改变配置项。9.根据权利要求6所述的装置，其特征在于，所述可视化配置模块还包括：图表组件配置单元，用于通过拖拽或者点击将所述图表组件进入画布，并在在所述画布内自由拖拽，监听并记录每个组件的位置，且在所述图表组件拖拽到所述画布过程中，将
2
CN 110597586 A
权 利 要 求 书
2/2页
所述图表组件的draggable属性设置为true，并监听ondragstart事件，在选中的图表元素拖拽动作开始时执行，并在所述图表组件在所述画布中拖拽的过程中，监听ondrop事件，即把所述图表组件放到所述画布上时触发，监听ondragover事件，当所述图表组件在所述画布上拖动时执行。
10.根据权利要求6所述的装置，其特征在于，所述可视化配置模块还包括：自定义组件配置单元，用于对所述自定义组件的拖拽封装一个DragTool组件，在所述DragTool组件内记录组件位置宽高属性，监听所述自定义组件的拖拽事件、缩放事件。
3
CN 110597586 A
说 明 书
基于拖拽的组件化布局大屏方法和装置
1/11页
技术领域
[0001]本发明涉及大数据可视化技术领域，特别涉及一种基于拖拽的组件化布局大屏方法和装置。
背景技术[0002]相关技术，一种基于拖拽配置可视化大屏的方法，该方法包括的具体步骤：步骤(1)、构建基础图表；步骤(2)、建立可视化区域并配置该可视化区域大小；步骤(3)、将步骤(1)建立的基础图表选择并拖拽到可视化区域的合适位置，渲染可视化图表。使得可视化大屏的构建不再繁琐、费时，只需拖动已经构建好的基础图表即可。另外，一种数据大屏可视化方法和装置，包括以下步骤：S1对各个可视化组件进行封装和拓展；S2将封装的可视化组件构建可视化引擎，其中，所述可视化引擎包括图表组件库和空间地理信息组件库，用于支持多数据源接入、配置式交互分析和多屏幕适配；S3通过配置文件声明各种图表组件的布局、数据源、图表联动、样式文件、插件机制和组件规范；S4将所述配置文件通过可视化引擎渲染成数据大屏。[0003]然而，在已有的大屏可视化系统中，已经做到了对于基本图表的封装和使用，根据大屏系统内的图表组件通过拖拽的方式，生成一款大屏。但是缺乏自定义组件和灵活的布局，基本图表无法满足用户对于自定义文字、图片、轮播列表等组件的需求，单一的大屏模版无法满足用户的不同场景。因此丰富的自定义组件库和灵活布局是大屏可视化急需解决的问题。然而已有的大屏可视化系统都是基于基本图表和定制化布局生成的，对于文字类、图片类等自定义组件和没有实现灵活的布局，亟待解决。发明内容
[0004]本申请是基于发明人对以下问题的认识和发现做出的：[0005]在不同的业务场景中，都会产生大量的数据，针对这些复杂抽象的数据，用户无法辨别出有用的信息。而且相对于枯燥乏味的文字或数字而言，人脑对于图形、色彩、位置、大小等视觉元素有更直观的认识，更容易理解。相比于传统图表与数据仪表盘，大屏数据可视化以更生动友好的形式，实时呈现隐藏在瞬息万变且庞杂数据背后的业务洞察，通过交互式实时数据可视化大屏来帮助业务人员发现诊断业务问题。但是在目前的可视化系统中，制作大屏的组件单一，大部分是定制化大屏，用户无法根据自己的想法制作大屏，在这样的场景下，灵活的大屏布局，丰富的组件化是现在研究的重点课题，基于拖拽的组件化布局大屏技术就显得尤为重要。
[0006]本发明旨在至少在一定程度上解决相关技术中的技术问题之一。[0007]为此，本发明的一个目的在于提出一种基于拖拽的组件化布局大屏方法，该方法将复杂数据通过可视化的方式展现出来，将各类组件在大屏内自由拖拽，灵活布局，可以满足各种不同的业务场景，有效解决目前常用的大屏可视化系统组件单一、布局定制、且无法让用户根据自己的实际场景制作大屏的问题。
4
CN 110597586 A[0008]
说 明 书
2/11页
本发明的另一个目的在于提出一种基于拖拽的组件化布局大屏装置。
[0009]为达到上述目的，本发明一方面实施例提出了一种基于拖拽的组件化布局大屏方法，包括以下步骤：导入静态数据Excel/csv文件和关系型数据库数据；根据导入的静态数据Excel/csv文件和关系型数据库数据选择目标数据源，通过视图模型生成可视化视图，其中，所述视图模型包括图表组件和自定义组件；根据拖拽指令将所述可视化视图在画布内自由拖拽布局，以实现对所述图表组件和所述自定义组件进行样式配置。[0010]本发明实施例的基于拖拽的组件化布局大屏方法，通过制作大屏的流程设计，导入数据源，绘制视图，拖拽配置组件生成大屏；无需编码，用户可以直接将所要呈现的组件拖拽到画布上，对组件进行配置和自由布局；基于静态数据和动态数据两种数据源，丰富的组件库，通过拖拽可配置的方式生成一站式大屏，使得用户根据自己的应用场景设计出合适的大屏应用，从而将复杂数据通过可视化的方式展现出来，将各类组件在大屏内自由拖拽，灵活布局，可以满足各种不同的业务场景，有效解决目前常用的大屏可视化系统组件单一、布局定制、且无法让用户根据自己的实际场景制作大屏的问题。[0011]另外，根据本发明上述实施例的基于拖拽的组件化布局大屏方法还可以具有以下附加的技术特征：[0012]进一步地，在本发明的一个实施例中，所述导入静态数据Excel/csv文件和关系型数据库数据，包括：接收用户上传的所述Excel/csv文件，和/或，采集数据并经过数据治理后生成所述csv文件；和/或，从关系型数据库中读取所述关系型数据库数据。[0013]进一步地，在本发明的一个实施例中，还包括：根据选中的画布尺寸、背景色、画布缩放、画布内组件改变配置项。[0014]进一步地，在本发明的一个实施例中，还包括：通过拖拽或者点击将所述图表组件进入画布，并在在所述画布内自由拖拽，监听并记录每个组件的位置；在所述图表组件拖拽到所述画布过程中，将所述图表组件的draggable属性设置为true，并监听ondragstart事件，在选中的图表元素拖拽动作开始时执行；在所述图表组件在所述画布中拖拽的过程中，监听ondrop事件，即把所述图表组件放到所述画布上时触发，监听ondragover事件，当所述图表组件在所述画布上拖动时执行。[0015]进一步地，在本发明的一个实施例中，还包括：对所述自定义组件的拖拽封装一个DragTool组件，在所述DragTool组件内记录组件位置宽高属性，监听所述自定义组件的拖拽事件、缩放事件。
[0016]为达到上述目的，本发明另一方面实施例提出了一种基于拖拽的组件化布局大屏装置，包括：可视化数据源模块，用于导入静态数据Excel/csv文件和关系型数据库数据；可视化视图模块，用于根据导入的静态数据Excel/csv文件和关系型数据库数据选择目标数据源，通过视图模型生成可视化视图，其中，所述视图模型包括图表组件和自定义组件；可视化配置模块，用于根据拖拽指令将所述可视化视图在画布内自由拖拽布局，以实现对所述图表组件和所述自定义组件进行样式配置。
[0017]本发明实施例的基于拖拽的组件化布局大屏装置，通过制作大屏的流程设计，导入数据源，绘制视图，拖拽配置组件生成大屏；无需编码，用户可以直接将所要呈现的组件拖拽到画布上，对组件进行配置和自由布局；基于静态数据和动态数据两种数据源，丰富的组件库，通过拖拽可配置的方式生成一站式大屏，使得用户根据自己的应用场景设计出合
5
CN 110597586 A
说 明 书
3/11页
适的大屏应用，从而将复杂数据通过可视化的方式展现出来，将各类组件在大屏内自由拖拽，灵活布局，可以满足各种不同的业务场景，有效解决目前常用的大屏可视化系统组件单一、布局定制、且无法让用户根据自己的实际场景制作大屏的问题。[0018]另外，根据本发明上述实施例的基于拖拽的组件化布局大屏装置还可以具有以下附加的技术特征：[0019]进一步地，在本发明的一个实施例中，所述可视化数据源模块包括：静态数据单元，用于接收用户上传的所述Excel/csv文件，和/或，采集数据并经过数据治理后生成所述csv文件；和/或，实时数据单元，用于从关系型数据库中读取所述关系型数据库数据[0020]进一步地，在本发明的一个实施例中，所述可视化配置模块包括：画布配置单元，用于根据选中的画布尺寸、背景色、画布缩放、画布内组件改变配置项。[0021]进一步地，在本发明的一个实施例中，所述可视化配置模块还包括：图表组件配置单元，用于通过拖拽或者点击将所述图表组件进入画布，并在在所述画布内自由拖拽，监听并记录每个组件的位置，且在所述图表组件拖拽到所述画布过程中，将所述图表组件的draggable属性设置为true，并监听ondragstart事件，在选中的图表元素拖拽动作开始时执行，并在所述图表组件在所述画布中拖拽的过程中，监听ondrop事件，即把所述图表组件放到所述画布上时触发，监听ondragover事件，当所述图表组件在所述画布上拖动时执行。[0022]进一步地，在本发明的一个实施例中，所述可视化配置模块还包括：自定义组件配置单元，用于对所述自定义组件的拖拽封装一个DragTool组件，在所述DragTool组件内记录组件位置宽高属性，监听所述自定义组件的拖拽事件、缩放事件。[0023]本发明附加的方面和优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本发明的实践了解到。附图说明
[0024]本发明上述的和/或附加的方面和优点从下面结合附图对实施例的描述中将变得明显和容易理解，其中：
[0025]图1为根据本发明实施例的基于拖拽的组件化布局大屏方法的流程图；[0026]图2为根据本发明一个实施例的基于拖拽的组件化布局大屏方法的流程图；[0027]图3为根据本发明实施例的数据源经由处理后的数据结构示意图；[0028]图4为根据本发明实施例的可视化配置的配置流程图；[0029]图5为根据本发明实施例的画布配置的配置流程图；
[0030]图6为根据本发明实施例的基于拖拽的组件化布局大屏装置的结构示意图。具体实施方式
[0031]下面详细描述本发明的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，旨在用于解释本发明，而不能理解为对本发明的限制。
[0032]下面参照附图描述根据本发明实施例提出的基于拖拽的组件化布局大屏方法和装置，首先将参照附图描述根据本发明实施例提出的基于拖拽的组件化布局大屏方法。[0033]图1是本发明一个实施例的基于拖拽的组件化布局大屏方法的流程图。
6
CN 110597586 A[0034]
说 明 书
4/11页
如图1所示，该基于拖拽的组件化布局大屏方法包括以下步骤：
[0035]在步骤S101中，导入静态数据Excel/csv文件和关系型数据库数据。[0036]可以理解的是，如图2所示，本发明实施例首先将静态数据Excel/csv文件和关系型数据库数据导入进系统。其中，该系统可以为本发明实施例的基于拖拽的组件化布局大屏装置。
[0037]其中，在本发明的一个实施例中，导入静态数据Excel/csv文件和关系型数据库数据，包括：接收用户上传的Excel/csv文件，和/或，采集数据并经过数据治理后生成csv文件；和/或，从关系型数据库中读取关系型数据库数据。[0038]具体而言，如图2所示，本发明实施例设计了两种类型的数据源，包括静态数据和实时数据，具体地：[0039](1)静态数据
[0040]传统文件Excel/csv，通过两种方式可以获取：1)用户自行上传Excel/csv文件；2)经由数据采集、数据治理后生成csv文件。系统可以将这两种来源的静态数据，解析为对象，通过JSON返回给前端处理。[0041](2)实时数据
[0042]实时数据直接从关系型数据库中读取，采用客户端轮询技术，通过HTTP方式向服务器端定期循环发送请求，询问是否有新的消息产生，接收来自服务器的请求响应，返回响应信息。根据大屏的应用场景，每个组件需要绑定各自的数据源，服务器端无法知晓每个组件数据变化的触发机制，因此采用轮询的实时技术实现。[0043]在步骤S102中，根据导入的静态数据Excel/csv文件和关系型数据库数据选择目标数据源，通过视图模型生成可视化视图，其中，视图模型包括图表组件和自定义组件。[0044]可以理解的是，如图2所示，实时数据可以直接从关系型数据库中读取，采用客户端轮询技术，通过HTTP方式向服务器端定期循环发送请求，询问是否有新的消息产生，接收来自服务器的请求响应，返回响应信息。根据大屏的应用场景，每个组件需要绑定各自的数据源，服务器端无法知晓每个组件数据变化的触发机制，因此采用轮询的实时技术实现。[0045]具体而言，如图2所示，可视化视图模型分为两种，一种为图表类组件，另一种为自定义组件。[0046](1)图表类组件[0047]如图3所示，定义数据模型，并通过model转换数据格式后绑定数据模型到组件。数据源经由处理后的数据结构为：
7
CN 110597586 A
说 明 书
5/11页
[0048]
[0049]
[0050]
经过model数据模型处理后转换为各种图例的option，model模型如下：
8
CN 110597586 A
说 明 书
6/11页
[0051]
(2)自定义组件
[0053]自定义组件基于状态管理模块Vuex，大屏内组件类型繁多，数据源各异，每个组件有并且维护各自的状态。在components里面定义组件，定义初始配置项，例如：fontFamily、fontSize、width、height、left、top等，当组件在画布内拖拽时，配置项里面图表位置的横纵坐标会随之改变，当选中组件时，鼠标更改为十字交叉样式，放大缩小组件时，图表尺寸的宽度和高度也会发生改变。[0054]在步骤S103中，根据拖拽指令将可视化视图在画布内自由拖拽布局，以实现对图表组件和自定义组件进行样式配置。[0055]可以理解的是，如图2所示，导入数据源，选择视图模型，将生成的视图组件在画布内自由拖拽布局，并对图表组件和自定义组件进行样式配置。如图4所示，可视化配置包含画布的配置、图表组件的配置、自定义组件的配置，下面将分别进行详细阐述。[0056]进一步地，在本发明的一个实施例中，本发明实施例的方法还包括：根据选中的画布尺寸、背景色、画布缩放、画布内组件改变配置项。[0057]具体而言，如图5所示，画布的配置包括画布尺寸、背景色、画布缩放、画布内组件选中时配置项的改变。基于Vuex状态管理模式，本发明实施例使用单向数据流来管理每个组件的状态。整个大屏是一个SPA单页面组件，页面上的组件components发生变化会dispatch一个actions，对于数据源需要从后端调用接口，会在actions里面调用，在actions里面commit mutations，mutations里面接收state参数和其他参数，是唯一改变state的地方，state更改后会重新render组件components。[0058]如图4所示，对于画布的配置步骤如下：
[0052]
9
CN 110597586 A[0059]
说 明 书
7/11页
(1)在store/index.js里面的state对象中定义了一个全局的数据配置项，在系统
中的任何一个组件里进行获取、修改，并得到全局的响应变更。getters和vue计算属性computed类似，来实时监听state值的变化，并把它放进Vuex.Store里面。mutations对象是唯一改变state的地方，里面的方法中传入参数state或额外的参数，把mutations也放进Vuex.Store里面。[0060](2)在layout/PageConfig里面设置画布的画布尺寸(宽度、高度)，背景色(渐变方式)，放大缩小。计算属性computed里面对width、height、backGroundColor使用get()来获取store里面state的值，使用set(value)对属性重新赋值，从而渲染到页面上。[0061](3)画布放大缩小功能使用ZoomTool组件来实现。点击缩小按钮画布连同里面的组件联动缩小，点击放大按钮画布连同里面的组件联动放大，拖拽点击滑块slider画布会跟着联动。ZoomTool组件的伪代码如下：
[0062]
[0063]
监听页面的window.innerWidth与window.innerHeight，并通过store的state对象得到画布的width和height，scale通过计算公式Math.min((window.innerWidth-60)/width,(window.innerHeight-60)/height)得到缩放比例，并this.$store.dispatch(‘changeZoomScale’,scale)。在vue的created生命周期里面调用window.addEventListener(‘resize’,fun())来更改画布的大小。[0065]在实际应用场景中，当先后两个组件进入画布，在画布内拖拽组件位置的时候，后进入画布的组件会覆盖前面的组件。比如一个文字组件和背景图片组件共同构成大屏的标题，若先生成文字组件，后选择背景图组件，会导致文字组件被覆盖。反之则会正常显示。因此为每个组件设置向上一层、向下一层的图层配置是很有必要的。[0066]进一步地，在本发明的一个实施例中，本发明实施例的方法还包括：通过拖拽或者点击将图表组件进入画布，并在在画布内自由拖拽，监听并记录每个组件的位置；在图表组件拖拽到画布过程中，将图表组件的draggable属性设置为true，并监听ondragstart事件，
10
[0064]
CN 110597586 A
说 明 书
8/11页
在选中的图表元素拖拽动作开始时执行；在图表组件在画布中拖拽的过程中，监听ondrop事件，即把图表组件放到画布上时触发，监听ondragover事件，当图表组件在画布上拖动时执行。
[0067]具体而言，如图4所示，图表组件的配置，组件经过拖拽或者点击进入画布，在画布内自由拖拽，监听并记录每个组件的位置，包括组件左上角x、y坐标，宽width、高height、组件类型type、组件id。
[0068]实现图表组件拖拽到画布中，首先将图表组件的draggable属性设置为true，然后监听ondragstart事件，即在选中的图表元素拖拽动作开始时执行。[0069]实现组件在画布中拖拽的过程，主要监听ondrop事件，即把组件放到画布上(目标元素)时触发，监听ondragover事件，当组件在画布上(目标元素)拖动时执行。[0070]本发明实施例基于echarts库来展示图形，实现了柱状图、饼图、雷达图、太阳图、地图等多种图的配置。在画布中选择需要配置的图表，可以对图表的标题、标题颜色、标题边距、echarts图的边距、颜色等配置。通用标题样式如表1所示，各个图表样式如表2所示。[0071]表1
[0072][0073]
表2
[0074]
不仅可以对图表进行属性的配置，还可以进行动画效果的配置，对于饼状图、柱状
图通过dispatchAction触发图表行为实现动画效果，1)type为”downplay”取消之前高亮的图形；2)type为”highlight”高亮当前的图形；3)type为”showTip”显示高亮图形的提示框。[0076]对于地图而言，通过轮询调用接口实现实时，由地图本身的颜色变换不太直观，对地图组件增加子组件，比如呼吸气泡组件，区域热力组件、飞线层组件。通过气泡的大小，飞线的改变，可以更加直观友好的展示实时数据。[0077]进一步地，在本发明的一个实施例中，本发明实施例的方法还包括：对自定义组件的拖拽封装一个DragTool组件，在DragTool组件内记录组件位置宽高属性，监听自定义组件的拖拽事件、缩放事件。
[0075]
11
CN 110597586 A[0078]
说 明 书
9/11页
具体而言，如图4所示，自定义组件包括文字组件、跑马灯组件、轮播图组件、进度
条组件。组件的通用配置项包括id、enabled、config、data、interaction。每个添加进大屏的组件都有唯一的id，enabled属性判断组件是否被选中，config属性指自定义组件独有的配置，data属性指数据源，interaction属性指组件是否有交互。[0079]对自定义组件的拖拽封装了一个DragTool组件，在组件内记录width、height、left、top组件位置宽高属性，监听组件拖拽事件、组件缩放事件。document对象添加鼠标监听器mousemove、mouseup。自定义组件的可配置项如表3所示。[0080]表3
[0081]
综上，本发明实施例基于可拖拽的灵活组件化布局设计了一种通用的大屏可视化
系统模型，基于可视化大屏的制作流程，构建了一套兼具数据源导入、可视化视图、可视化配置的一站式数据可视化大屏流程，数据源分为静态数据与实时数据，并基于WEB采用开源的echarts图表工具库开发，且包含丰富的图形和自定义组件展示方式，如柱状图、饼图、横向条形图、雷达图、地图、水球图、跑马灯等，并可以对系统内的组件进行样式配置以及自由布局；通过拖拽生成一站式大屏应用，能够应对不同场景的大屏可视化需求。从导入数据源到预览大屏，本发明实施例提供了一个可灵活布局，可配置，可复用的大屏可视化解决方案，可满足各种各样的业务场景。
[0083]根据本发明实施例提出的基于拖拽的组件化布局大屏方法，通过制作大屏的流程设计，导入数据源，绘制视图，拖拽配置组件生成大屏；无需编码，用户可以直接将所要呈现的组件拖拽到画布上，对组件进行配置和自由布局；基于静态数据和动态数据两种数据源，丰富的组件库，通过拖拽可配置的方式生成一站式大屏，使得用户根据自己的应用场景设计出合适的大屏应用，从而将复杂数据通过可视化的方式展现出来，将各类组件在大屏内自由拖拽，灵活布局，可以满足各种不同的业务场景，有效解决目前常用的大屏可视化系统组件单一、布局定制、且无法让用户根据自己的实际场景制作大屏的问题。
[0084]其次参照附图描述根据本发明实施例提出的基于拖拽的组件化布局大屏装置。[0085]图6是本发明一个实施例的基于拖拽的组件化布局大屏装置的结构示意图。[0086]如图6所示，该基于拖拽的组件化布局大屏装置10包括：可视化数据源模块100、可视化视图模块200和可视化配置模块300。[0087]其中，可视化数据源模块100用于导入静态数据Excel/csv文件和关系型数据库数据。可视化视图模块200用于根据导入的静态数据Excel/csv文件和关系型数据库数据选择目标数据源，通过视图模型生成可视化视图，其中，视图模型包括图表组件和自定义组件。
12
[0082]
CN 110597586 A
说 明 书
10/11页
可视化配置模块300用于根据拖拽指令将可视化视图在画布内自由拖拽布局，以实现对图表组件和自定义组件进行样式配置。本发明实施例的装置10将复杂数据通过可视化的方式展现出来，将各类组件在大屏内自由拖拽，灵活布局，可以满足各种不同的业务场景，有效解决目前常用的大屏可视化系统组件单一、布局定制、且无法让用户根据自己的实际场景制作大屏的问题。[0088]进一步地，在本发明的一个实施例中，可视化数据源模块100包括：静态数据单元，用于接收用户上传的Excel/csv文件，和/或，采集数据并经过数据治理后生成csv文件；和/或，实时数据单元，用于从关系型数据库中读取关系型数据库数据[0089]进一步地，在本发明的一个实施例中，可视化配置模块300包括：画布配置单元。其中，画布配置单元用于根据选中的画布尺寸、背景色、画布缩放、画布内组件改变配置项。[0090]进一步地，在本发明的一个实施例中，可视化配置模块300还包括：图表组件配置单元。其中，图表组件配置单元用于通过拖拽或者点击将图表组件进入画布，并在在画布内自由拖拽，监听并记录每个组件的位置，且在图表组件拖拽到画布过程中，将图表组件的draggable属性设置为true，并监听ondragstart事件，在选中的图表元素拖拽动作开始时执行，并在图表组件在画布中拖拽的过程中，监听ondrop事件，即把图表组件放到画布上时触发，监听ondragover事件，当图表组件在画布上拖动时执行。[0091]进一步地，在本发明的一个实施例中，可视化配置模块300还包括：自定义组件配置单元。其中，自定义组件配置单元用于对自定义组件的拖拽封装一个DragTool组件，在DragTool组件内记录组件位置宽高属性，监听自定义组件的拖拽事件、缩放事件。[0092]需要说明的是，前述对基于拖拽的组件化布局大屏方法实施例的解释说明也适用于该实施例的基于拖拽的组件化布局大屏装置，此处不再赘述。
[0093]根据本发明实施例提出的基于拖拽的组件化布局大屏装置，通过制作大屏的流程设计，导入数据源，绘制视图，拖拽配置组件生成大屏；无需编码，用户可以直接将所要呈现的组件拖拽到画布上，对组件进行配置和自由布局；基于静态数据和动态数据两种数据源，丰富的组件库，通过拖拽可配置的方式生成一站式大屏，使得用户根据自己的应用场景设计出合适的大屏应用，从而将复杂数据通过可视化的方式展现出来，将各类组件在大屏内自由拖拽，灵活布局，可以满足各种不同的业务场景，有效解决目前常用的大屏可视化系统组件单一、布局定制、且无法让用户根据自己的实际场景制作大屏的问题。[0094]此外，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。在本发明的描述中，“多个”的含义是至少两个，例如两个，三个等，除非另有明确具体的限定。[0095]在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不必须针对的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任一个或多个实施例或示例中以合适的方式结合。此外，在不相互矛盾的情况下，本领域的技术人员可以将本说明书中描述的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。
13
CN 110597586 A[0096]
说 明 书
11/11页
尽管上面已经示出和描述了本发明的实施例，可以理解的是，上述实施例是示例
性的，不能理解为对本发明的限制，本领域的普通技术人员在本发明的范围内可以对上述实施例进行变化、修改、替换和变型。
14
CN 110597586 A
说 明 书 附 图
1/3页
图1
图2
图3
15
CN 110597586 A
说 明 书 附 图
2/3页
图4
16
CN 110597586 A
说 明 书 附 图
3/3页
图5
图6
17
因篇幅问题不能全部显示，请点此查看更多更全内容