面向大屏的图表展示系统设计与实现

发布时间：2020-09-19 22:59

　　 随着现代社会中信息技术的高速发展,数据可视化已成为数据分析领域非常重要的技术之一。各种类型的图表是数据可视化的重要工具,由多种图表组成的大屏能够帮助人们非常直观简洁地分析数据。本文中所指的大屏,就是一种数据可视化的综合手段,即把不同类型的数据通过多样、适当的图表整合到一起,形成一个完整的数据可视化界面,该界面往往被投放在各种分辨率和各种尺寸的屏幕载体上。为了生成上述的大屏页面,用户目前有两类数据可视化工具可以选择使用,一类是面向软件技术人员的编程框架,其主要为开发者提供专业编程接口来实现数据可视化;二是面向普通用户的数据可视化系统。但在大数据环境下,普通用户存在面向大屏进行图表展示的需求,所以对数据可视化工具提出了更高的要求,例如较高的性能、学习成本要低、操作要更简便等需求。针对上述问题,本文通过对相关可视化技术和可视化系统现状的详细研究,基于Web设计并实现了一款面向大屏的图表展示系统,以便众多普通用户可以使用该系统轻松地去创建数据可视化大屏,方便简单地完成数据分析工作。本文研究内容及工作主要包含以下四部分:(1)基于Vue.js与Node.js设计实现了一种能生成多种类型图表并最终面向大屏的通用性图表展示系统。该系统操作友好且功能全面,具备大屏动态配置、数据源对接、大屏管理、用户管理等功能。(2)基于ECharts可视化框架设计实现一种大屏动态配置功能,该功能主要包括完善的图表渲染、友好的拖拽布局交互效果和画布的实时更新。(3)设计实现多种数据源对接方式,主要分为数据库对接、前端输入静态JSON数据对接、Mock数据对接和上传本地CSV文件四种方式。(4)设计实现一种大屏页面快速渲染与发布机制,并通过性能测试验证了该机制提高了用户所发布的大屏在浏览器端的加载速度。本文基于Web实现的面向大屏的图表展示系统,支持多种用户角色使用,并具有方便的用户管理功能。本系统采用前后端分离的架构,整体架构符合组件化和模块化的设计原则。此外,为了解决在大数据量和大量图表情况下的数据可视化大屏在浏览器端渲染缓慢的问题,本系统从架构层面提供了一套大屏页面快速渲染与发布机制。该机制主要内容分为两个方面,一是针对数据大屏的特点定制一套可扩展的基于JSON Schema大屏页面描述文档,二是提供一种大屏页面后端渲染引擎,在Node.js运行环境将大屏中的图表以SVG模式进行后端渲染,并生成含有大屏页面结果的HTML文档,将大屏页面以URL的形式进行发布。最后,本文系统通过了一系列的功能测试、单元测试和性能测试的验证,符合系统的功能性需求和非功能性需求,具有较高的实际应用价值。
【学位单位】：西安电子科技大学
【学位级别】：硕士
【学位年份】：2019
【中图分类】：TP393.09;TP311.13
【部分图文】：

根据上文做出的分析，首先对系统的总体功能性需求进行分析和总结。此处画出了面向大屏的图表展示系统的整体用例图，如图 3.1 所示。图3.1 系统总体用例图本系统主要的功能需求包括：（1）大屏动态配置。此项功能属于普通用户和管理员的专属功能，普通用户和管理员登陆成功可以使用。本文系统需要提供简便的可视化操作，面向非编程用户提供可视化的配置操作流程。本系统为用户提供数据可视化大屏的全流程配置功能，包括大屏背景、分辨率和各个数据图表的配置功能。用户需要系统提供友好的交互操作和简洁的系统界面。（2）数据源配置。此项功能属于普通用户和管理员的专属功能，普通用户和管理员登陆成功可以使用。数据源是指大屏中每个图表的数据来源，数据来源应包括：前端手动输入、数据库数据、Mock 数据和本地上传文件。（3）大屏管理。该功能属于公共功能，其中访客用户只有查看大屏这个子功能的使用权限。登录成功的用户可以使用。主要功能是对大屏进行管理并进行发布，该功能令多个用户通过系统可以并行地同时配置多个大屏

3.1.3 大屏动态配置功能需求大屏动态配置是系统功能模块中的核心功能，它的用例图如图 3.2 所示。图3.2 大屏动态配置用例图大屏动态配置功能主要包括：（1）新增图表本文系统提供多种类型的图表。用户可以在配置大屏的过程中，往大屏中添加新

组件占用时，系统应给出相应的提示，引导用户删除所有占用该数据源的图表后，该条数据源信息才可以完全被清除。图3.3 数据源配置功能用例图数据源配置功能的需求列表如表 3.2 所示。表3.2 数据源配置功能需求列表需求编号 需求内容 优先级R5 系统支持新增、编辑数据源 高R6 系统支持对接数据库、前端手动输入、Mock 数据和本地上传文件多种数据源对接方式高R7 系统支持查看、删除用户创建的数据源 高R8 系统支持查看数据源时，提供数据源内容的预览功能 低

【相似文献】

相关期刊论文 前10条

1 张开法;;混合现实技术在大数据可视化中的应用[J];电脑编程技巧与维护;2019年04期

2 左圆圆;王媛媛;蒋珊珊;徐榕荟;;数据可视化分析综述[J];科技与创新;2019年11期

3 吴蓓;于纯浩;;浅论数据可视化技术在教学中的应用[J];吉林工程技术师范学院学报;2019年06期

4 ;数据可视化：在未来实现挖掘数据智慧的愿景[J];今日科技;2019年08期

5 夏晗雨;;数据可视化传播网络策略研究[J];新闻研究导刊;2019年16期

6 孙敏;王琳;;大数据时代下的数据可视化方法分析[J];软件;2019年09期

7 刘X;;势在必行，面向决策支持的数据可视化系统设计[J];产权导刊;2019年09期

8 田伟;;基于交互式的大数据可视化探究[J];中国新通信;2019年20期

9 刘立伟;;数据可视化在新闻传播中的连接角色[J];青年记者;2017年35期

10 郭玮;;大数据背景下统计数据可视化研究[J];内蒙古统计;2017年06期

相关会议论文 前10条

1 刘勘;周洞汝;;大型数据库中的数据可视化技术[A];第十八届全国数据库学术会议论文集（技术报告篇）[C];2001年

2 于晖;;数据可视化:科学与艺术的融合之美[A];科学艺术 传承创新—科学与艺术融合之路[C];2017年

3 管理论坛课题组;;精准数据的获取、挖掘与利用——基于电子地图的数据可视化分析[A];浙江省烟草学会2014年学术年会论文暨信息技术专业委员会科技成果汇编[C];2014年

4 马辰;李玮;高慧英;;数据可视化技术及其在船舶平台系统中的应用[A];中国造船工程学会电子技术学术委员会2017年装备技术发展论坛论文集[C];2017年

5 夏菁;刘真;胡越琦;陈为;彭帝超;;基于超图的骨生物数据可视化研究[A];第五届全国几何设计与计算学术会议论文集[C];2011年

6 谢跟踪;;生态环境空间数据可视化研究[A];全国地图学与GIS学术会议论文集[C];2004年

7 吕媛;郭艳华;朱玮;于薇;;基于AngularJs的数据可视化呈现[A];2018年数字化造船学术交流会议论文集[C];2018年

8 陈进生;罗月童;;轮廓树及其在体数据可视化中的应用[A];全国第21届计算机技术与应用学术会议（CACIS·2010）暨全国第2届安全关键技术与应用学术会议论文集[C];2010年

9 俞胜宾;王文娟;;基于WebGIS和WebGL的气象数据可视化模块及其应用[A];第35届中国气象学会年会 S14 大数据、互联网、融媒体时代气象服务的创新与变革——第八届气象服务发展论坛[C];2018年

10 吉龙龙;张瑛秋;周星栋;朱航标;;数据可视化在乒乓球比赛中的应用研究[A];第十一届全国体育科学大会论文摘要汇编[C];2019年

相关重要报纸文章 前10条

1 廖堡;以大数据可视化形式呈现雷锋印记[N];中国新闻出版广电报;2019年

2 佚名;工业大数据可视化难点[N];中国信息化周报;2019年

3 孙彬 刘雄 贺艳杰;数据可视化 解决小问题 逐步大发展[N];建筑时报;2019年

4 Isaac Sacolick 编译 Charles;实现更智能数据可视化的5个步骤[N];计算机世界;2019年

5 本报记者 苏洁;厉害了，人工智能![N];中国保险报;2016年

6 本报记者 刘晶晶;大数据可视化[N];中国信息化周报;2017年

7 中国烟草总公司深圳市公司财务管理处 张鸿标;财务数据可视化：让不懂财会的人看懂企业运营[N];中国会计报;2017年

8 中国青年报·中青在线记者 蒋椺薇 蒋欣 傅晓羚;改变云计算的极客少年[N];中国青年报;2017年

9 南京大学教育学院 张金磊 等;大数据可视化触发教育新热点[N];中国信息化周报;2016年

10 本报记者 刘磊;数据可视化赋予企业真正的大数据认知能力[N];贵阳日报;2016年

相关博士学位论文 前10条

1 陈雷;地震数据可视化及断层智能识别方法研究[D];北京工业大学;2017年

2 马仁安;基于微机的三维地震数据可视化技术研究[D];南京理工大学;2004年

3 任永功;面向聚类的数据可视化方法及相关技术研究[D];东北大学;2006年

4 梁秀霞;医学影像数据可视化中若干问题研究[D];山东大学;2006年

5 王启超;面向体数据可视化的数据预处理方法研究[D];浙江大学;2017年

6 周璐;复杂向量场数据可视化技术研究与实现[D];中国人民解放军国防科学技术大学;2000年

7 常凤香;基于生物电阻抗测量原理的经络诊断数据可视化方法研究[D];燕山大学;2012年

8 华岗;地震体数据可视化与分析研究[D];浙江大学;2011年

9 雷迎科;流形学习算法及其应用研究[D];中国科学技术大学;2011年

10 刘玉华;模型驱动的网络数据的可视分析方法研究[D];华东师范大学;2017年

相关硕士学位论文 前10条

1 向梦迪;数据可视化技术在H公立医院绩效审计中的应用研究[D];中国财政科学研究院;2019年

2 周文;数据可视化中视觉元素造型设计研究[D];四川师范大学;2019年

3 徐晓文;气象时空数据可视化的研究与实现[D];中国电子科技集团公司电子科学研究院;2018年

4 王宁;面向大屏的图表展示系统设计与实现[D];西安电子科技大学;2019年

5 施皓;面向布局推荐的数据可视化系统设计与实现[D];西安电子科技大学;2019年

6 戴鹏;城市车辆数据可视化系统的设计与实现[D];西安电子科技大学;2019年

7 潘江;基于地理信息的学术数据可视化系统[D];大连理工大学;2019年

8 高盼;基于Hadoop的电力大数据可视化研究与实现[D];重庆邮电大学;2018年

9 张琳;电力行业数据可视化系统研究与实现[D];电子科技大学;2019年

10 孙嘉阳;科技艺术创作理论下的数据可视化研究与实践[D];华中师范大学;2019年

本文编号：2823101