大屏数据可视化易用工具的研究与开发①.docxVIP

? ? 大屏数据可视化易用工具的研究与开发① ? ? 王荟奥,蔡永香,杨岸霖,游小玲,何宗宜 (长江大学 地球科学学院,武汉 430100) 1 概述 大屏数据可视化是以大屏为主要展示载体进行数据的可视化呈现.随着大数据分析技术的流行,行业应用中进行数据分析及大屏可视化展示以提供决策支持的需求日益迫切.国内外许多互联网公司都有很多有用的可视化实践,以D3.js为例,其由Mike Bostock和斯坦福可视化组的Jeff Heer 制作,而以此为基础开发的可视化工具举不胜举,如Data.js、RAWGraphs 等[1]. 随着可视化的需求越来越大,出现了一些商业性可视化组件库,如阿里巴巴旗下的DataV 是专业级大数据可视化工具,有图形化编辑界面,支持多种数据源,能灵活部署及发布等,但免费版本的功能受限,商业应用的费用也很高.也有一些开源性可视化组件库,如百度旗下的Echarts,有着丰富的可视化类型,能进行深度的交互式数据探索,支持多维数据、动态数据等,有着丰富的视觉编码手段,但必须通过程序编码进行定制开发. 由于系统数据类型、分析需求各不相同,可视化表达的内容及方式不同,定制开发实现成本较高、运维管理复杂.如果能建成一个数据易用可视化工具,能借助可视化组件,基于数据面板配置管理数据,快速实现数据可视化,就能够大大节省成本,提高工作效率. 本文从方便实用角度出发,着重开发出一个拖拽式大屏数据可视化工具,使用数据连接面板、可视化组件库、场景模板以及发布工具,通过对可视化组件的拖拽式操作,让没有编程基础的人也能快速的将数据可视化,做出高大上的可视化应用. 该工具命名因研究办公室名为C317,该工具主要特点是数据可视化页面,数据的英文是Data,可视化页面用UI 表示,所以取名为C317DataUI. 2 系统统架构与开发技术 2.1 系统整体架构 本系统采用B/S 结构[2],在该结构的基础上将系统分为3 层:数据层、服务层、表现层,如图1所示. 图1 系统3 层架构图 (1)数据层 数据层主要的功能是给服务层中的业务逻辑提供各种类型的数据支持,它的主要任务是数据存储与管理,并将数据传递给上层的业务逻辑层进行处理. (2)服务层 服务层是处于应用程序数据层和表现层之间.服务层隐藏了业务逻辑层的细节,在内部组织业务微服务,采用封装和接口的形式,提供粗粒度、面向表现层的服务.系统所有的交互都是从表现层进入. (3)表现层 表现层位于3 层架构的最上层,它是直接与客户端交互的一层.它负责接收客户端的请求,解析客户端的请求,获取数据后,再返回给客户端,进而完成了一层数据请求[3]. 2.2 主要开发技术 考虑到要建成可视化工具C317DataUI的先进性与科学性,我们采用了成熟的前后台框架与技术来开发.前端采用Vue.js 框架、Element 组件库;后端采用Koa 框架实现系统服务,Spring Boot 框架实现多源数据连接Web 服务,采用JSON 格式进行数据传输,提高数据传输效率. Vue.js 是目前流行的创建界面的渐进式前端框架.它完全能够驱动使用Vue 生态系统支持的单个文件组件和库开发的复杂单页应用程序[4],而Vuex 是一个专为Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化[5].Element 是一套开源的组件库,旨在快速搭建页面,并提供了配套的设计资源,能充分满足可定制化的需求. Koa 是一个新的后端框架,它没有捆绑任何中间件,而是提供了一套优雅的方法,让开发者能快速而愉快地编写服务端应用程序[6].Spring Boot 不需要进行繁琐的定义配置,而是使用一种自动配置方式,目前已成为快速应用程序开发的领导者. 3 关键问题及解决方案 设计构建可视化工具C317DataUI的目的是实现数据快捷可视化,减少用户开发工作量,按照简单易用的原则进行软件开发.主要实现的功能需求有:可视化组件调用、配置、布局;页面编辑与发布,模板的发布、使用、编辑;多源数据的上传、管理与连接,以及用户信息的管理等功能.其中涉及到的关键问题主要包括以下两个方面. (1)多源数据配置问题 为了让C317DataUI 简单易用,设计采用傻瓜式的配置数据方式,不需编写代码,就能灵活处理不同数据源,支持MySQL、SQL Server 等常见关系型数据库,让需要表达的数据能灵活与可视化组件连接.并且在交互过程中,能对图表中的数据进行联动修改,而如何连接、统一处理不同来源的数据是解决问题的关键. 我们的策略是将所有数据连接并存储到MongoDB数据库,然后转换成一种公共的数据格式来可视化表达,这样就只需要对公共格式数据的可视化表达编写代码实现即可,可以