Python+Flask实现全国、全球疫情大数据可视化（二）：网页页面布局+echarts可视化中国地图、世界地图、柱状图和折线图

最新推荐文章于 2024-07-02 00:38:01 发布
最新推荐文章于 2024-07-02 00:38:01 发布
阅读量1.1w 收藏 86
点赞数 7
分类专栏： Python web python数据可视化 文章标签： 数据可视化 css echarts flask
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Demonslzh/article/details/106988293
版权

文章目录

相关文章

Python+Flask实现全国、全球疫情大数据可视化（一）：爬取疫情数据并保存至mysql数据库
Python+Flask实现全国、全球疫情大数据可视化（三）：ajax读取mysql中的数据并将参数传递至echarts表格中

一、实现效果

最近简单学习了一下flask，决定来做一个疫情大数据的网页出来。
话不多说先上效果图。还是比较喜欢这样的排版的。
在这里插入图片描述

二、页面布局html+css

页面布局。在此之前需要新建一个flask项目。在项目的static中新建css与js文件目录方便我们存放对应文件。
在这里插入图片描述
在项目的template中存放我们的html文件
这个页面布局主要分为左、中、三个部分。每个部分又分为两部分。先按照这个思路写出html和css.

main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>疫情追踪</title>
    <script src="../static/js/jquery.min.js"></script>
    <script type="text/javascript" src="../static/js/echarts-all-3.js"></script>
    <script src="../static/js/echarts.min.js"></script>
    <script src="../static/js/china.js"></script>
    <script src="../static/js/world.js"></script>
    <link rel="stylesheet" href="../static/css/main.css" rel="stylesheet">
</head>
<body>
    <div id="title">全国疫情大数据可视化</div>
    <div id="time">我是时间</div>
    <div id="l1">我是左1</div>
    <div id="l2">我是左2</div>
    <div id="c1">
        <div class="num"><h1>123</h1></div>
        <div class="num"><h1>123</h1></div>
        <div class="num"><h1>123</h1></div>
        <div class="num"><h1>123</h1></div>
        <div class="txt"><h2>累计确诊</h2></div>
        <div class="txt"><h2>累计治愈</h2></div>
        <div class="txt"><h2>累计死亡</h2></div>
        <div class="txt"><h2>新增死亡</h2></div>

    </div>
    <div id="c2">我是中2</div>
    <div id="r1">我是右1</div>
    <div id="r2">我是右2</div>
    <script src="../static/js/ec_c2.js"></script>
    <script src="../static/js/controller.js"></script>
    <script src="../static/js/ec_l1.js"></script>
    <script src="../static/js/ec_l2.js"></script>
    <script src="../static/js/ec_r1.js"></script>
    <script src="../static/js/ec_r2.js"></script>
</body>
</html>

页面开头的js是需要提前下载准备好的。末尾的6个js的是我们后续需要实现的内容。
接着编写css

main.css

body{
    margin: 0;
    background: #333;
}
#title{
    position: absolute;
    width: 40%;
    height: 10%;
    top: 0;
    left: 30%;
    background: #333333;
    color: white;
    font-size: 30px;
    /*居中分布*/
    display: flex;
    align-items: center;
    justify-content: center;
}
#time{
    position: absolute;
    color: white;
    width: 30%;
    height: 10%;
    top: 0;
    right: 0;
}

/*数字显示*/
.num{
    width: 25%;
    float: left;
    color: gold;
    font-size: 20px;
    /*居中分布*/
    display: flex;
    align-items: center;
    justify-content: center;
}

.txt{
    width: 25%;
    float: left;
    color: white;
    font-family: "幼圆";
    /*居中分布*/
    display: flex;
    align-items: center;
    justify-content: center;
}
#l1{
    position: absolute;
    width: 30%;
    height: 45%;
    top: 10%;
    left: 0%;
    background: #123456;
}
#l2{
    position: absolute;
    width: 30%;
    height: 45%;
    top: 55%;
    left: 0%;
    background: #234567;
}
#c1{
    position: absolute;
    width: 40%;
    height: 30%;
    top: 10%;
    left: 30%;
    background: #333333;
}
#c2{
    position: absolute;
    width: 40%;
    height: 60%;
    top: 40%;
    left: 30%;
    background: #888888;
}
#r1{
    position: absolute;
    width: 30%;
    height: 45%;
    top: 10%;
    right: 0%;
    background: #666666;
}
#r2{
    position: absolute;
    width: 30%;
    height: 45%;
    top: 55%;
    right: 0%;
    background: #666666;
}

三、echarts图表制作

这些js中的数据基本从echarts官网给出的实例复制下来。后面再往其中传递我们自己的参数

1、全国累计趋势折线图ec_l1.js

var ec_left1=echarts.init(document.getElementById("l1"),"dark")


var ec_left1_option = {
    textStyle:{
        color:'white'
    },
    title: {
        text: '全国累计趋势',
        left: "auto"
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['累计确诊', '累计治愈', '累计死亡']

    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '累计确诊',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '累计治愈',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '累计死亡',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410]
        },


    ]
};
ec_left1.setOption(ec_left1_option)

2、全国趋势变化折线图ec_l2.js

var ec_left2=echarts.init(document.getElementById("l2"),"dark")

var ec_left2_option = {
  textStyle:{
        color:'white'
    },
    title: {
        text: '全国新增趋势',
        left: "auto"
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['新增确诊', '新增治愈', '新增死亡']

    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '新增确诊',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '新增治愈',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '新增死亡',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410]
        },


    ]
};
ec_left2.setOption(ec_left2_option)

3、中国疫情地图ec_c2.js

var ec_center=echarts.init(document.getElementById("c2"),"dark")

var dataList=[{'name':'上海','value':318},{'name':'云南','value':100}]




var ec_center_option = {
            tooltip: {
                    formatter:function(params,ticket, callback){
                        return params.seriesName+'<br />'+params.name+'：'+params.value
                    }
                },
            visualMap: {
                min: 0,
                max: 1500,
                left: 'left',
                top: 'bottom',
                textStyle:{fontsize:8},
                inRange: {
                    color: ['#e0ffff', '#9D3030']
                },
                show:true,
                splitList:[{start:1,end:9},
                    {start:10,end:99},
                    {start:100,end:999},
                    {start:1000,end:9999},
                    {start:10000}]
            },
            geo: {
                map: 'china',
                roam: false,
                zoom:1.23,
                label: {
                    normal: {
                        show: true,
                        fontSize:'10',
                        color: 'rgba(0,0,0,0.7)'
                    }
                },
                itemStyle: {
                    normal:{
                        borderColor: 'rgba(0, 0, 0, 0.2)'
                    },
                    emphasis:{
                        areaColor: '#F3B329',
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowBlur: 20,
                        borderWidth: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            },
            series : [
                {
                    name: '累计确诊',
                    type: 'map',
                    geoIndex: 0,
                    data:dataList
                }
            ]
        };

ec_center.setOption(ec_center_option)

4、非湖北地区确诊top5柱状图ec_r1.js

var ec_right1=echarts.init(document.getElementById("r1"),"dark")

var ec_right1_option = {
    title: {
        text: '非湖北地区确诊人数top5',
        left: "left"
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
        }
    }]
};
ec_right1.setOption(ec_right1_option)

5、世界疫情地图ec_l2.js

var ec_right2=echarts.init(document.getElementById("r2"),"dark")


var ec_right2_dataList=[{name: 'Afghanistan', value: 28397.812},
                {name: 'Angola', value: 19549.124},
                {name: 'Albania', value: 3150.143},
                {name: 'United Arab Emirates', value: 8441.537},
            ]
var ec_right2_option = {
    title: {
        text:"全球疫情大数据可视化",
        left: 'center',
        top: 'top'
    },


    visualMap: {
        show:true,
        min: 0,
        max: 1500,
        left:'left',
        top:'bottom',
        textStyle:{fontsize:5},
        inRange: {
                    color: ['#e0ffff', '#9D3030']
                },
        splitList:[{start:10,end:999},
                    {start:1000,end:9999},
                    {start:10000,end:99999},
                    {start:100000,end:999999},
                    {start:1000000}]

    },

    series: [
        {
            name: 'infections',
            type: 'map',
            mapType: 'world',
            roam: true,
            itemStyle:{
                emphasis:{label:{show:true}}
            },
            data:ec_right2_dataList
        }
    ]
};

ec_right2.setOption(ec_right2_option)

这样的话去运行html会有一个基本的模板出来。

接着我们需要做的就是将数据库中的数据传入echarts中使得这个可视化页面能够最终成型！

四、完整项目获取

关注以下公众号，回复"0007"即可get完整项目源码

在这里插入图片描述

Demonslzh6
关注
专栏目录
python动态展示数据_利用 Flask 动态展示 Pyecharts 图表数据方法小结
weixin_39833270的博客
12-10 1561
本文将介绍如何在 web 框架 flask 中使用可视化工具 pyecharts, 看完本教程你将掌握几种动态展示可视化数据的方法，不会的话你来找我呀...flask 模板渲染1. 新建一个项目 flask-echarts在编辑器中选择 new project，然后选择 flask，创建完之后，pycharm 会帮我们把启动脚本和模板文件夹都建好 2. 拷贝 pyecharts 模板将链接中的以下...
使用Flask制作美观的网页日历
SlaughterDevil的博客
06-04 1176
Calender python的日历模块Calender提供了多种日历展示模式： 参数 说明 示例 setfirstweekday(firstweekday) 0是星期一，…，6为星期日 calendar.setfirstweekday(firstweekday=6) monthcalendar(year, month) 返回一个月中天数列表(不是当前月份的天数为0) cale...
python 疫情数据可视化
12-21
json数据转 csv import json import time import csv file = open('DXYArea-TimeSeries.json','r',encoding='utf-8') infos = json.load(file) with open('data.csv','a',newline='') as f: writer = csv.DictWriter(f,fieldnames=['updateTime','provinceName', 'currentConfirmedCount','confirmedCount',
python+flask计算机毕业设计的校园疫情管理系统（程序+开题+论文）
最新发布
nodejs程序设计老哥
07-02 752
最后，通过持续集成和测试，确保应用的稳定性和可靠性，完成开发后进行部署，使应用可以在服务器上运行并对外提供服务。其次，将设计系统的架构和数据库结构，确保系统的稳定性和可扩展性。在系统设计的基础上，将进行系统的开发与实现，包括前端界面设计、后端逻辑实现、数据库管理等。该系统不仅能够实时监控学生的健康状况和行程轨迹，还能有效管理学生的请假信息，为校园疫情防控提供有力支持。通过该系统，学生可以方便地进行行程上报和健康上报，学校可以实时掌握学生的健康状况和行程轨迹，及时发现潜在风险并采取相应的防控措施。
echarts 大屏模板_用 Python 做一个超全的疫情大屏
weixin_39779467的博客
11-20 472
脚本之家你与百万开发者在一起本文经授权转自公众号 萝卜大杂烩(ID：luobodazahui)如若转载请联系原公众号2020 的开头实在是太烂了，新冠肺炎肆虐神州大地，这场突如其来的灾难影响实在是太大了，全国人民在齐心协力共度难关的同时，也无时无刻不在期盼疫情快点过去。当然我们在隔离办公的同时，每天也都关注着疫情的发展，盼望着“拐点”快点来临，毕竟大家都盼望着外面的新鲜空气呢！这里...
inMap是基于百度地图的大数据可视化库
08-08
inMap是基于百度地图的大数据可视化库。 它着重于散点图，热图，网格和聚合算法。
数据可视化-基于Python+Flask+Echarts实现的疫情数据爬虫+数据可视化.zip
04-03
本项目主要涵盖了使用Python、Flask框架和ECharts库来实现疫情数据的爬取与可视化。这是一项将技术与现实世界问题相结合的实践，旨在帮助我们理解和分析全球或特定地区的疫情发展趋势。以下是对每个关键组件的详细...
Python爬虫+Flask+ECharts 疫情可视化
05-03
在本项目中，“Python爬虫+Flask+ECharts 疫情可视化”是一个结合了多个技术的实战应用，主要用于实时或定期抓取疫情数据并进行可视化展示。下面将详细讲解这个项目涉及的主要知识点： 1. **Python爬虫**：Python...
课程设计基于Python+Flask框架实现的新冠疫情可视化项目源码+疫情数据
12-24
本项目是基于Python和Flask框架构建的新冠疫情可视化系统，旨在提供一个实时更新的全球疫情数据分析平台。通过这个系统，用户可以清晰地看到新冠病毒在全球各地的传播情况，包括累计病例、新增病例、死亡病例和康复...
基于Python+Flask框架实现的新冠疫情可视化的设计与实现.docx
10-25
《基于Python+Flask框架实现的新冠疫情可视化的设计与实现》 本论文主要探讨了如何运用Python编程语言和Flask框架来构建一个新冠疫情数据的可视化系统。该系统旨在为公众提供实时、直观的疫情数据展示，以帮助人们...
基于Python+Flask+Echarts的疫情爬虫;数据可视化项目.zip
09-28
该项目是一个综合运用Python、Flask框架和Echarts库来实现疫情数据爬取及可视化的实践案例。通过这个项目，我们可以深入了解如何将这三个技术相结合，创建一个实时更新的疫情信息系统。 首先，Python是一种广泛应用...
商家信息管理系统模版 DIV+CSS
11-13
商家信息管理系统模版 DIV+CSS 商家信息管理系统模版 DIV+CSS
Python3+flask+mysql+echarts：实现中国地图点击对应的省市链接到该省份的详细数据（2020年2月2日新型冠状病毒肺炎疫情追踪确诊数据）
番茄Salad
02-02 4881
提取码：bbtg😍😍😍。
基于ECharts和腾讯疫情数据接口的全球疫情地图（超全）
热门推荐
qq_44573890的博客
03-20 1万+
前言 在学了Echarts之后，也在看到官网上有很多包括地图的实例，于是想着如何创建一个能够动态更新的疫情地图，鉴于国内疫情情势总体向好，而全球的疫情并不乐观的情况下，便制作了全球的疫情地图，这篇博客的教程也是基于上一篇的Echarts学习。 所需基础知识 html、css、js ajax JQuery Echarts 总体界面设计 首先便是将页面搭建起来啦，这里我选择展示的数据分别是疫情地图（中心位置），各国确诊人数饼状图（仿人民日报类型，右边位置），全球疫情趋势（左下角）以及各大洲疫情状况（左上角
Echars的疫情展示应用(1)---零基础上手
小码农的博客
01-29 1722
JavaWeb-新冠疫情信息数据展示Echars的简单入门使用Echarts中制作饼状图-疫情Echarts中制作柱状图-疫情Echarts中制作折线图-疫情 Echars的简单入门使用 https://echarts.apache.org/examples/zh/index.html 可以上看上面的地址进行学习，基本的教程啊。 不会的5分钟教你上手一波，，一波操作666. 注意： 引入js文件不能少啊。并且要注意顺序，大胸弟。。。 <!-- 1、引入 ECharts 文件 --> <sc
echarts 疫情可视化（大屏显示）
qq_42683219的博客
07-02 1万+
一、效果图 二、制图 ①：数据准备 ②：导入需要的js文件 ③：HTML框架准备 ④：css、js文件引入 ⑤：VUE框架生以及主要函数生成 ①：数据准备 1 ：准备全国省会城市、特别行政区、直辖市坐标数据 2 ：准备全国地图和各省市的json数据用于地图展示和地图下钻 3 ：疫情数据准备 全国疫情数据 全世界疫情前22国家数据 ②：导入需要的js文件 疫情可视化需要echarts.min.js、vue.js、axios.min.js文件 ③：HTML框架准备 ④：css、j
pyecharts实现疫情可视化地图学习笔记
SUOLONG1的博客
05-03 1174
参考 python爬虫之全国疫情数据可视化 利用Python实现新冠疫情数据可视化 python爬虫：新冠疫情累计确诊数据爬取及数据可视化 效果 python代码 from datetime import date import requests from pyecharts import options as opts from pyecharts.charts import Map from pyecharts.globals import ThemeType update_date = date
【26】地图可视化：基于 Echarts + Flask 的动态实时地图组件 - 点&气泡&流向&组合&区域&三级下钻地图
m0_67391121的博客
03-02 2264
目录 一、大屏整体架构?Echarts + Flask + Bootstrap 1. 效果展示 动态效果 ?鼠标右键切换主题 2. 前端布局?Bootstrap 3. HTTP 服务端使用 Flask?架构 二、封装的Echarts地图可视化组件 1. 点式地图 scatter ?echarts 代码 JSON数据格式 2. 点式+气泡组合地图 scatter + effectScatter echarts 代码 JSON数据格式 3. 流向地图 lines echarts 代码 JSON数据格式 4. 流
flask + pyecharts 疫情数据分析 搭建交互式动态可视化新冠肺炎疫情地图（附代码实现）
wx1871428的博客
07-08 971
该项目是浙江大学地理空间数据库课程作业8：空间分析中，使用 flask + pyecharts 搭建的简单新冠肺炎疫情数据可视化交互分析平台的一部分，完整的实现包含疫情数据获取、态势感知、预测分析、舆情监测等任务； 包含完整代码、数据集和实现的github地址： https://github.com/yunwei37/COVID-19-NLP-vis 项目分析报告已部署到网页端，可点击 http://flask.yunwei123.tech/ 进行查看，数据已更新到6.17 最终效果： 动态交互展示
Python+Flask实现的新冠疫情可视化系统设计
"基于Python+Flask框架实现的新冠疫情可视化的设计与实现" 这篇论文详细阐述了如何使用Python编程语言和Flask框架开发一个新冠疫情可视化系统。该系统的主要目标是通过数据挖掘和可视化技术，帮助用户更好地理解和...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Demonslzh6

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值