论文总字数：21429字

摘 要

数据可视化技术将数据以图表、形状、动画等形式呈现，使数据更易于人们感知和理解。同时兼顾了内涵丰富以及表达简练的优点，是人们从事数据处理或者决策管理必不可少的技术方案。目前可视化平台主要分为两类：第一类是供特定领域用户使用的专业数据可视化平台，例如Tableau，该类软件不适用于其他领域的使用者并且该类工具安装过程繁琐，不便于跨设备使用。第二类是供程序开发人员使用的开源可视化图表绘制函数库，例如ECharts.js、BizCharts.js函数库都可以创建丰富多彩的图表，但是他们的缺点也显而易见，不具有简易性，即不适用于不具有编程经验的用户。

基于此，本课题拟提出一种具有跨领域通用、便携以及简易的数据可视化平台，结合时新的React与图形库，为用户提供良好的交互性，可以满足不同领域从业人员的使用需求。从而促进行业领域之间的交流与协同发展。

关键词：数据可视化 React Ant-Design ECharts

Design and implementation of data visualization platform based on React framework

ABSTRACT

Data visualization technology presents data in the form of charts, shapes, animations, etc., making the data easier for people to perceive and understand. It is an indispensable technical scheme for data processing or decision management because of its rich connotation and concise expression. Currently, visualization platforms are mainly divided into two categories: the first category is a professional data visualization platform for users in a specific domain, such as Tableau. Such software is not suitable for users in other domains and the installation process of such tools is tedious. The second category is open source visual charting function libraries for application developers. For example, echarts.js and BizCharts. Js function libraries can all create colorful charts, but their disadvantages are obvious, they are not easy to use, that is, they are not suitable for users without programming experience.

This topic intends to propose a data visualization platform architecture that is universal, portable and simple across the field. Combining the new React and graphics library, it provides users with good interactivity and can meet the needs of practitioners in different fields. So as to promote the communication and collaborative development between the industry.

Key Words：Data visualization; React; Ant-Design; ECharts

目 录

摘 要 I

ABSTRACT II

第一章 绪论 1

1.1 课题背景 1

1.2 研究意义与目标 2

1.3 论文框架 2

第二章 文献综述 4

2.1 可视化技术概述 4

2.1.1 可视化应用类型 4

2.1.2 可视化流程 6

2.1.3 可视化平台概述 6

2.2 框架技术概述 7

2.2.1 框架的概念 7

2.2.2 框架的设计原则 8

2.2.3 MVC架构 9

2.3 React技术概述 10

2.3.1 Web前端组件化思想 10

2.3.2 虚拟DOM 11

2.3.3 React组件间的通信 12

2.4研究述评 13

第三章 可视化平台需求分析与概要设计 14

3.1 可视化平台需求分析综述 14

3.2 页面布局需求分析与概要设计 15

3.2.1 页面布局需求分析 15

3.2.2 页面布局概要设计 16

3.3 功能需求分析与概要设计 16

3.3.1 功能需求分析 16

3.3.2 功能概要设计 17

第四章 可视化平台详细设计与实现 19

4.1 页面布局详细设计与实现 19

4.1.1 总体布局 19

4.1.2 侧边栏 21

4.1.3 页头 22

4.1.4 内容 24

4.2 功能详细设计与实现 25

4.2.1 数据编辑 25

4.2.2 图表生成 27

4.2.3 图表下载 30

第五章 可视化平台测试 32

5.1 测试目标及环境 32

5.1.1 测试目标 32

5.1.2 测试环境 32

5.2 功能性测试 32

5.2.1 数据编辑功能测试 32

5.2.2 图表生成功能测试 35

5.2.3 图表下载功能测试 36

5.3 兼容性测试 37

第六章 总结与展望 39

参考文献 40

致谢 43

第一章 绪论

1.1 课题背景

5G技术在世界范围内高速发展，5G设备如雨后春笋般出现，让越来越多人享受着高速互联网。用户在享受互联网带来的便利时，也在全球各地的服务器上留下来了海量数据。相关资料表明，存在于互联网内的数据总量会以每年五成左右的增长率持续增长，这意味着互联网内的数据总量两年则会翻一番，并且增长率还在持续上涨。然而这其中的九成的数据量仅源自人们近十年的数据产生量。这些零散的海量的数据中存在着丰富的信息，它在经济、工业、农业、医疗甚至司法等领域都起着举足轻重的作用。基于以上情况，大数据技术被认为是具有革命性的技术，并且大数据技术显然已经成为了当前科学家、学者们的热门科学学术研究目标。

从海量的数据之中挖掘出信息的本质以及掌握其背后的规律来服务社会发展，成为了现在科学信息领域的关键问题。数据的规模越庞大，可供挖掘的价值越高，但是价值呈现的难度也随之递增。为了帮助研究人员更好的进行数据分析、价值传递，得益于图形化的探索方式，使得相互的数据信息沟通能够更加的清晰有效，便于相互的理解，这是数据可视化技术的目的之一。数据可视化技术和大数据技术携头并进，如火如荼的蓬勃发展，并被不同领域的从业人员视为重要的辅助工具。不同的用户需求促使可视化工具的发展，可供非专业人员使用的不需知道其工作原理的可视化工具逐渐替代了只能被专业从业人员使用的可视化工具。一个易用的可视化平台就如一个黑箱，你并不需要知道它是如何工作的，只需要将数据输入就可以成图，这些图形可以是可交互的图表或者地图图表和词云等。即使在具有进阶操作技能上的用户可以满足使用各种技术工具从而来创建视觉化的要求。然而重要的是，较新的技术工具允许非技术用户在不必学习如何使用复杂的模型和多媒体软件的情况下，能够对任一学科或多个学科进行数据的可视化呈现^[6]。

请支付后下载全文，论文总字数：21429字