数据分析毕业设计基于大数据的全国疫情实时监控大屏系统

最新推荐文章于 2024-11-03 20:27:08 发布

A毕设分享家

最新推荐文章于 2024-11-03 20:27:08 发布

阅读量89

点赞数

文章标签： python

本文链接：https://blog.csdn.net/mabile123444/article/details/133610793

版权

# 0 前言

Hi，大家好，今天给大家介绍一个大数据可视化项目，大家可以用于自己的课设或毕设，可以灵活耦合任意数据，为自己的项目添加灵活的可视化动态效果！

今天要分享的是：

包含内容：

完整可视化实现源码
html一键入口(双击直接启动)

项目获取：https://gitee.com/sinonfin/system-sharing

1 介绍

大数据大屏可视化系列：
可搭载任意自己想用的数据，动态效果不错

2 实现效果

整体实现效果如下，可以看到CSS优化相对漂亮的，而且动态效果也很好，适合搭载各种数据。

在这里插入图片描述

3 部分代码展示

<!-- 声明文档类型 -->
<!DOCTYPE html>
<html lang="en">

<head>

    <!-- 指定网页字符编码 -->
    <meta charset="UTF-8">
    <!-- 适配移动端 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="refresh" content="15>
    <title>全国疫情实时监控</title>
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div id="title">全国疫情实时监控</div>
    <div id="left1">
    </div>
    <div id="left2">
    </div>
    <div id="center1">
        <div class="item">
            <div class="number" id="confirm"></div>
            <div class="text">累计确诊</div>
        </div>
        <div class="item">
            <div class="number" id="heal"></div>
            <div class="text">累计治愈</div>
        </div>
        <div class="item">
            <div class="number" id="dead"></div>
            <div class="text">累计死亡</div>
        </div>
        <div class="item">
            <div class="number" id="nowConfirm"></div>
            <div class="text">现有确诊</div>
        </div>
        <div class="item">
            <div class="number" id="noInfect"></div>
            <div class="text">无症状感染者</div>
        </div>
        <div class="item">
            <div class="number" id="importedCase"></div>
            <div class="text">境外输入</div>
        </div>
    </div>
    <div id="center2">
    </div>
    <div id="right1"></div>
    <div id="right2"></div>
    <script src="js/data.js"></script>
    <script src="js/center1.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/china.js"></script>
    <script src="js/center2.js"></script>
    <script src="js/left1.js"></script>
    <script src="js/left2.js"></script>
    <script src="js/right1.js"></script>
    <script src="js/right2.js"></script>
</body>

</html>