基于ECharts和腾讯疫情数据接口的全球疫情地图（超全）

最新推荐文章于 2024-09-09 14:52:02 发布

天际线上的猪

最新推荐文章于 2024-09-09 14:52:02 发布

阅读量1.4w

点赞数 58

分类专栏：前端文章标签：腾讯 echarts 数据可视化

本文链接：https://blog.csdn.net/qq_44573890/article/details/115029013

版权

本文介绍了如何使用ECharts结合腾讯疫情数据接口，创建一个实时更新的全球疫情地图。教程涵盖页面布局、数据获取与处理、ECharts图表应用，包括南丁格尔玫瑰图、折线图、地图模块等。通过这个项目，作者复习了html、css、js等基础知识，以及数据处理和ECharts使用技巧。

摘要由CSDN通过智能技术生成

前言

先放上成果：全球疫情地图在线地址

在学了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;
    /* 🔺缩放比例 100% */
    background-size: 100% 100%;
}

header h1 {
   
    color: white;
    font-size: 0.475rem;
    /* 文字居中 */
    text-align: center;
    line-height: 1.0rem;
}

.showTime {
   
    position: absolute;
    top: 0;
    right: 0.375rem;
    text-align: center;
    line-height: 0.9375rem;
    color

最低0.47元/天解锁文章