Python+Flask实现全国、全球疫情大数据可视化（二）：网页页面布局+echarts可视化中国地图、世界地图、柱状图和折线图
文章目录
- 相关文章
- 一、实现效果
- 二、页面布局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
"en">
"UTF-8">
疫情追踪
"stylesheet" href="../static/css/main.css" rel="stylesheet">
"title">全国疫情大数据可视化
"time">我是时间
"l1">我是左1
"l2">我是左2
"c1">
"num">123
"num">123
"num">123
"num">123
"txt">累计确诊
"txt">累计治愈
"txt">累计死亡
"txt">新增死亡
"c2">我是中2
"r1">我是右1
"r2">我是右2
页面开头的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+'
'+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完整项目源码
