基于ECharts的大数据可视化案例-----中国地区疫情数据分析与实现

最新推荐文章于 2024-04-22 15:27:06 发布

置顶

Miracle丶Krystal1

最新推荐文章于 2024-04-22 15:27:06 发布

阅读量1.6w

点赞数 23

文章标签： js 可视化 echarts 数据可视化

本文链接：https://blog.csdn.net/weixin_45362837/article/details/117386373

版权

该项目利用ECharts库创建了中国疫情的可视化大屏，包括数据总览、疫情地图和累计趋势图。通过jQuery的Ajax请求获取并处理腾讯新闻的数据，实现了动态更新。项目在gitee上已开源，提供了全国累计趋势、中国疫情地图和数据总览等多个图表的详细实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

**1.工具介绍

**
本次案例需要的工具（包括但不限于）：vscode(代码编辑器)，node.js（各类插件下载工具），china.js,echarts.min.js,juquery.min.js等（JavaScript相关的.js官方插件），IDEA（所有的代码都可以在这里写）
涉及到的语言等技术：html5+css+JavaScript ajax轮询请求
项目发布工具：gitee代码托管（静态页面）

项目已经托管在gitee：[http://krystaljungen.gitee.io/my-krystal2/]，欢迎访问！！！

2.项目成品展示与项目布局

该项目使用了ECharts多个图表实现对新冠疫情中国地区的分析与展示，使用可视化大屏的方式展现：

如图，项目布局如下：
页面布局

**3.实现

ide项目结构如下：
项目结构图

**
3.1 项目插件引入
本项目需要引入JQuery、ECharts的支持。所有插件可以均可以在官网找到。这里给出ECharts的插件网址：ECharts教程，读者可以花费稍短的时间即可快速入门。
本项目引入的插件如下：

<script src="./js/echarts.min.js"></script>
		<script src="./js/china.js"></script>
		<script src="./js/jquery.min.js"></script>
		<script src="./js/index.js"></script>

其中，index.js为整个html文件的js部分，所以直接引入即可。

3.2 中国数据总览的实现
效果图如下：
2021.5.29中国疫情数
html代码：

<div id="center1">			
			<div class="item">
				<div class="number" id="confirm">123</div>
				<div class="text">累计确诊</div>
			</div>
			<div class="item">
				<div class="number" id="heal">123</div>
				<div class="text">累计治愈</div>
			</div>
			<div class="item">
				<div class="number" id="dead">123</div>
				<div class="text">累计死亡</div>
			</div>

最低0.47元/天解锁文章