没有合适的资源?快使用搜索试试~ 我知道了~
首页基于React+Echarts搭建数据可视化系统.doc
基于React+Echarts搭建数据可视化系统.doc
5星 · 超过95%的资源 需积分: 42 31 下载量 173 浏览量
更新于2023-03-03
评论 1
收藏 3.91MB DOC 举报
,本文就数据可视化的国内外现状、发展前景以及数据可视化的底层原理、流行可视化类库以及本疫情可视化系统实现具备的理论基础进行了全方位分析。然后结合系统的Web前端需求、系统功能需求等进行了需求分析。 项目实现基于React框架,数据可视化部分使用Echarts实现
资源详情
资源评论
资源推荐
基于 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 面积或尺寸可视化.................................................................3
1.3.2 颜色可视化..........................................................................3
1.3.3 图形可视化..........................................................................4
1.3.4 地域空间可视化....................................................................4
1.3.5 概念可视化..........................................................................5
1.4 研究内容......................................................................................5
1.5 研究意义......................................................................................6
2 系统技术分析7
2.1 计算模型分析................................................................................7
2.2 可视化技术...................................................................................7
2.2.1 可视化技术分析....................................................................7
2.2.2 可视化类库..........................................................................8
2.3 前端技术选型................................................................................9
2.4 本系统应用架构分析.....................................................................13
2.5 本章小结....................................................................................14
3 需求分析 15
3.1 需求分析概述..............................................................................15
3.2 系统目标....................................................................................15
3.3 系统功能需求..............................................................................16
3.4 系统性能需求..............................................................................18
3.5 系统界面需求..............................................................................19
3.6 本章小结....................................................................................19
4 系统设计与实现 20
II
4.1 平台技术架构..............................................................................20
4.2 系统详细设计..............................................................................20
4.2.1 系统数据获取.....................................................................20
4.2.2 系统组件设计.....................................................................21
4.3 系统实现....................................................................................24
4.3.1 环境搭建...........................................................................24
4.3.2 系统自适应布局实现............................................................26
4.3.3 地图组件的具体实现............................................................27
4.3.4 折线图组件的具体实现.........................................................30
4.3.5 饼状图组件的具体实现.........................................................32
4.3.6 疫情最新消息组件和辟谣信息组件的具体实现.........................33
4.3.7 系统主页的具体实现............................................................35
4.4 本章小结....................................................................................40
5 系统测试 41
5.1 测试方法概述..............................................................................41
5.2 系统测试....................................................................................42
5.2.1 需求测试...........................................................................42
5.2.2 功能测试...........................................................................42
5.3 系统测试分析..............................................................................49
结 论 50
1
绪
论
1.1 研究背景
21世纪,数据即“原油”,我们生活的每一天都在创造广量的数据。据官方相关资料
显示,互联网络上的数据每年将上升百分之五十,每两年则翻一倍
Error: Reference source not
found
。如何从广量的数据中挖掘出有效的价值并且直观的呈现给用户变得至关重要。大
数据的战略意义不在于手握庞大的数据库,而是对数据的专业化处理能力。换句话说,
数据的加工是大数据产业实现盈利的关键
可视化利用人脑智能和人眼感知能力,可视化的表达数据,增强了数据的可读性,
它化广量的数据为便于为人眼感知的图表、颜色等,将复杂的海量的数据转换为易于
理解、易于解释的视觉表达。通过数据可视化人们可以快速理解内容、发现数据背后
隐藏的规律。设计良好的可视化内容可以直观展示纷繁复杂的数据,并将数据背后隐
藏的规律变得清晰明了。可以说,数据可视化对提高人脑分析效率有不可替代的效用。
在这个数据已经成为基本生产资料的时代,可视化愈发体现出了它不可替代的价值。
2020年初的新冠疫情牵动人心,而疫情信息隐藏在繁杂的数据中,如何能让人们
直观的看到疫情现状,如何直观反映疫情各省市确诊情况,分析疫情高风险城市,让
公众掌握全国范围内疫情情况和发展趋势,达到指导出行、科学疫情防控的目的,成
为现阶段研究的重点问题。数据可视化为挖掘疫情数据背后的价值,分析疫情数据所
蕴含的意义提供了有效途径。本文将围绕着疫情数据的可视化展开探索。
1.2 国内外研究现状
1.2.1 国外研究现状
可视化的研究最早可以追溯到 18 世纪英国和法国的统计学家,美国是现代可视化
研究的起源点以及最大的技术掌握国家,其研究广度和深度均为世界第一
Error: Reference source
not found
。
1990 年,电气电子工程师学会举办了首届 IEEE Visualization Conference,
来自包括计算机、图形学等多个交叉学科领域的学者,对数据可视化研究的前景及技
术做出讨论。依托于国外互联网技术的快速发展,对可视化技术的研究已经逐步成熟
并覆盖到气象学、地理学等领域。
国外许多互联网公司,如微软、Uber 等均对数据可视化做出良好应用,比如:
微软公司的 DataShot 项目,该项目通过分析原始数据海报的组成部分,对数据中
可能产生的规律建立模型。该项目通过决策树的相关设计,挖掘数据背后的规律并将
其可视化,然后布局到海报上。
Uber 公司利用大数据系统捕捉乘客一天内的行程曲线,并在地图上绘制一条从起
点到终点的行程图,对充分洞察客户的出行习惯有极大帮助。
1.2.2 国内研究现状
国内的数据可视化研究起步于 2008 年,学术界开始重点关注可视化研究,并建立
专门的可视化研究团队。国内举办的可视化年会已经成为世界著名的可视化领域的学
术会议,学术界众多可视化研究学者更是在国际核心期刊上发表论文,成果显著。
在可视化应用上,国内的优秀互联网公司,如百度、阿里、帆软均有优秀范例,
比如:
百度开源的商业级数据图表 Echarts,发布半年内被评为“2013 年国产开源软件 10
大年度热门项目”并迅速成为热门的可视化技术,目前已经是国内中小型互联网公司做
可视化的主选框架之一。
帆软公司的 FineBI,新一代大数据分析的商业智能产品,提供从数据准备、自助
数据处理、数据分析与挖掘、数据可视化于一体的完整解决方案,是业界比较推崇的
可视化工具之一。
1.3 研究方法
数据可视化是关于数据之视觉表现形式的科学研究
Error: Reference source not found
。
由于数据挖掘的角度不同,数据所能传达的信息也不同。一般会根据数据涵盖的
信息特点,选择不同的可视化方法。特定场景下可视化方法的使用并不局限于一种,
在实际应用中一般会混合使用这几种可视化方法,特别是在做一些复杂图形和多维度
数据可视化时。下面将列举常见的五种数据可视化方法及优秀范例。
2
剩余53页未读,继续阅读
beans9
- 粉丝: 29
- 资源: 52
上传资源 快速赚钱
- 我的内容管理 收起
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
会员权益专享
最新资源
- 2022年中国足球球迷营销价值报告.pdf
- 房地产培训 -营销总每天在干嘛.pptx
- 黄色简约实用介绍_汇报PPT模板.pptx
- 嵌入式系统原理及应用:第三章 ARM编程简介_3.pdf
- 多媒体应用系统.pptx
- 黄灰配色简约设计精美大气商务汇报PPT模板.pptx
- 用matlab绘制差分方程Z变换-反变换-zplane-residuez-tf2zp-zp2tf-tf2sos-sos2tf-幅相频谱等等.docx
- 网络营销策略-网络营销团队的建立.docx
- 电子商务示范企业申请报告.doc
- 淡雅灰低面风背景完整框架创业商业计划书PPT模板.pptx
- 计算模型与算法技术:10-Iterative Improvement.ppt
- 计算模型与算法技术:9-Greedy Technique.ppt
- 计算模型与算法技术:6-Transform-and-Conquer.ppt
- 云服务安全风险分析研究.pdf
- 软件工程笔记(完整版).doc
- 电子商务网项目实例规划书.doc
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论1