一种基于拖拽配置可视化大屏的方法技术

本发明专利技术公开了一种基于拖拽配置可视化大屏的方法。本发明专利技术包括如下具体步骤：步骤(1)、构建基础图表，步骤(2)、建立可视化区域并配置该可视化区域大小；步骤(3)、将步骤(1)建立的的基础图表选择并拖拽到可视化区域的合适位置，渲染可视化图表。本发明专利技术使得可视化大屏的构建不再繁琐、费时，只需拖动已经构建好的基础图表即可。本发明专利技术能够使得不同的大屏可以共用已经构建好的基础图表；本发明专利技术方法操作简单，直接拖拽即可。

【技术实现步骤摘要】
一种基于拖拽配置可视化大屏的方法
本专利技术属于大数据可视化领域，是一种基于拖拽配置可视化大屏的方法。
技术介绍
在当前大数据可视化领域大屏展示是一种展示数据的最有效手段之一，但是大屏的构建往往及其费时、繁琐。当前对于大屏的构建一般有几种方法包括：①通过划分不同的功能区域每种功能区域配置数据、配置相应的样式和布局等属性进行构建，这种方法构建大屏方法每次配置一个功能区域都需要配置数据、修改样式、修改布局非常的繁琐费时且无法重复利用配置好的功能区域。②通过确定的内容直接构建大屏，这种方法构建大屏更加不具有可复用性，往往每构建一个大屏就需要编写不同的Html代码和后台服务代码，更加费时、费力。
技术实现思路
本专利技术主要目的是针对现在技术的不足，提供一种基于拖拽配置可视化大屏的方法。本专利技术解决其技术问题所采用的技术方案包括如下具体步骤：步骤(1)、构建基础图表，具体构建图表报表如下：①选择基础图表的类型，包括饼状图、柱状图、桑基图等；②配置构建基础图表所需的数据源，如：MySql、Oracle、JSON；③配置基础图表的基本属性，如柱状图的宽、高，饼状图的半径等④对配置完成的基础图表的建立唯一标识符ID，并保存基础图表的相关信息到数据库；相关信息包括基础图表的类型、基础图表所需数据源、基础图表的基本属性和基础图表的ID；步骤(2)、建立可视化区域并配置该可视化区域大小；步骤(3)、将步骤(1)建立的的基础图表选择并拖拽到可视化区域的合适位置，渲染可视化图表；基础图表拖拽渲染的具体步骤如下：3-1.监听基础图表的选中拖拽事件，从而获得被拖拽的基础图表的唯一标识符ID；3-2.基础图表拖拽到可视化区域内部后，获取可视化区域中当前鼠标指针的位置(X,Y)，在位置(X,Y)处构建一个能够进行拖拽和缩放的dom节点；3-3.根据基础图表的唯一标识符ID从数据库中获取基础图表的相关信息来渲染图表；3-4.拖拽、缩放步骤3-2生成的dom节点，使得该基础图表更契合大屏的展示。本专利技术有益效果如下：(1)可视化大屏的构建不再繁琐、费时，只需拖动已经构建好的基础图表即可(2)本专利技术能够使得不同的大屏可以共用已经构建好的基础图表；⑶本专利技术方法操作简单，直接拖拽即可。具体实施方式下面结合实施例对本专利技术作进一步说明。一种基于拖拽配置可视化大屏的方法，包括如下具体步骤：步骤(1)、构建基础图表，具体构建图表报表如下：①选择基础图表的类型，包括饼状图、柱状图、桑基图等；②配置构建基础图表所需的数据源，如：MySql、Oracle、JSON；③配置基础图表的基本属性，如柱状图的宽、高，饼状图的半径等④对配置完成的基础图表的建立唯一标识符ID，并保存基础图表的相关信息到数据库；相关信息包括基础图表的类型、基础图表所需数据源、基础图表的基本属性和基础图表的ID；步骤(2)、建立可视化区域并配置该可视化区域大小；步骤(3)、将步骤(1)建立的的基础图表选择并拖拽到可视化区域的合适位置，渲染可视化图表；基础图表拖拽渲染的具体步骤如下：3-1.监听基础图表的选中拖拽事件，从而获得被拖拽的基础图表的唯一标识符ID；3-2.基础图表拖拽到可视化区域内部后，获取可视化区域中当前鼠标指针的位置(X,Y)，在位置(X,Y)处构建一个能够进行拖拽和缩放的dom节点；3-3.根据基础图表的唯一标识符ID从数据库中获取基础图表的相关信息来渲染图表；3-4.拖拽、缩放步骤3-2生成的dom节点，使得该基础图表更契合大屏的展示。本文档来自技高网...

【技术保护点】
1.一种基于拖拽配置可视化大屏的方法，其特征在于包括如下步骤：步骤(1)、构建基础图表，具体构建图表报表如下：①选择基础图表的类型，包括饼状图、柱状图、桑基图；②配置构建基础图表所需的数据源，包括MySql、Oracle、JSON；③配置基础图表的基本属性，包括柱状图的宽和高、饼状图的半径；④对配置完成的基础图表建立唯一标识符ID，并保存基础图表的相关信息到数据库；相关信息包括基础图表的类型、基础图表所需数据源、基础图表的基本属性和基础图表的ID；步骤(2)、建立可视化区域并配置该可视化区域大小；步骤(3)、将步骤(1)建立的的基础图表选择并拖拽到可视化区域的合适位置，渲染可视化图表；基础图表拖拽渲染的具体步骤如下：3‑1.监听基础图表的选中拖拽事件，从而获得被拖拽的基础图表的唯一标识符ID；3‑2.基础图表拖拽到可视化区域内部后，获取可视化区域中当前鼠标指针的位置(X,Y)，在位置(X,Y)处构建一个能够进行拖拽和缩放的dom节点；3‑3.根据基础图表的唯一标识符ID从数据库中获取基础图表的相关信息来渲染图表；3‑4.拖拽、缩放步骤3‑2生成的dom节点，使得该基础图表更契合大屏的展示。...

【技术特征摘要】
1.一种基于拖拽配置可视化大屏的方法，其特征在于包括如下步骤：步骤(1)、构建基础图表，具体构建图表报表如下：①选择基础图表的类型，包括饼状图、柱状图、桑基图；②配置构建基础图表所需的数据源，包括MySql、Oracle、JSON；③配置基础图表的基本属性，包括柱状图的宽和高、饼状图的半径；④对配置完成的基础图表建立唯一标识符ID，并保存基础图表的相关信息到数据库；相关信息包括基础图表的类型、基础图表所需数据源、基础图表的基本属性和基础图表的ID；步骤(2)、建立可视化区域并配置该可视化区域大小；...

【专利技术属性】
技术研发人员：沈克，
申请(专利权)人：浙江万朋教育科技股份有限公司，
类型：发明
国别省市：浙江,33