基于React+Echarts搭建数据可视化系统.doc-资料库

beans9-12716311-16359647248514112123.doc.pdf-第1页.png

第1页 / 共51页

beans9-12716311-16359647248514112123.doc.pdf-第2页.png

第2页 / 共51页

beans9-12716311-16359647248514112123.doc.pdf-第3页.png

第3页 / 共51页

beans9-12716311-16359647248514112123.doc.pdf-第4页.png

第4页 / 共51页

beans9-12716311-16359647248514112123.doc.pdf-第5页.png

第5页 / 共51页

beans9-12716311-16359647248514112123.doc.pdf-第6页.png

第6页 / 共51页

beans9-12716311-16359647248514112123.doc.pdf-第7页.png

第7页 / 共51页

beans9-12716311-16359647248514112123.doc.pdf-第8页.png

第8页 / 共51页

基于 React+Echarts 搭建数据可视化系统摘要数据可视化将单一的数据转换成图表，直观反映数据携带的信息，对数据底层蕴含规律和价值的挖掘有重要意义。 2020 年初新冠病毒导致的疫情牵动人心，为更直观的看到疫情的发展情况，设计实现了本疫情可视化项目。在疫情可视化系统实现过程中，本文就数据可视化的国内外现状、发展前景以及数据可视化的底层原理、流行可视化类库以及本疫情可视化系统实现具备的理论基础进行了全方位分析。然后结合系统的 Web 前端需求、系统功能需求等进行了需求分析。本项目提供了疫情地图、疫情趋势图、疫情最新动态和辟谣信息四大模块。其中，疫情地图可视化展示了疫情确诊人数的地域分布情况。疫情趋势模块通过现存确诊人数与新增确诊人数随时间变化的折线图和死亡人数与在诊人数随时间变化的折线图直观展示了疫情的发展趋势，又通过在诊人数、死亡人数与治愈人数的饼状图直观反映了抗疫的成果。疫情最新动态和辟谣信息帮助用户及时了解疫情最新动态信息和辟谣信息，防止谣言滋生引起恐慌。项目实现基于 React 框架，数据可视化部分使用 Echarts 实现，项目数据来源为天行数据和 GitHub 开放接口。关键词：疫情可视化，React 框架，Echarts，前端

目录 1 绪论.................................................................................................................................. 1 1.1 研究背景 ........................................................... 1 1.2 国内外研究现状 ..................................................... 1 1.2.1 国外研究现状 ..................................................1 1.2.2 国内研究现状 ..................................................2 1.3 研究方法 ........................................................... 2 1.3.1 面积或尺寸可视化 ..............................................2 1.3.2 颜色可视化 ....................................................3 1.3.3 图形可视化 ....................................................3 1.3.4 地域空间可视化 ................................................4 1.3.5 概念可视化 ....................................................4 1.4 研究内容 ........................................................... 5 1.5 研究意义 ........................................................... 6 2 系统技术分析........................................................................................................................ 7 2.1 计算模型分析 ....................................................... 7 2.2 可视化技术 ......................................................... 7 2.2.1 可视化技术分析 ................................................7 2.2.2 可视化类库 ....................................................8 2.3 前端技术选型 ....................................................... 8 2.4 本系统应用架构分析 ................................................ 12 2.5 本章小结 .......................................................... 13 3 需求分析.............................................................................................................................. 14 3.1 需求分析概述 ...................................................... 14 3.2 系统目标 .......................................................... 14 3.3 系统功能需求 ...................................................... 15 3.4 系统性能需求 ...................................................... 17 3.5 系统界面需求 ...................................................... 18 II

3.6 本章小结 .......................................................... 18 4 系统设计与实现.................................................................................................................. 19 4.1 平台技术架构 ...................................................... 19 4.2 系统详细设计 ...................................................... 19 4.2.1 系统数据获取 .................................................19 4.2.2 系统组件设计 .................................................20 4.3 系统实现 .......................................................... 22 4.3.1 环境搭建 .....................................................22 4.3.2 系统自适应布局实现 ...........................................24 4.3.3 地图组件的具体实现 ...........................................25 4.3.4 折线图组件的具体实现 .........................................28 4.3.5 饼状图组件的具体实现 .........................................29 4.3.6 疫情最新消息组件和辟谣信息组件的具体实现 .....................30 4.3.7 系统主页的具体实现 ...........................................32 4.4 本章小结 .......................................................... 37 5 系统测试.............................................................................................................................. 38 5.1 测试方法概述 ...................................................... 38 5.2 系统测试 .......................................................... 39 5.2.1 需求测试 .....................................................39 5.2.2 功能测试 .....................................................39 5.3 系统测试分析 ...................................................... 45 论.................................................................................................................................. 46 谢.................................................................................................. 错误！未定义书签。参考文献.................................................................................................. 错误！未定义书签。录.................................................................................................. 错误！未定义书签。附录 A ............................................... 错误！未定义书签。结致附

1 绪论 1.1 研究背景 21世纪，数据即“原油”，我们生活的每一天都在创造广量的数据。据官方相关资料显示，互联网络上的数据每年将上升百分之五十，每两年则翻一倍[1]。如何从广量的数据中挖掘出有效的价值并且直观的呈现给用户变得至关重要。大数据的战略意义不在于手握庞大的数据库，而是对数据的专业化处理能力。换句话说，数据的加工是大数据产业实现盈利的关键可视化利用人脑智能和人眼感知能力，可视化的表达数据，增强了数据的可读性，它化广量的数据为便于为人眼感知的图表、颜色等，将复杂的海量的数据转换为易于理解、易于解释的视觉表达。通过数据可视化人们可以快速理解内容、发现数据背后隐藏的规律。设计良好的可视化内容可以直观展示纷繁复杂的数据，并将数据背后隐藏的规律变得清晰明了。可以说，数据可视化对提高人脑分析效率有不可替代的效用。在这个数据已经成为基本生产资料的时代，可视化愈发体现出了它不可替代的价值。 2020年初的新冠疫情牵动人心，而疫情信息隐藏在繁杂的数据中，如何能让人们直观的看到疫情现状，如何直观反映疫情各省市确诊情况，分析疫情高风险城市，让公众掌握全国范围内疫情情况和发展趋势，达到指导出行、科学疫情防控的目的，成为现阶段研究的重点问题。数据可视化为挖掘疫情数据背后的价值，分析疫情数据所蕴含的意义提供了有效途径。本文将围绕着疫情数据的可视化展开探索。 1.2 国内外研究现状 1.2.1 国外研究现状可视化的研究最早可以追溯到 18 世纪英国和法国的统计学家，美国是现代可视化研究的起源点以及最大的技术掌握国家，其研究广度和深度均为世界第一[2]。 1990 年，电气电子工程师学会举办了首届 IEEE Visualization Conference，来自包括计算机、图形学等多个交叉学科领域的学者，对数据可视化研究的前景及技术做出讨论。依托于国外互联网技术的快速发展，对可视化技术的研究已经逐步成熟并覆盖到气象学、地理学等领域。国外许多互联网公司，如微软、Uber 等均对数据可视化做出良好应用，比如：

微软公司的 DataShot 项目，该项目通过分析原始数据海报的组成部分，对数据中可能产生的规律建立模型。该项目通过决策树的相关设计，挖掘数据背后的规律并将其可视化，然后布局到海报上。 Uber 公司利用大数据系统捕捉乘客一天内的行程曲线，并在地图上绘制一条从起点到终点的行程图，对充分洞察客户的出行习惯有极大帮助。 1.2.2 国内研究现状国内的数据可视化研究起步于 2008 年，学术界开始重点关注可视化研究，并建立专门的可视化研究团队。国内举办的可视化年会已经成为世界著名的可视化领域的学术会议，学术界众多可视化研究学者更是在国际核心期刊上发表论文，成果显著。在可视化应用上，国内的优秀互联网公司，如百度、阿里、帆软均有优秀范例，比如：百度开源的商业级数据图表 Echarts，发布半年内被评为“2013 年国产开源软件 10 大年度热门项目”并迅速成为热门的可视化技术，目前已经是国内中小型互联网公司做可视化的主选框架之一。帆软公司的 FineBI，新一代大数据分析的商业智能产品，提供从数据准备、自助数据处理、数据分析与挖掘、数据可视化于一体的完整解决方案，是业界比较推崇的可视化工具之一。 1.3 研究方法数据可视化是关于数据之视觉表现形式的科学研究[3]。由于数据挖掘的角度不同，数据所能传达的信息也不同。一般会根据数据涵盖的信息特点，选择不同的可视化方法。特定场景下可视化方法的使用并不局限于一种，在实际应用中一般会混合使用这几种可视化方法，特别是在做一些复杂图形和多维度数据可视化时。下面将列举常见的五种数据可视化方法及优秀范例。 1.3.1 面积或尺寸可视化对如柱状图、饼状图等相同类别的图形，通过区分长度和面积来清楚的表现不同数据类别对应的数据值之间的对比。该方法让用户对数据及其之间的差别一目了然。具体示例图见图 1.1。 2

1.3.2 颜色可视化图 1.1 蜘蛛图不同指标值的数值大小可通过颜色的深浅来展示，这是数据可视化的常用方法，通过该方式用户可清楚的看出哪一部分指标的数据值更突出。具体实例图见图 1.2。 1.3.3 图形可视化图 1.2 中国人口密度分布图为让用户更清晰的理解可视化图表想要表达的含义，我们可以通过改变可视化图表的图形形状来实现，像我们描述男性、女性和幼儿体内含水量时所用到的图，就属于此列。具体示例图见图 1.3。

图 1.3 男性、女性、幼儿体内含水量对比图 1.3.4 地域空间可视化地域空间可视化通常用于我们要可视化的数据种类和地域有所关联的情况，这时我们用地图做背景，用户可通过宏观地理位置快速看出某一地图的数据情况。全国降水分布图就是地域空间可视化的一种方法体现，具体示例图见图 1.4。 1.3.5 概念可视化图 1.4 中国年降水表在遇到一些不是很直观的指标数据的值时，我们可以通过转换的方式，化抽象数据为直观数据，这样普通用户会更容易理解图形表达的意义。如果只是描述一年内某地用 4

资料库

基于React+Echarts搭建数据可视化系统.doc

相关推荐

课程资源

热门标签

最新资料