基于拖拽方式开发数据大屏方法技术

本发明专利技术公开了基于拖拽方式开发数据大屏方法，具体开发方法步骤如下：步骤一：项目开发技术负责人与客户进行需求沟通，梳理用户需要关注的指标值信息，指标值要有聚焦点，有次序的排列；步骤二：客户确认梳理的需要可视化的指标值，如指标值不满足需要，则转向步骤一，继续梳理；步骤三：项目开发技术负责人根据设计指标值编制开发数据大屏方案，并且进行开发方案会审，提出疑问并解答，技术人员编制专项开发方案和注意细节，并且向工作人员进行技术交底；步骤四：美工依据指标值设立自定义组件配置单元和图表组件配置单元，并且设计数据大屏原型图。该开发数据大屏方法步骤简单，造价低，实用性强，便于节省人力物力，适合广泛推广使用。用。用。

【技术实现步骤摘要】
基于拖拽方式开发数据大屏方法


[0001]本专利技术属于数据可视化
，具体涉及基于拖拽方式开发数据大屏方法。

技术介绍

[0002]数据大屏是利用数据可视化技术将数据库中每一个数据项作为单个图元元素表示，大量的数据集构成数据图像，同时将数据的各个属性值以多维数据的形式表示，可以从不同的维度观察数据，从而对数据进行更深入的观察和分析，数据大屏屏幕设计方案要防止以便展现而展现，排版设计合理布局、数据图表采用等应服务项目于业务流程，因此大屏幕设计方案是在充足掌握业务流程要求的基本上开展的。业务流程要求便是要处理的难题或达到的总体目标。室内设计师根据设计方案的方式协助有关工作人员达到这一总体目标，是大屏幕大数据可视化的使用价值所属。大屏幕由于大，承重数据信息多，以便防止观众迷途，大屏幕信息内容展现要有聚焦点、有次序。能够根据比照，先把关键数据信息抛给客户，待客户了解大屏幕具体内容与展现逻辑性后，再逐步访问二三级內容。一部分关键点数据信息可临时掩藏，客户必须时可根据鼠标单击等交互技术勾起。
[0003]然而，在已有的大屏可视化系统中，已经做到了对于基本图表的封装和使用，根据大屏系统内的图表组件通过拖拽的方式，生成一款大屏。但是缺乏自定义组件和灵活的布局，基本图表无法满足用户对于自定义文字、图片、轮播列表等组件的需求，单一的大屏模 版无法满足用户的不同场景。因此丰富的自定义组件库和灵活布局是大屏可视化急需解决的问题。现有的基于拖拽方式开发数据大屏方法，操作步骤复杂，不能以实现拖拽方式来生成、展现数据大屏，造价高，实用性差，不便于节省人力物力，并且不适合广泛推广使用。

技术实现思路

[0004]本专利技术的目的在于提供基于拖拽方式开发数据大屏方法，以解决上述
技术介绍
中提出的现有的基于拖拽方式开发数据大屏方法，操作步骤复杂，不能以实现拖拽方式来生成、展现数据大屏，造价高，实用性差，不便于节省人力物力，并且不适合广泛推广使用的问题。
[0005]为实现上述目的，本专利技术提供如下技术方案：基于拖拽方式开发数据大屏方法，具体开发方法步骤如下：步骤一：项目开发技术负责人与客户进行需求沟通，梳理用户需要关注的指标值信息，指标值要有聚焦点，有次序的排列；步骤二：客户确认梳理的需要可视化的指标值，如指标值不满足需要，则转向步骤一，继续梳理；步骤三：项目开发技术负责人根据设计指标值编制开发数据大屏方案，并且进行开发方案会审，提出疑问并解答，技术人员编制专项开发方案和注意细节，并且向工作人员进行技术交底；步骤四：美工依据指标值设立自定义组件配置单元和图表组件配置单元，并且设
计数据大屏原型图，后端开发人员开发指标值查询接口，给前端开发人员调用，前端设计师依据原型图设计大屏页面，调用指标值接口，渲染数据；步骤五：新建视图模型，并且根据视图模型建立一个数据大屏，根据客户物理大屏尺寸，分辨率大小设置网页数据大屏尺寸，按照数据大屏原型图，拖拽摆放、文本框、超链接、跑马灯、翻牌器、图表、地图组件到数据大屏上；步骤六：对直接通过数据库获取数据的指标值，创建数据源，在指标值组件中通过数据源名称获取指标值数据，对通过接口来请求数据的指标值，设置组件的数据源获取数据方式为接口，填入接口请求地址；步骤七：设置每个组件定时刷新数据间隔时长，根绝业务需要可以设置成每秒一次或指定时间周期一次；步骤八：调试数据大屏，预览显示无误后，发布数据大屏。
[0006]进一步的；所述步骤三中进行技术交底的交底资料应该双方签字后归档并且备案保存。
[0007]进一步的；所述步骤四中自定义组件配置单元，用于对所述自定义组件的拖拽封装一个DragTool组件，在所述DragTool组件内记录组件位置宽高属性，监听所述自定义组件的拖拽事件、缩放事件。
[0008]进一步的；所述步骤四中图表组件配置单元，用于通过拖拽或者点击将所述图表组件进入画布，并在在所述画布内自由拖拽，监听并记录每个组件的位置，且在所述图表组件拖拽到所述画布过程中，所述图表组件的draggable属性设置为true，并监听ondragstart事件，在选中的图表元素拖拽动作开始时执行，并在所述图表组件在所述画布中拖拽的过程中，监听ondrop事件，即把所述图表组件放到所述画布上时触发，监听ondragover事件，当所述图表组件在所述画 布上拖动时执行。
[0009]进一步的；所述步骤五中通过视图模型生成可视化视图，其中，所述视图模型包括图表组件和自定义组件；以及根据拖拽指令将所述可视化视图在画布内自由拖拽布局，以实现对所述图表组件和所述自定义组件进行样式配置。
[0010]与现有技术相比，本专利技术的有益效果是：（1）本专利技术实现拖拽方式来生成、展现数据大屏，将要显示的数据大屏视为一张积木拼图，每一个指标值视为一个小的积木块，将不同的积木块拼接组合成一个数据大屏。每个指标值根据显示类型可以分成标签、超链接、跑马灯、翻牌器、饼图、柱形图、地图等类型。针对这每一种显示类型，可以设计成通用的组件，这些通用组件类似俄罗斯方块中的长条，方块，左沟，右沟，凸块，左拐子，右拐子形状方块，通过这些形状方块可以组合成完整的行，完整的行拼合成平面。开发人员开发时通过拖拽组件摆放到拼图上，可以快速开发一个数据大屏，效率高，实用性强，节省人力物力。
[0011]（2）本专利技术实施例的基于拖拽的组件化布局大屏方法，通过制作大屏的流程设计，导入数据源，绘制视图，拖拽配置组件生成大屏；无需编码，用户可以直接将所要呈现的组件拖拽到画布上，对组件进行配置和自由布局；基于静态数据和动态数据两种数据源，丰富的组件库，通过拖拽可配置的方式生成一站式大屏，使得用户根据自己的应用场景设计出合适的大屏应用，从而将复杂数据通过可视化的方式展现出来，将各类组件在大屏内自由拖拽，灵活布局，可以满足各种不同的业务场景，有效解决目前常用的大屏可视化系统组件
单 一、布局定制、且无法让用户根据自己的实际场景制作大屏的问题。
[0012]（3）项目开发技术负责人根据设计指标值编制开发数据大屏方案，并且进行开发方案会审，提出疑问并解答，技术人员编制专项开发方案和注意细节，并且向工作人员进行技术交底，使项目开发工作井然有序的进行，防止出现误差，影响数据的准确性，并且便于根据编制专项开发方案和注意细节指定应急预案，当发生意外事故时便于及时进行处理，有效的防止事故扩大。先新建视图模型，并且根据视图模型建立一个数据大屏，做到精准定位，防止数据偏差，利用建立的数据大屏，获取数据的指标值，创建数据源，设置组件的数据源获取数据方式为接口，填入接口请求地址，提高数据防盗效果，使数据安全性得到保障，用于根据导入的静态数据Excel/csv文件和关系型数据库数据选择目标数据源，通过视图模型生成可视化视图，其中，视图模型包括图表组件和自定义组件。可视化配置模块用于根据拖拽指令将可视化视图在画布内自由拖拽布局，以实现对图表组件和自定义组件进行样式配置，使得开发数据大屏方法步骤简单，造价低，实用性强，便于节省人力物力，适合广泛推广使用。
附图说本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.基于拖拽方式开发数据大屏方法，其特征在于，具体开发方法步骤如下：步骤一：项目开发技术负责人与客户进行需求沟通，梳理用户需要关注的指标值信息，指标值要有聚焦点，有次序的排列；步骤二：客户确认梳理的需要可视化的指标值，如指标值不满足需要，则转向步骤一，继续梳理；步骤三：项目开发技术负责人根据设计指标值编制开发数据大屏方案，并且进行开发方案会审，提出疑问并解答，技术人员编制专项开发方案和注意细节，并且向工作人员进行技术交底；步骤四：美工依据指标值设立自定义组件配置单元和图表组件配置单元，并且设计数据大屏原型图，后端开发人员开发指标值查询接口，给前端开发人员调用，前端设计师依据原型图设计大屏页面，调用指标值接口，渲染数据；步骤五：新建视图模型，并且根据视图模型建立一个数据大屏，根据客户物理大屏尺寸，分辨率大小设置网页数据大屏尺寸，按照数据大屏原型图，拖拽摆放、文本框、超链接、跑马灯、翻牌器、图表、地图组件到数据大屏上；步骤六：对直接通过数据库获取数据的指标值，创建数据源，在指标值组件中通过数据源名称获取指标值数据，对通过接口来请求数据的指标值，设置组件的数据源获取数据方式为接口，填入接口请求地址；步骤七：设置每个组件定时刷新数据间隔时长，根绝业务需要可以设置成每秒一次或指定时间周期一次；步骤八：调试数据大屏，预览显示无误后，发布数据大屏。2.根据...

【专利技术属性】
技术研发人员：魏详雨，周鲁，孔峰，王鹏，顾伟，于文革，
申请(专利权)人：克拉玛依油城数据有限公司，
类型：发明
国别省市：