admin管理员组文章数量:1530517
前言
先放上成果：全球疫情地图在线地址
在学了Echarts之后，也在看到官网上有很多包括地图的实例，于是想着如何创建一个能够动态更新的疫情地图，鉴于国内疫情情势总体向好，而全球的疫情并不乐观的情况下，便制作了全球的疫情地图，这篇博客的教程也是基于上一篇的Echarts学习。
所需基础知识
- html、css、js
- ajax
- JQuery
- Echarts
总体界面设计
首先便是将页面搭建起来啦，这里我选择展示的数据分别是疫情地图（中心位置），各国确诊人数饼状图（仿人民日报类型，右边位置），全球疫情趋势（左下角）以及各大洲疫情状况（左上角），这里页面设计是基于b站Echarts学习的页面设计改动的，剔除了两三个图表
- 创建对应文件夹，用来存放静态资源
- 设计地图界面，这里采用3 6 3的flex布局
- 页面代码书写
- css样式书写
- 右上角实时时间代码书写
html页面的代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>全球疫情地图</title>
<!-- <link rel="stylesheet" href="Bootstrap/css/bootstrap.min.css"> -->
<!-- <script src="Bootstrap/js/bootstrap.min.js"></script> -->
<script src="js/echarts.min.js"></script>
<script src="js/jquery.js"></script>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<header>
<h1> 全球疫情地图 </h1>
<div class="showTime"></div>
<div class="index"><a href="https://pigs_on_the_horizon.gitee.io/">首页</a></div>
</header>
<section class="mainbox">
<!-- 左 -->
<div class="column">
<div class="panel bl bar">
<h2>各洲累计确诊分布（海外）</h2>
<div class="chart"></div>
<div class="panelFooter"></div>
</div>
<div class="panel bl line">
<h2>全球疫情趋势（海外）</h2>
<div class="chart"></div>
<div class="panelFooter"></div>
</div>
</div>
<!-- 中 -->
<div class="column">
<!-- 上模块 -->
<div class="no">
<div class="no-hd">
<ul>
<li></li>
<li></li>
</ul>
</div>
<div class="no-bd">
<ul>
<li>累计确诊人数</li>
<li>累计治愈人数</li>
</ul>
</div>
</div>
<!-- 地图模块 -->
<div class="map">
<div class="map1"></div>
<div class="map2"></div>
<div class="map3"></div>
<div class="chart" id="viewDiv"></div>
<div class="panelFooter"></div>
</div>
</div>
<!-- 右 -->
<div class="column">
<div class="panel bl bar1">
<h2>世界疫情确诊情况前十五</h2>
<div class="chart"></div>
<div class="panelFooter"></div>
</div>
</div>
<div class="data">数据来源于腾讯，每小时更新一次</div>
</section>
</body>
</html>
css样式代码如下（详细的样式代码说明可以参照另外一篇博客Echarts）
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
}
/* 声明字体*/
@font-face {
font-family: electronicFont;
src: url(../font/DS-DIGIT.TTF);
}
body {
/* 覆盖整个页面 */
background-size: cover;
margin: 0;
padding: 0;
background-color: rgba(21, 25, 101);
}
header {
position: relative;
background: url('../images/head_bg.png') no-repeat top center;
height: 1.25rem;
/*
版权声明：本文标题：基于ECharts和腾讯疫情数据接口的全球疫情地图（超全） 内容由热心网友自发贡献，该文观点仅代表作者本人，
转载请联系作者并注明出处：https://m.elefans.com/dongtai/1724850244a993785.html，
本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论