Echarts实现带时间轴的疫情地图

最新推荐文章于 2023-11-09 16:59:20 发布

灯灯登登

最新推荐文章于 2023-11-09 16:59:20 发布

阅读量5.2k

点赞数 3

分类专栏：大前端文章标签：可视化 javascript

本文链接：https://blog.youkuaiyun.com/qq_38507937/article/details/104278672

版权

效果图如下:

效果图
实现了一个小小的demo，来对麻城市发病的人的地理位置、和对应时间进行显示。实现地图的加载时，为了方便，数据和代码我都直接放在服务器的环境下运行了。利用ajax对数据进行请求，每天的患者数据都是一个json文件，利用ajax就可以轻松实现数据读取(我这里是用同步的方式进行加载)，然后就可以在js中利用Echarts加载了~

数据全都放在一个文件夹中：
在这里插入图片描述
里面的数据长这样，只需要对应的经纬度就行了。如果需要做比较复杂的功能还是建议存储到数据库中再写后台代码来进行获取，我这里做得比较简单~

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./echarts.min.js"></script>
		<script src="./jquery.min.js"></script>
		<style>
			html,body {
    
				margin: 0;
				height: 100%;
				width: 100%;
			}
			#main {
    
				height: 100%;
				width: 100%;
			}
		</style>
	</head>
	<body>
		<div id="main"></div>
		<script>
		    var myChart = echarts.init(document.getElementById('main'));
			myChart.showLoading();
			//添加不同时间数据
			var index=14;
			var allpos=[];
			var timeline_data=[];
			var time_data=[];
			var town = [
							{
    name:'鼓楼街道'