|
|
@ -4,12 +4,287 @@ |
|
|
|
<meta charset="utf-8"> |
|
|
|
<meta charset="utf-8"> |
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
|
<!--360浏览器优先以webkit内核解析--> |
|
|
|
<!--360浏览器优先以webkit内核解析--> |
|
|
|
<title>若依介绍</title> |
|
|
|
<title>首页</title> |
|
|
|
<link rel="shortcut icon" href="favicon.ico"> |
|
|
|
<link rel="shortcut icon" href="favicon.ico"> |
|
|
|
<link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/> |
|
|
|
<link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/> |
|
|
|
<link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/> |
|
|
|
<link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/> |
|
|
|
<link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/> |
|
|
|
<link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/> |
|
|
|
</head> |
|
|
|
</head> |
|
|
|
|
|
|
|
<body class="gray-bg"> |
|
|
|
|
|
|
|
<div class="row border-bottom white-bg dashboard-header"> |
|
|
|
|
|
|
|
<div class="col-sm-12"> |
|
|
|
|
|
|
|
<p> 病毒无情,人有情! <a href="https://news.sina.cn/zt_d/yiqing0121" target="_blank">了解更多疫情信息</a> |
|
|
|
|
|
|
|
</p> |
|
|
|
|
|
|
|
<p>更多疫情防护小妙招:<a href="https://zhuanlan.zhihu.com/p/568304798" target="_blank">https://zhuanlan.zhihu.com/p/568304798/</a> |
|
|
|
|
|
|
|
</p> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="wrapper wrapper-content animated fadeInRight"> |
|
|
|
|
|
|
|
<div class="row"> |
|
|
|
|
|
|
|
<div class="col-sm-6"> |
|
|
|
|
|
|
|
<div class="ibox float-e-margins"> |
|
|
|
|
|
|
|
<div class="ibox-content"> |
|
|
|
|
|
|
|
<div class="echarts" id="echarts-line-chart"></div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="col-sm-6"> |
|
|
|
|
|
|
|
<div class="ibox float-e-margins"> |
|
|
|
|
|
|
|
<div class="ibox-content"> |
|
|
|
|
|
|
|
<div class="echarts" id="echarts-pie-chart"></div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="col-sm-6"> |
|
|
|
|
|
|
|
<div class="ibox float-e-margins"> |
|
|
|
|
|
|
|
<div class="ibox-content"> |
|
|
|
|
|
|
|
<div class="echarts" id="echarts-bar-chart"></div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="col-sm-6"> |
|
|
|
|
|
|
|
<div class="ibox float-e-margins"> |
|
|
|
|
|
|
|
<div class="ibox-content"> |
|
|
|
|
|
|
|
<div class="echarts" id="echarts-nd-chart"></div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<th:block th:include="include :: footer" /> |
|
|
|
|
|
|
|
<th:block th:include="include :: echarts-js" /> |
|
|
|
|
|
|
|
<script type="text/javascript"> |
|
|
|
|
|
|
|
$(function () { |
|
|
|
|
|
|
|
//线图 |
|
|
|
|
|
|
|
var lineChart = echarts.init(document.getElementById("echarts-line-chart")); |
|
|
|
|
|
|
|
var lineoption = { |
|
|
|
|
|
|
|
title : { |
|
|
|
|
|
|
|
text: '一周内感染人数状态' |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
tooltip : { |
|
|
|
|
|
|
|
trigger: 'axis' |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
legend: { |
|
|
|
|
|
|
|
data:['死亡','健在'] |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
grid:{ |
|
|
|
|
|
|
|
x:40, |
|
|
|
|
|
|
|
x2:40, |
|
|
|
|
|
|
|
y2:24 |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
calculable : true, |
|
|
|
|
|
|
|
xAxis : [ |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
type : 'category', |
|
|
|
|
|
|
|
boundaryGap : false, |
|
|
|
|
|
|
|
data :['周一','周二','周三','周四','周五','周六','周日'] |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
], |
|
|
|
|
|
|
|
yAxis : [ |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
type : 'value', |
|
|
|
|
|
|
|
axisLabel : { |
|
|
|
|
|
|
|
formatter: '{value} °C' |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
], |
|
|
|
|
|
|
|
series : [ |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
name:'死亡', |
|
|
|
|
|
|
|
type:'line', |
|
|
|
|
|
|
|
data:[11, 11, 15, 13, 12, 13, 10], |
|
|
|
|
|
|
|
markPoint : { |
|
|
|
|
|
|
|
data : [ |
|
|
|
|
|
|
|
{type : 'max', name: '最大值'}, |
|
|
|
|
|
|
|
{type : 'min', name: '最小值'} |
|
|
|
|
|
|
|
] |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
markLine : { |
|
|
|
|
|
|
|
data : [ |
|
|
|
|
|
|
|
{type : 'average', name: '平均值'} |
|
|
|
|
|
|
|
] |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
name:'健在', |
|
|
|
|
|
|
|
type:'line', |
|
|
|
|
|
|
|
data:[1, -2, 2, 5, 3, 2, 0], |
|
|
|
|
|
|
|
markPoint : { |
|
|
|
|
|
|
|
data : [ |
|
|
|
|
|
|
|
{name : '周最低', value : -2, xAxis: 1, yAxis: -1.5} |
|
|
|
|
|
|
|
] |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
markLine : { |
|
|
|
|
|
|
|
data: [ |
|
|
|
|
|
|
|
{type: 'average', name: '平均值'} |
|
|
|
|
|
|
|
] |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
] |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
lineChart.setOption(lineoption); |
|
|
|
|
|
|
|
$(window).resize(lineChart.resize); |
|
|
|
|
|
|
|
//饼图 |
|
|
|
|
|
|
|
var pieChart = echarts.init(document.getElementById("echarts-pie-chart")); |
|
|
|
|
|
|
|
var pieoption = { |
|
|
|
|
|
|
|
title : { |
|
|
|
|
|
|
|
text: '患者年龄岁数', |
|
|
|
|
|
|
|
x:'center' |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
tooltip : { |
|
|
|
|
|
|
|
trigger: 'item', |
|
|
|
|
|
|
|
formatter: "{a} <br/>{b} : {c} ({d}%)" |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
legend: { |
|
|
|
|
|
|
|
orient : 'vertical', |
|
|
|
|
|
|
|
x : 'left', |
|
|
|
|
|
|
|
data:['0-10','10-20','20-30','30-40','40-50','50-60','70以上'] |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
calculable : true, |
|
|
|
|
|
|
|
series : [ |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
name:'岁数占比', |
|
|
|
|
|
|
|
type:'pie', |
|
|
|
|
|
|
|
radius : ['30%', '70%'], |
|
|
|
|
|
|
|
center: ['50%', '60%'], |
|
|
|
|
|
|
|
data:[ |
|
|
|
|
|
|
|
{value:335, name:'0-10'}, |
|
|
|
|
|
|
|
{value:310, name:'10-20'}, |
|
|
|
|
|
|
|
{value:234, name:'20-30'}, |
|
|
|
|
|
|
|
{value:135, name:'30-40'}, |
|
|
|
|
|
|
|
{value:1548, name:'40-50'}, |
|
|
|
|
|
|
|
{value:548, name:'50-60'}, |
|
|
|
|
|
|
|
{value:548, name:'70以上'} |
|
|
|
|
|
|
|
] |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
] |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
pieChart.setOption(pieoption); |
|
|
|
|
|
|
|
$(window).resize(pieChart.resize); |
|
|
|
|
|
|
|
//柱状图 |
|
|
|
|
|
|
|
var barChart = echarts.init(document.getElementById("echarts-bar-chart")); |
|
|
|
|
|
|
|
var baroption = { |
|
|
|
|
|
|
|
title : { |
|
|
|
|
|
|
|
text: '14天打卡人体温区间' |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
tooltip : { |
|
|
|
|
|
|
|
trigger: 'axis' |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
legend: { |
|
|
|
|
|
|
|
data:['女性','男性'] |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
grid:{ |
|
|
|
|
|
|
|
x:30, |
|
|
|
|
|
|
|
x2:40, |
|
|
|
|
|
|
|
y2:24 |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
calculable : true, |
|
|
|
|
|
|
|
xAxis : [ |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
type : 'category', |
|
|
|
|
|
|
|
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月','13','14'] |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
], |
|
|
|
|
|
|
|
yAxis : [ |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
type : 'value' |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
], |
|
|
|
|
|
|
|
series : [ |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
name:'女性', |
|
|
|
|
|
|
|
type:'bar', |
|
|
|
|
|
|
|
data:[36.5, 37.9, 37.0, 40.2, 39.6, 36.7, 35.6, 36.2, 36.6, 40.0, 36.4, 38.3, 36.4, 38.3], |
|
|
|
|
|
|
|
markPoint : { |
|
|
|
|
|
|
|
data : [ |
|
|
|
|
|
|
|
{type : 'max', name: '最大值'}, |
|
|
|
|
|
|
|
{type : 'min', name: '最小值'} |
|
|
|
|
|
|
|
] |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
markLine : { |
|
|
|
|
|
|
|
data : [ |
|
|
|
|
|
|
|
{type : 'average', name: '平均值'} |
|
|
|
|
|
|
|
] |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
name:'男性', |
|
|
|
|
|
|
|
type:'bar', |
|
|
|
|
|
|
|
data:[36.5, 37.9, 36.0, 38.2, 36.6, 37.7, 39.6, 36.2, 36.6, 40.0, 36.9, 37.3, 36.4, 38.3], |
|
|
|
|
|
|
|
markPoint : { |
|
|
|
|
|
|
|
data : [ |
|
|
|
|
|
|
|
{name : '年最高', value : 42, xAxis: 7, yAxis: 183, symbolSize:18}, |
|
|
|
|
|
|
|
{name : '年最低', value : 36.0, xAxis: 11, yAxis: 3} |
|
|
|
|
|
|
|
] |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
markLine : { |
|
|
|
|
|
|
|
data : [ |
|
|
|
|
|
|
|
{type : 'average', name : '平均值'} |
|
|
|
|
|
|
|
] |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
] |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
barChart.setOption(baroption); |
|
|
|
|
|
|
|
window.onresize = barChart.resize; |
|
|
|
|
|
|
|
//南丁格尔图 |
|
|
|
|
|
|
|
var ndChart = echarts.init(document.getElementById("echarts-nd-chart")); |
|
|
|
|
|
|
|
var ndoption = { |
|
|
|
|
|
|
|
title:{ |
|
|
|
|
|
|
|
text: '患者地区分布' |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
color: ['#006cff', '#66cdff', 'gray' , 'brown'], |
|
|
|
|
|
|
|
tooltip: { |
|
|
|
|
|
|
|
trigger: 'item', |
|
|
|
|
|
|
|
formatter: '{a} <br/>{b} : {c} ({d}%)' |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
legend: [{ |
|
|
|
|
|
|
|
icon: "bar", |
|
|
|
|
|
|
|
orient: "vertical", |
|
|
|
|
|
|
|
top: "center", |
|
|
|
|
|
|
|
left: 'left', |
|
|
|
|
|
|
|
itemGap: 15, |
|
|
|
|
|
|
|
textStyle: { |
|
|
|
|
|
|
|
color: "rgba(0,0,0,.5)", |
|
|
|
|
|
|
|
fontSize: "12" |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}], |
|
|
|
|
|
|
|
series: [ |
|
|
|
|
|
|
|
{ |
|
|
|
|
|
|
|
name: '患者地区分布', |
|
|
|
|
|
|
|
type: 'pie', |
|
|
|
|
|
|
|
radius: ['10%', '70%'], |
|
|
|
|
|
|
|
center: ['50%', '50%'], |
|
|
|
|
|
|
|
// area面积模式 radius半径模式 |
|
|
|
|
|
|
|
roseType: 'radius', |
|
|
|
|
|
|
|
itemStyle: { |
|
|
|
|
|
|
|
borderRadius: 5 |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
data: [ |
|
|
|
|
|
|
|
{ value: 26, name: "分宜县" }, |
|
|
|
|
|
|
|
{ value: 20, name: "渝水区" }, |
|
|
|
|
|
|
|
{ value: 18, name: "仙女湖风景名胜区" }, |
|
|
|
|
|
|
|
{ value: 22, name: "新余高新技术产业开发区" } |
|
|
|
|
|
|
|
], |
|
|
|
|
|
|
|
label: { |
|
|
|
|
|
|
|
fontSize: 12 |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
labelLine: { |
|
|
|
|
|
|
|
// length是链接图形的线,length2是连接length和文字的线 |
|
|
|
|
|
|
|
lengthL: 6, |
|
|
|
|
|
|
|
length2: 8 |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
] |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
ndChart.setOption(ndoption); |
|
|
|
|
|
|
|
window.onresize = ndChart.resize; |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
</body> |
|
|
|
|
|
|
|
|
|
|
|
</html> |
|
|
|
</html> |
|
|
|