运用数据分析和可视化技术的数据大屏交互体验系统研究

2019年3月

HenanScienceandTechnology

信息技术

运用数据分析和可视化技术的数据

大屏交互体验系统研究

徐彤

（江西财经大学软件学院，江西

南昌330013）

摘要：每个行业都要对数据趋势进行分析预测，因此，相关单位开发了运用数据分析和可视化技术的数据

大屏交互体验系统，将文本、数字等传统枯燥的数据以图形化的形式呈现出来，大大提高了用户体验满意度，且支持生成数据分析报告、文件上传等功能，方便用户决策。关键词：数据分析；可视化技术；大屏交互体验系统中图分类号：TP391.41

文献标识码：A

文章编号：1003-5168（2019）07-0025-03

DataLargeScreenInteractiveExperienceSystemUsingData

AnalysisandVisualizationXUTong

Technology

（SoftwareSchool,JiangxiUniversityofFinanceandEconomics，NanchangJiangxi330013）

Abstract:large-screenEveryinteractiveindustryexperienceneedstoanalyzesystemandusingforecastdataanalysisthetrendandofvisualizationdata.Therefore,technology,therelevantwhichunitpresentsdevelopstheatradi⁃datationalnumberboringofgenerations.datasuchastextanddigitalingraphicalform,greatlyimprovestheuser'sexperience,andsupportstheastofacilitateuserstomakeItalsodecisions.

supportsthefunctionsofgeneratingdataanalysisreports,uploadingfilesandsoon,soKeywords:dataanalysis；visualizationtechnology；largescreeninteractiveexperiencesystem在过去很长一段时间内，用户通过阅读文本或数字认针对特定业务场景，缺少扩展性，用户很难更改数据来源知数据。对用户来说，这种方式较为枯燥乏味。而在统以及展示形式，但本文设计的数据分析和可视化展示系计学中，将数据以图表的形式呈现出来，往往更直观，更容统能够适应开放式结构，用户可以自己定制系统，随时进易发现数据背后隐藏的规律，使人们的阅读习惯由“阅读”行动态修改，给用户提供完美的数据大屏交互体验，界面向“浏览”转变，且人们往往更喜欢这种视觉冲击效果。

效果如图1所示。

1

系统总体结构

本文设计并实现了数据分析和可视化展示系统，通过将所有数据汇聚到系统中，然后展示出来，用户可以直观看到整个数据态势，看到数据的具体变化情况。运用新技术、全媒体全平台，为用户提供一个全新的数据浏览体验，提供新颖的数据发布展示，贴合不同用户的实际需求提供辅助决策信息。数据分析和可视化展示系统具有直观化、关联化、艺术化和交互性的特点，通过合理的可图1

数据分析和可视化技术的数据大屏交互体验系统的界面

视化使用户感知大量数据。用可视化方式呈现出来，会效果图

更易于被人们接受、理解。传统的数据可视化系统往往

数据分析和可视化展示系统操作简单，在小屏幕界

收稿日期：2019-02-15

作者简介：徐彤（1998—），男，本科，研究方向：软件工程理论与方法。

·26·

运用数据分析和可视化技术的数据大屏交互体验系统研究

第7期

面分为3个滑动页面，用户可分别对大屏数据排版、主题告，则可以选择下载的生成数据分析报告。

风格以及各个图表的参数（如图表类型、数据项等）进行设置，大屏幕界面显示会随之发生变化，实现小屏控大3技术难点屏，动态修改展示方式，为用户提供更加灵活的数据交互体验［1］，总体功能结构图如图2所示。

3.1

在本项目中，批数据处理

考虑到用户可能希望自己上传数据，于整个项目的构成分为客户端和Web端后台服务器。是通过SpringBoot实现了文件上传功能，文件上传之后，其中，客户端又分为“小屏”端和“大屏”端。客户端主要使用SpringBatch框架进行批数据处理。虽然网上这方采用了JQuery、Ajax、Echarts等前端框架。Web端后台服面的资源非常少，但官网给了使用示例，相关单位在理解务器采用Java编写，主要采用了SpringBoot、SpringMVC示例之后，能够实现批数据处理，使用户按照指定数据格框架，数据库部分则采用了MySQL以及Redis［2］。

式上传数据之后，将其中的数据导入数据库。在本地新运用数据分析和可视化技术的数据建一个dataInfo.csv文件，文件每行根据dataInfo数据表字大屏交互体验系统段添加数据，每个字段所对应的数据之间用逗号分隔。通过配置SpringBatch的Reader、Processor和Writer读取

数据源数据可视化数据分析csv文件，3.2

进行数据处理和加工，Redis缓存

最后写进数据库中。

修在该项目中，由于设置了定时任务，大概每1min会

上发多修修改生传送屏改改下自动在界面中刷新一次数据，重新绘制ECharts图表。但文数互排主图成载件据动版题表参报报每次重新绘制图表，实际上向数据库中请求了9次相同数告告的数据，如果每次都从MySQL中请求，用户体验会非常图2数据分析和可视化技术的数据大屏交互体验系统的总体

差，但是假如把第一次请求得到的数据放进缓存，之后8功能图

次都从缓存中得到数据，效率会非常高。

２总功能点设计4

使用方法

2.1为获得更好的操作体验，相关单位应使用Google

击上传文件按钮，2.1.1数据源功能模块用户可以上传数据源文件。用户在大屏上点Chrome或者AppleSafari浏览页面。大屏幕展示页面地选择需要上传的数据文件，完成上传。址：47.101.190.24:9898/largeScreenEnd；小屏幕操控页面

发送数据给后台，2.1.2发送数据。系统维护人员利用便于让前台显示实时数据。

OKHttp请求

地址：47.101.190.24:9898/mobileEnd。

2.2数据可视化功能模块

4.1

用户应分别在大屏及小屏设备浏览器上打开大屏及多屏互动

幕”进行控制，2.2.1多屏互动。用户可以通过小屏的页面地址，在“小屏幕”点击“请先选择数据类型”通过在“小屏幕”界面进行操作，“小屏幕”如改变主对“大屏

下拉框，并在下拉框中选择想在“大屏幕”中呈现的数据题、图表参数等，使“大屏幕”随之进行变化。

类型（可以选择默认数据类型或自定义上传数据类型）。

2.2.24.2

在小屏端界面选择数据类型之后，修改排版

己的需求对图表展现的排版进行选择，修改排版。用户可以在“小屏幕”一经选择，界面根据自“大屏默认进入布局选幕”会马上切换。

择页面，用户可点击“选择大屏布局”下拉提示，并在下拉2.2.3框中选择布局选项（1*1/2*2/3*3/4*3），大屏即会进行相己的需求、喜好等对修改主题。用户可以在“大屏幕”界面的主题进行选择，“小屏幕”界面根据自一经应排版切换。

选择，“大屏幕”会马上切换。

2.2.4

修改图表参数。用户可以在“小屏幕”界面对

4.3

在小屏端界面选择数据类型之后，修改主题默认进入布局修“大屏幕”需要呈现的数据图表进行选择，选择内容包括改页面。手指向右滑动或点击下方切换栏中第2个按图表类型、数据项以及数据条数，一经选择，“大屏幕”会钮，进入主题修改页面。从下拉选项中选择一个心仪的马上根据设置的信息呈现图表。

大屏主题样式，大屏即会切换相应主题。

2.34.4

在小屏端界面，修改图表参数

手指右滑或点击下方切换栏中第3“小屏幕”2.3.1数据分析功能模块进行数据分析，生成报告。用户可以任意选择在然后生成数据分析报告。

“大屏幕”或

个按钮，将进入图表参数修改页面。页面中空白方块即2.3.2

下载报告。如果用户选择生成数据分析报

代表当前页面显示排版，点击任意一个空白方块，修改该

第7期

运用数据分析和可视化技术的数据大屏交互体验系统研究

·27·

方块图表的类型、数据项与数据量（图表类型单选，数据出来，例如，人工智能、大数据等。如何利用这些技术使项复选，数据量合法范围为1~50；个别图表如饼状图和仪其更加贴近生活，需要相关单位在数据可视化技术的基表盘等，假如选了10条甚至更多条数据，也只会显示一础上开发以图表形式呈现数据的功能，支持修改参数的条的结果）。

显示图表类型，方便决策人分析数据的规律及联系。本4.5下载数据分析报告

系统适合在各个行业运用，对各个行业今后的发展具有在大屏界面同时按住Ctrl+Q组合键，调出大屏功能一定的指导作用。

菜单。鼠标点击选择相应格式数据分析报告（Word/Txt/Excel击Word/Txt/Excel）进行下载。进入小屏界面，图标进行分析报告下载在默认界面即可通过点（Excel下载文档为源数据文档）。

4.6在大屏界面，上传数据

通过Ctrl+Q的组合键调出功能菜单，鼠标点击选择数据上传项，自动打开数据上传页面，在数据上传页面选择需要上传的数据文件并点击提交，即可完成数据上传。除此之外，用户还可以通过OKHttp向项目接口实时传输数据，以进行实时数据可视化展示。

4.7在大屏界面，选择图表数据

选择具体一个图表，点击如图3所示的图3

大屏界面的数据节点示意图

数据节点，即可选择或取消该节点的数据展示。

4.8参考文献：

在大屏界面，实时刷新开关数据

点击右上角的播放与暂停按钮，即可打［1］韩玉敏，初红霞，王希凤，等“可视化程序设计”.的课程开或停止数据实时刷新功能（伴随着Real-TimeUpdate达成度分析和持续改进方法研究［J］.黑龙江工程学院学报，On/Off提示）。

2019（2）：61-64.

5

结语

［2］黄雅莉，钟琪.基于Ajax与Echarts的网页动态数据加载［J］.科技咨询，2018（23）：40-41，43.

随着互联网时代的高速发展，越来越多的技术涌现