|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
<title>疫情数据展示</title>
|
|
|
<!-- 引入 echarts.js -->
|
|
|
<!-- 这里是加载刚下好的echarts.min.js，注意路径 -->
|
|
|
<script src="{{url_for('static', filename='echarts.js') }}"></script>
|
|
|
<script src="{{url_for('static', filename='jquery-3.5.1.min.js')}}"></script>
|
|
|
</head>
|
|
|
<body>
|
|
|
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
|
|
|
<h1 style="text-align:center;background-color: cadetblue;">
|
|
|
<font face="微软雅黑" size=6>疫情数据展示</font>
|
|
|
</h1>
|
|
|
|
|
|
<div id="main1" style="width: 1300px;height:600px;"></div>
|
|
|
<div id="main2" style="width: 1300px;height:600px;"></div>
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
var myChart = echarts.init(document.getElementById('main1'));
|
|
|
|
|
|
var option={
|
|
|
//backgroundColor: '#2c343c',
|
|
|
title: {
|
|
|
show:true,
|
|
|
text: '国内各省份现存确诊病例数Top5',
|
|
|
subtext: '',
|
|
|
left: 'center',
|
|
|
textStyle:{
|
|
|
color:"rgba(0, 0, 0)",
|
|
|
fontSize:20,
|
|
|
align:"center"
|
|
|
}
|
|
|
},
|
|
|
textStyle: {color: '#2c343c'},
|
|
|
tooltip: {
|
|
|
trigger: 'item',
|
|
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
|
|
},
|
|
|
legend: {
|
|
|
type: 'scroll',
|
|
|
orient: 'vertical',
|
|
|
right: 100,
|
|
|
top: 100,
|
|
|
bottom: 20,
|
|
|
data: []
|
|
|
},
|
|
|
series : [
|
|
|
{
|
|
|
name: '省份',
|
|
|
type: 'pie',
|
|
|
radius: '55%',
|
|
|
center: ['50%', '50%'],
|
|
|
data:[],
|
|
|
emphasis: {
|
|
|
itemStyle: {
|
|
|
shadowBlur: 10,
|
|
|
shadowOffsetX: 0,
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
},
|
|
|
label: {
|
|
|
show: true,
|
|
|
fontSize: '30',
|
|
|
fontWeight: 'bold'
|
|
|
}
|
|
|
},
|
|
|
labelLine: {
|
|
|
normal: {
|
|
|
lineStyle: {
|
|
|
color: 'rgba(0, 0, 0, 0.4)'
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
|
|
|
// 查询省份数据'query_province_datas'
|
|
|
$.ajax({
|
|
|
cache: false,
|
|
|
type: "POST",
|
|
|
url: "/query_province_datas",
|
|
|
data: null,
|
|
|
dataType : "json",
|
|
|
async: false,
|
|
|
error: function(request) {
|
|
|
alert("发送请求失败！");
|
|
|
},
|
|
|
success: function(result) {
|
|
|
for(i=0, max=result.areas.length; i<max; ++i) {
|
|
|
option.series[0].data.push({value:result.curconfirms[i], name:result.areas[i]})
|
|
|
option.legend.data.push(result.areas[i])
|
|
|
}
|
|
|
option.title.subtext = '数据更新时间：' + result.pub_date
|
|
|
}
|
|
|
});
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
|
myChart.setOption(option);
|
|
|
</script>
|
|
|
<script type="text/javascript">
|
|
|
// 基于准备好的dom，初始化echarts实例
|
|
|
var myChart = echarts.init(document.getElementById('main2'));
|
|
|
var option={
|
|
|
title: {
|
|
|
show:true,
|
|
|
text: '国内Top20省份境外输入病例数情况',
|
|
|
subtext: '',
|
|
|
left: 'center',
|
|
|
textStyle:{
|
|
|
color:"rgba(0, 0, 0)",
|
|
|
fontSize:20,
|
|
|
align:"center"
|
|
|
}
|
|
|
},
|
|
|
legend: {
|
|
|
data: ['累计境外输入病例数', '现有境外输入确诊病例数'],
|
|
|
left: 10
|
|
|
},
|
|
|
brush: {
|
|
|
toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
|
|
|
xAxisIndex: 0
|
|
|
},
|
|
|
toolbox: {
|
|
|
feature: {
|
|
|
magicType: {
|
|
|
type: ['stack', 'tiled']
|
|
|
},
|
|
|
dataView: {}
|
|
|
}
|
|
|
},
|
|
|
tooltip: {},
|
|
|
xAxis: {
|
|
|
data: [],
|
|
|
name: '省份',
|
|
|
axisLine: {onZero: true},
|
|
|
splitLine: {show: false},
|
|
|
splitArea: {show: false}
|
|
|
},
|
|
|
yAxis: {
|
|
|
inverse: true,
|
|
|
splitArea: {show: false}
|
|
|
},
|
|
|
grid: {
|
|
|
left: 100
|
|
|
},
|
|
|
visualMap: {
|
|
|
type: 'continuous',
|
|
|
dimension: 1,
|
|
|
text: ['High', 'Low'],
|
|
|
inverse: true,
|
|
|
itemHeight: 200,
|
|
|
calculable: true,
|
|
|
min: -2,
|
|
|
max: 6,
|
|
|
top: 60,
|
|
|
left: 10,
|
|
|
inRange: {
|
|
|
colorLightness: [0.4, 0.8]
|
|
|
},
|
|
|
outOfRange: {
|
|
|
color: '#bbb'
|
|
|
},
|
|
|
controller: {
|
|
|
inRange: {
|
|
|
color: '#2f4554'
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: '累计境外输入确诊',
|
|
|
type: 'bar',
|
|
|
stack: 'one',
|
|
|
center: ['50%', '50%'],
|
|
|
emphasis: {
|
|
|
itemStyle: {
|
|
|
barBorderWidth: 1,
|
|
|
shadowBlur: 10,
|
|
|
shadowOffsetX: 0,
|
|
|
shadowOffsetY: 0,
|
|
|
shadowColor: 'rgba(0,0,0,0.5)'
|
|
|
}
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {color: 'rgba(208, 72, 68)'}
|
|
|
},
|
|
|
data: []
|
|
|
},
|
|
|
{
|
|
|
name: '现有境外输入确诊',
|
|
|
type: 'bar',
|
|
|
stack: 'one',
|
|
|
emphasis: {
|
|
|
itemStyle: {
|
|
|
barBorderWidth: 1,
|
|
|
shadowBlur: 10,
|
|
|
shadowOffsetX: 0,
|
|
|
shadowOffsetY: 0,
|
|
|
shadowColor: 'rgba(0,0,0,0.5)'
|
|
|
}
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {color: 'rgba(84, 123, 150)'}
|
|
|
},
|
|
|
data: []
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
$.ajax({
|
|
|
cache: false,
|
|
|
type: "POST",
|
|
|
url: "/query_province_import_datas",
|
|
|
data: null,
|
|
|
dataType : "json",
|
|
|
async: false,
|
|
|
error: function(request) {
|
|
|
alert("发送请求失败！");
|
|
|
},
|
|
|
success: function(result) {
|
|
|
console.info(result)
|
|
|
for (i=0, max=result.provinces.length; i<max; ++i) {
|
|
|
option.xAxis.data.push(result.provinces[i])
|
|
|
option.series[0].data.push(result.confirmed[i])
|
|
|
option.series[1].data.push(result.curconfirms[i])
|
|
|
}
|
|
|
option.title.subtext = '数据更新时间：' + result.pub_date
|
|
|
}
|
|
|
});
|
|
|
myChart.setOption(option);
|
|
|
</script>
|
|
|
</body> |
