由于互联网、云计算等计算机技术的飞速发展，制造企业在生产、管理、运维等方面产生了超越以往任何年代的海量数据，企业对隐藏在数据中的价值越来越感兴趣，也愈发认识到使用数据可视化工具对数据进行多维展现的重要性。但是传统的数据可视化工具由于其功能过于杂乱，偏向底层，专业程度高，操作不够灵活的特点，对于不具备数据可视化相关知识的普通用户来说在使用上难免会有局限，影响用户的使用体验。

       本文针对上述问题设计并实现了一个拖拽式数据可视化工具，该工具只需用户通过简单的拖拽操作即可快速完成从连接数据源、解析和转换数据、配置可视化图表的数据和样式、仪表板个性化布局到分享数据可视化结果一系列数据可视化流程。论文的主要工作为：

       (1) 需求分析。本文首先对现有数据可视化工具及数据可视化方法进行梳理，分析并规范数据可视化工具的业务流程，整理本工具支持的主要功能。在此基础上，通过统一建模语言（Unified Modeling Language，UML）说明系统的功能需求。

       (2) 系统设计和实现。在需求分析的基础上，设计系统总体架构图，分层次对拖拽式数据可视化工具的设计思路进行说明，并通过功能分解图确定系统的功能结构。针对工具的实现进行技术选型，根据业务场景明确了本工具的实现大部分依赖前端，故前端设计模式选择MVVM框架及其衍生出来的视图模型。确定基于Spring Boot+React框架开发本工具，并采用数据可视化框架ECharts解决项目中图表封装和可视化交互这两个关键问题。通过类图对系统的编码流程进行建模，并采用序列图描述各个主要功能的详细实现过程。根据系统的功能需求对数据库进行设计，包括绘制数据库的逻辑模型图和物理模型图，以及对各个数据库表进行详细的解释说明。

       (3) 系统测试。在完成系统编码工作后，部署测试环境并设计测试用例，对本工具的主要功能模块进行详细的功能测试，并且对本工具进行性能测试，确保工具能够达到灵活、可配置的效果。

       经过系统测试和实际应用，本工具各个功能运行正常，具备良好的性能，达到设计目标，满足企业提出的各项需求。用户通过简单的拖拽操作即可便捷地完成复杂的数据可视化流程，能够有效提高使用体验和工作效率，降低用户的学习成本。

Because of the rapid development of computer technologies such as the Internet and cloud computing, manufacturing companies have produced massive data that surpassed any previous era in production, management, operation and maintenance. These companies are more and more interested in the value of data, and they are increasingly aware that using data visualization tools to present the data multi-dimensionally is important. However, traditional data visualization tools are too complex which own high professionalism, and these tools are not flexible enough for users. For users who do not have the knowledge related to data visualization, there will be limitations in use and the user experience will be affected.

 

This article designs and implements a drag-and-drop data visualization tool for the above problems. This tool only requires users to quickly complete a series of data visualization processes, ranging from connecting data sources, parsing and transforming data, configuring the data and style of visualization charts, personalizing layouts of dashboards to sharing data visualization results. The main work of this paper is the following modules:

 

(1) Demand analysis. This article reviews the existing data visualization tools and data visualization methods, analyzes and standardizes the business processes of the data visualization tools, and organizes the main functions supported by this tool. On that basis, the functional requirements of the tool are described through the Unified Modeling Language (UML).

 

(2) System design and implementation. Based on the requirements analysis, the overall architecture diagram of the drag-and-drop data visualization tool is designed and the design ideas of the tool are hierarchically explained. The functional structure of the tool is designed through the functional decomposition diagram. Based on the implementation of the tool to select related technologies, it is clear that most of the implementation of the tool depends on the front-end according to the business scenario. So, the front-end design pattern can be implemented by the MVVM framework and its derived view model. It is determined that this tool is developed based on the Spring Boot and React framework, and the data visualization framework ECharts is used to solve the two key problems of chart packing and visual interaction in the project. The coding process of the tool is modeled by class diagrams, and the detailed implementation of each major function is described by sequence diagrams. The database is designed according to the functional demands of the system, including drawing a logical model and a physical model of the database, as well as explaining each database table in detail.

 

(3) System test. After completing the work of system coding, the test environment is deployed and the test cases are designed. Detailed functional tests of each functional module and performance tests of the tool are performed to ensure that the tool can achieve flexible and configurable effects.

 

After system testing and practical application, each function of this tool runs normally, and owns good performance, which achieves the design goals, and meets the demand of enterprises. It can easily complete complex data visualization processes through simple drag and drop operations, which can effectively improve user experience, enhance work efficiency, and reduce learning costs.

[1] 王敬焘, 余亚莉. 浅析企业信息化建设[J]. 数字通信世界, 2011, 9: 88.
[2] 易泽顺. 基于Web的数据可视化工具设计与实现[D]. 华中师范大学, 2017.
[3] 曾悠. 大数据时代背景下的数据可视化概念研究[D]. 浙江大学, 2014.
[4] Jiawei Han, Micheline Kamber, Jian Pei. Data Mining:Concepts and Techniques[M]. 机械工业出版社, 2012.
[5] 周志华. 机器学习[M]. 清华大学出版社, 2016.
[6] Donald Hearn, M.Pauline Baker. Computer Graphics with OpenGL, 3rd Edition [M]. 电子工业出版社, 2005.
[7] 孙静. 卡罗尔人机交互理论的认知方法论[D]. 山西大学, 2012.
[8] Richard Szeliski. Computer Vision: Algorithms and Applications [M]. 清华大学出版社, 2012.
[9] Downey. Experienced wholeness: Integrating insights from gestalt theory, cognitive neuroscience, and predictive processing[J]. Philosophical Psychology, 2020, 33(3): 469-473.
[10] 张二华. 三维地震数据场直接体绘制方法及应用[C]. 第十三届全国图像图形学学术会议论文集, 2006: 664-667.
[11] 马豪. 高维数据可视化方法研究[D]. 国防科学技术大学, 2016.
[12] Sellars Bridgett Byrd, Sherrod Dennis R, Chappel-Aiken Lolita. Using word clouds to analyze qualitative data in clinical settings[J]. Nursing management, 2018, 49(10): 51-53.
[13] Filho Jorge A Wagner, Stuerzlinger Wolfgang, Nedel Luciana. Evaluating an Immersive Space-Time Cube Geovisualization for Intuitive Trajectory Data Exploration[J]. IEEE transactions on visualization and computer graphics, 2020, 26(1): 514-524.
[14] 秦红星, 卫学仕.平行坐标中的边捆绑算法[J]. 计算机辅助设计与图形学学报, 2017, 29(7): 1235-1244.
[15] 任磊, 杜一, 马帅, 等. 大数据可视分析综述[J]. 软件学报, 2014, 25(9): 1909-1936.
[16] Shixia Liu, Michelle X. Zhou, Shimei Pan. TIARA: Interactive, Topic-Based Visual Text Summarization and Analysis[C]. Acm Conference on Information & Knowledge Management, 2009.
[17] Niklas Elmqvist, ThanhNghi Do, Howard Goodell. ZAME: Interactive Large-Scale Graph Visualization [C]. IEEE PacificVis, 2008.
[18] Zhao Jian, Collins Christopher, Chevalier Fanny, et al. Interactive exploration of implicit and explicit relations in faceted datasets[J]. IEEE transactions on visualization and computer graphics, 2013, 19(12): 2080-2089.
[19] 权鑫. 基于D3.js的数据可视化系统框架设计与实现[D]. 北京交通大学, 2016.
[20] Downey. Experienced wholeness: Integrating insights from gestalt theory, cognitive neuroscience, and predictive processing[J]. Philosophical Psychology, 2020, 33(3): 469-473.
[21] 裴丹丹. 基于ECharts的数据可视化实现[D]. 北京邮电大学, 2018.
[22] 刘晓强. 科学可视化的研究现状与发展趋势[J]. 工程图学学报, 1997(Z1): 128-134.
[23] 洪文学, 王金甲. 可视化和可视化分析学[J]. 燕山大学学报, 2010, 34(2): 95-99.
[24] 江永渡, 程德生, 赵志武, 等. 基于Spark框架的大数据计算平台[J]. 网络安全技术与应用, 2020(3): 65-66.
[25] 赵必厦, 程丽明. 从零开始学Storm[M]. 清华大学出版社, 2014.
[26] 李曼丽, 丁若曦, 张羽, 等. 从认知科学到学习科学:过去、现状与未来[J]. 清华大学教育研究, 2018, 39(4): 2429-2439.
[27] 贾丛丛. 基于MVVM的Web前端响应式框架的研究与集成[D]. 云南大学, 2016.
[28] 王丹, 孙晓宇, 杨路斌, 等. 基于Spring Boot的软件统计分析系统设计与实现[J]. 软件工程, 2019, 22(3): 40-42.
[29] Yuxiang Hou. The design and implementation of the framework for Spring+SpringMVC+MyBatis in the development of Web application[C]. Proceedings of 2019 4th International Industrial Informatics and Computer Engineering Conference(IIICEC 2019). 2019, 369-374.
[30] 萧仁惠, 陈锦辉. JDBC数据库程序设计[M]. 中国铁道出版社, 2004.
[31] Margaretha Ohyver, Iwa Sungkawa, Bonifasius Edwin Subagyo, et al. The Comparison Firebase Realtime Database and MySQL Database Performance using Wilcoxon Signed-Rank Test[J]. Procedia Computer Science, 2019, 157: 396-405.