文章目录

- 相关文章
一、实现效果
二、页面布局html+css
- main.html
- main.css
三、echarts图表制作
- 1、全国累计趋势折线图ec_l1.js
- 2、全国趋势变化折线图ec_l2.js
- 3、中国疫情地图ec_c2.js
- 4、非湖北地区确诊top5柱状图ec_r1.js
- 5、世界疫情地图ec_l2.js
四、完整项目获取

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完整项目源码

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

HTML + Python + Django + 爬虫 + Pyecharts 实现疫情大数据可视化实时动态展示
说明:博主从GitHub上拉去了一个开源项目,这个项目还存在很多问题,比如大数据加载卡顿,celery任务为定时爬虫获取最新数据,而前端页面没有检测数据有更新或者同步celery定时刷新服务,部分疫情 ...
【免费开源】2020年独家全球疫情大数据接口（实时获取）
武汉加油,中国加油!!!为了做点贡献,特此免费开源接口,供大家在各平台使用. 数据来自官方通报, 全国与各省通报数据可能存在差异.请勿滥用,后果自负. 一. 接口: https://www.maomi ...
【2019全国职业技能大赛大数据技术】任务四：14-数据可视化（20分_题目+答案＜图片+分值＞）
[任务说明] 任务四 : 数据可视化 (20 分 ) 本任务中所需要的原始数据四存放于任务四 MySQL 的的 project_hotels 数据库和计算机桌面/H3CU_hotel/d ...
Python+Flask+爬虫双色球数据采集及大数据可视化平台
文件大小:68M 开发环境:Python3.8.MySQL8.0.火狐浏览器点击下载:点击下载简要概述:项目主要构成有数据爬虫.数据可视化.数据管理.数据预测四大部分,爬虫爬取数据,可视化进行分析 ...
python实现柱状图和折线图组合图（通过读取文件实现）
前言相信很多初学python可视化小伙伴会有这样的疑问,怎么画柱状图和折线图的组合图呢?自己会画柱状图.折线图,但是怎么画在一起呢?其实啊,这也不难,下面给大家演示一波. 目录前言一.数据源(数 ...
使用POI实现读取Excel数据并生成柱状图、折线图、饼状图的工具类
最近有一个需求是要通过程序自动根据excel中的数据来动态生成相应的图表.其中就有柱状图,折线图,饼状图.但是没想到用wps生成非常的简单,一点就可以生成,使用POI生成的过程非常的难受.不得不将这次 ...
java使用poi在word中生成柱状图、折线图、饼图、柱状图+折线图组合图、动态表格、文本替换、图片替换、更新内置Excel数据、更新插入的文本框内容、合并表格单元格；
本文参考地址:https://blog.csdn.net/wangxiaoyingWXY/article/details/95377533 在参考文章的基础上,增加了扩展.感谢被参考的妹子.另外该博客 ...
Python数据分析：实时更新全国全球疫情分析
实时更新全国全球疫情分析简介步骤流程准备数据集(获取数据集) 国内数据集国外数据集国内分析生成网页版国外分析生成网页版后记简介运用到Python爬虫request库,Excel ...
2018年全国高校教师“Python编程、应用及华为大数据”培训班
关于举办2018年全国中高等院校教师 "Python编程.应用及华为大数据"培训班通知全国各中高等院校计算机.软件等相关院(系): Python是一门免费.开源的跨平台高级动态编 ...

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