数据大屏可视化方法及系统与流程

本发明涉及数据可视化技术领域，具体来说，涉及一种数据大屏可视化方法及系统。

背景技术：

数据大屏可视化展示技术是当前一个热门的话题，随着社会信息化的高速增长，信息可视化需求急剧扩大，特别是一些监控中心、指挥中心、调度中心等重要场所，大屏显示系统已成为不可或缺的核心基础设施；大屏显示系统作为显示工具，不仅仅是将图像、数据信号传输到大屏幕上显示给用户，而是需要对海量的数据信息进行高效率的分析和直观的展示，帮助管理决策人员发现数据背后的关系和规律，为科学决策提供参考。

可视化作为大数据产业链的最后一公里，是让漫长复杂的大数据建设可见，让数据真正可知可感的最后一环，可帮助管理者真正发现关系，了解规律，洞悉未来。大屏可视化在航空航天、公安、电力、国土资源、网络安全等领域发挥了巨大价值，帮助各行业从业务管理、事前预警、事中指挥调度、事后分析研判等多个方面提升智能化决策能力，落实大数据在具体行业应用的价值。

当前，数据大屏可视化系统通常采用b/s架构开发，以浏览器网页的形式展现。大屏可视化系统由丰富的图表组件组成，包括地图、表格、柱状图、饼图、雷达图、线图、气泡图等常见组件，这些组件通常是可交互的、动态的。数据大屏可视化系统的开发，需要综合利用html、css、javascript等web前端开发技术，结合echarts、hightcharts等图表库和mapbox-gl、openlayers、leaflet等地图库辅助开发。

传统的大屏可视化系统开发需要开发人员熟悉各种图表库和地图库的使用，熟悉svg、canvas、webgl等网页绘图技术，开发过程复杂繁琐，费时费力，对开发人员专业技术水平要求较高，开发成果可复用性差。

针对相关技术中的问题，目前尚未提出有效的解决方案。

技术实现要素：

针对相关技术中的上述技术问题，本发明提出一种数据大屏可视化方法及系统，能够实现数据大屏的快速搭建和调试，提高了数据大屏可视化系统的搭建效率。

为实现上述技术目的，本发明的技术方案是这样实现的：

一种数据大屏可视化方法，包括以下步骤：

s1对各个可视化组件进行封装和拓展；

s2将封装的可视化组件构建可视化引擎，其中，所述可视化引擎包括图表组件库和空间地理信息组件库，用于支持多数据源接入、配置式交互分析和多屏幕适配；

s3通过配置文件声明各种图表组件的布局、数据源、图表联动、样式文件、插件机制和组件规范；

s4将所述配置文件通过所述可视化引擎渲染成数据大屏。

进一步地，所述步骤s3中图表组件的布局采用绝对定位、指定位置和长宽单位统一使用像素，使用图层顺序控制各个可视化组件的层叠关系。

进一步地，所述步骤s3中数据源包括静态数据源和api数据源，约定数据源采用分散式配置形式。

进一步地，所述步骤s3中图表联动采用动态地改变数据源的url或过滤条件，使图表关联的数据发生变化而产生联动。

进一步地，所述步骤s3中插件机制用于将各个可视化组件动态地注册进来。

进一步地，所述步骤s3中组件规范用于对可视化组件的设计规范和接口规范进行定义，对可视化组件的风格样式进行约定及可视化组件的接口和事件进行规范。

进一步地，所述步骤s1中可视化组件包括但不限于图表组件、地图组件和多媒体组件。

本发明的另一方面，提供一种数据大屏可视化系统，包括：

封装模块，用于对各个可视化组件进行封装和拓展；

构建模块，用于将封装的可视化组件构建可视化引擎，其中，所述可视化引擎包括图表组件库和空间地理信息组件库，用于支持多数据源接入、配置式交互分析和多屏幕适配；

配置模块，用于通过配置文件声明各种图表组件的布局、数据源、图表联动、样式文件、插件机制和组件规范；

渲染模块，用于将所述配置文件通过所述可视化引擎渲染成数据大屏。

进一步地，所述可视化组件包括但不限于图表组件、地图组件和多媒体组件。

本发明的有益效果：通过可视化引擎允许开发人员通过编写配置json文件的方式，声明式描述大屏上的各种可视化组件的位置、样式、数据等信息，快速地搭建大屏可视化应用，极大的减少了大屏可视化应用的开发周期和工作量。

附图说明

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

图1是根据本发明实施例所述的数据大屏可视化方法的流程图；

图2是根据本发明实施例所述的数据源配置结构的示意图；

图3是根据本发明实施例所述的基于数据的图表联动实现原理图；

图4是根据本发明实施例所述的数据大屏可视化项目示例图；

图5是根据本发明实施例所述的数据大屏可视化系统的示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员所获得的所有其他实施例，都属于本发明保护的范围。

数据大屏可视化，亦适配于手机、平板和电视等多种尺寸屏幕的终端。

如图1所示，根据本发明实施例所述的一种数据大屏可视化方法，包括以下步骤：

s1基于echarts、mapbox-gl-js和leaflet等开源库的基础上，对各个可视化组件进行封装和拓展；

s2将封装的可视化组件构建可视化引擎，其中，所述可视化引擎包括图表组件库和空间地理信息组件库，用于支持多数据源接入、配置式交互分析和多屏幕适配；

s3用户根据自己项目需求，通过配置文件声明各种图表组件的布局、数据源、图表联动、样式文件、插件机制和组件规范；

s4将所述配置文件通过所述可视化引擎渲染成数据大屏。

在本发明的一个具体实施例中，所述步骤s3中图表组件的布局采用绝对定位、指定位置和长宽单位统一使用像素，使用图层顺序控制各个可视化组件的层叠关系。

如图2所示，在本发明的一个具体实施例中，所述步骤s3中数据源包括静态数据源和api数据源，支持api数据的动态更新，支持带参查询和跨域请求，支持对数据的筛选过滤和聚合排序等操作，数据源在大屏样式文件中配置采用分散式，即将数据源配置到每个可视化组件中，可视化组件与数据源一一对应。可视化引擎对于数据源的配置采用的结构如图2所示。

如图3所示，在本发明的一个具体实施例中，所述步骤s3中图表联动采用动态地改变数据源的url或过滤条件，使图表关联的数据发生变化而产生联动，可视化引擎参考mvvm架构和单项数据流的状态管理方案，数据联动通过回调id来实现，当用户与某个图表组件交互时，触发一个事件，将事件数据填充到一个回调变量中，并通知引用该回调变量的url或者过滤条件进行重新请求或计算数据，引起图表变化，例如地图组件：首先，在全局作用域注册一个变量region，代表地图组件当前显示的区域；其次，另外一个直方图的数据从api中获取，api的url中包含region的占位符，当用户点击地图上的一个市如“杭州”，则发起一个事件，通知全局作用域中的region变量已经改变；最后，全局作用域向引用region变量的直方图组件通知region发生变化，重新请求数据，然后自动通知引用改变量的可视化组件重绘。

样式文件；采用json格式进行组织，包含的配置项包括组件的样式、数据、联动的设置以及大屏的主题、尺寸、背景、缩放策略的设置。

在本发明的一个具体实施例中，所述步骤s3中插件机制用于将各个可视化组件动态地注册进来，不断扩展引擎的可视化能力和应用范围，通过可视化引擎的插件框架，提高可视化引擎的灵活性和扩展性，使得第三方开发者可以自主扩展或贡献可视化插件。

在本发明的一个具体实施例中，所述步骤s3中组件规范用于对可视化组件的设计规范和接口规范进行定义，对可视化组件的风格样式进行约定及可视化组件的接口和事件进行规范；组件规范包括组件的风格应该与可视化引擎默认的暗蓝色背景主题相适应；组件的配置项中不应包含背景和边框的设置，应保持背景透明、无边框，这样才能融入到背景中；各个可视化组件原则上不带标题的配置，标题的配置由专门的标题组件实现，接口规范包括：组件统一暴露出render方法，由可视化引擎调用；组件应该提供一个配置项的josnschema文件，用于对配置项进行校验；组件的布局和数据部分由引擎统一处理，组件不需要考虑；组件中事件的发送由组件实现，事件的接收和传递由引擎实现。

在本发明的一个具体实施例中，所述步骤s1中可视化组件包括但不限于图表组件、地图组件和多媒体组件。

图5所示，本发明的另一方面，提供一种数据大屏可视化系统，包括：

封装模块，用于在开源库的基础上，对各个可视化组件进行封装和拓展；

构建模块，用于将封装的可视化组件构建可视化引擎，其中，所述可视化引擎包括图表组件库和空间地理信息组件库，用于支持多数据源接入、配置式交互分析和多屏幕适配；

配置模块，用于通过配置文件声明各种图表组件的布局、数据源、图表联动、样式文件、插件机制和组件规范；

其中，图表组件的布局采用绝对定位、指定位置和长宽单位统一使用像素，使用图层顺序控制各个可视化组件的层叠关系。

如图2所示，数据源包括静态数据源和api数据源，支持api数据的动态更新，支持带参查询和跨域请求，支持对数据的筛选过滤和聚合排序等操作，数据源在大屏样式文件中配置采用分散式，即将数据源配置到每个可视化组件中，可视化组件与数据源一一对应。

如图3所示，图表联动采用动态地改变数据源的url或过滤条件，使图表关联的数据发生变化而产生联动，可视化引擎参考mvvm架构和单项数据流的状态管理方案，数据联动通过回调id来实现，当用户与某个图表组件交互时，触发一个事件，将事件数据填充到一个回调变量中，并通知引用该回调变量的url或者过滤条件进行重新请求或计算数据，引起图表变化，例如地图组件：首先，在全局作用域注册一个变量region，代表地图组件当前显示的区域；其次，另外一个直方图的数据从api中获取，api的url中包含region的占位符，当用户点击地图上的一个市如“杭州”，则发起一个事件，通知全局作用域中的region变量已经改变；最后，全局作用域向引用region变量的直方图组件通知region发生变化，重新请求数据，然后自动通知引用改变量的可视化组件重绘；

样式文件；采用json格式进行组织，包含的配置项包括组件的样式、数据、联动的设置以及大屏的主题、尺寸、背景、缩放策略的设置；

插件机制用于将各个可视化组件动态地注册进来，不断扩展引擎的可视化能力和应用范围，通过可视化引擎的插件框架，提高可视化引擎的灵活性和扩展性，使得第三方开发者可以自主扩展或贡献可视化插件；

组件规范用于对可视化组件的设计规范和接口规范进行定义，对可视化组件的风格样式进行约定及可视化组件的接口和事件进行规范；组件规范包括组件的风格应该与可视化引擎默认的暗蓝色背景主题相适应；组件的配置项中不应包含背景和边框的设置，应保持背景透明、无边框，这样才能融入到背景中；各个可视化组件原则上不带标题的配置，标题的配置由专门的标题组件实现，接口规范包括：组件统一暴露出render方法，由可视化引擎调用；组件应该提供一个配置项的josnschema文件，用于对配置项进行校验；组件的布局和数据部分由引擎统一处理，组件不需要考虑；组件中事件的发送由组件实现，事件的接收和传递由引擎实现；

渲染模块，用于将所述配置文件通过所述可视化引擎渲染成数据大屏。

在本发明的一个具体实施例中，所述可视化组件包括但不限于图表组件、地图组件和多媒体组件。

为了方便理解本发明的上述技术方案，以下通过具体使用方式上对本发明的上述技术方案进行详细说明。

在具体使用时，根据本发明所述的数据大屏可视化方法，首先，在项目中引入geoeye引擎，包括两个文件：geoeye.js和geoeye.css；然后根据geoeye引擎样式规范编辑json格式的配置文件；最后，我们只需一行代码就可以将配置文件渲染成为可视化大屏：

window.screen=newgeoeye.screen(data,{container:‘map’});

以上代码中“map”指html容器的标签id，“data”即我们第二步中所编辑配置文件对应的json对象。

可以看出，数据大屏可视化项目实施中所需要做的最核心的事情就是配置文件的编辑，基本配置项包括大屏的宽高、背景色、缩放方式、可视化组件等。

示例如下：

{

"width":1920,

"height":1080,

"scale":"width",

"backgroundcolor":"#000000",

"components":[

{

"id":"abcde",

"type":"bar",

"source":{...},

"layout":{...},

"paint":{...}

},

…

]

}

以上配置项含义分别为：大屏的宽度、大屏的高度、缩放策略、大屏背景、可视化组件构成，其中最为重要的就是组件的配置项；可视化组件就是项目的内容，可视化组件配置定义了组成大屏的各种可视化组件的数据源、布局和样式文件等信息，组成大屏的可视化组件以数组方式配置，数组中位置决定了组件的渲染次序和叠加关系。在数组头部的组件先渲染，位置靠底层；在数组尾部的组件后渲染，位置靠顶层。可视化组件配置的基本结构如下，包括组件的id、类型、数据源、布局和样式信息的配置。

如图4所示的大屏系统，对于geoeye引擎，可以划分为9个模块（component），即：三个背景图片模块、两个标题模块、一个地图模块、一个柱状图模块、一个折线图模块、一个时间轴模块。

由于篇幅有限，这里仅给出两个模块的配置方式：

{

"width":1920,

"height":1080,

"scale":"width",

"backgroundcolor":"#ffffff",

"components":[{

"id":"map",

"name":"map",

"type":"leaflet_map",

"paint":{

"base":"arcgis",

"init":{

"lat":29,

"lon":120.1,

"zoom":7

},

"layers":[

{

"id":"geojson_map",

"name":"base",

"type":"geojson",

"minzoom":0,

"maxzooom":22,

"visible":true,

"source":{

"url":"./data/gw_xzqregion.json",

"type":"geojson"

},

"options":{

"type":"normal",

"style":{

"color":"#ffffff",

"weight":1,

"fillcolor":"rgba(90,124,144,1)",

"fillopacity":0.4

}

}

}

}

]

},

"layout":{

"width":671,

"height":655,

"offsetx":5,

"offsety":126,

"visible":true

}

},{

"id":"image",

"name":"image",

"type":"image",

"paint":{

"alt":"image-alt",

"src":"http://115.236.34.34:8668/api/res/download/183"

},

"layout":{

"width":480,

"height":480,

"offsetx":803,

"offsety":937,

"visible":true

}

}…

]

}

以上配置中，给出了地图和背景图片两个组件的配置方式，将以上配置传递给geoeye可视化引擎，即可渲染成为如图4所示的可视化大屏系统。

综上所述，借助于本发明的上述技术方案，通过可视化引擎允许开发人员通过编写配置json文件的方式，声明式描述大屏上的各种可视化组件的位置、样式、数据等信息，快速地搭建大屏可视化应用，极大的减少了大屏可视化应用的开发周期和工作量。

能够实现数据大屏的快速搭建和调试，大大简化了大屏可视化应用的开发流程，提高了数据大屏可视化系统的搭建效率。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。