<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据可视化demo</title>
<link href="../styles/common.css" rel="stylesheet">
<script src="../scripts/Plugin/jquery-3.3.1.min.js"></script>
<script src="../scripts/Plugin/echarts.min.js"></script>
<script src="../scripts/common.js"></script>
<script src="../scripts/trend.js"></script>
</head>
<body>
<header class="header left">
<div class="left nav">
<ul>
<li><i class="nav_1"></i><a href="index.html">采集概况</a> </li>
<li><i class="nav_2"></i><a href="quota.html">指标分析</a> </li>
<li><i class="nav_3"></i><a href="trend.html">趋势分析</a> </li>
<li class="nav_active"><i class="nav_4"></i><a href="chronic.html">慢病病人列表</a> </li>
</ul>
</div>
<div class="header_center left" style="position:relative">
<h2><strong>大数据展示</strong></h2>
</div>
<div class="right nav text_right">
<ul>
</ul>
</div>
</header>
<div class="con left" style="width:50%;">
<div class="div_any">
<div class="left div_any01" style="width:100%;">
<div class="div_any_child" style="width:98%;position:relative;height: 420px;">
<div class="div_any_title"><img src="../images/title_13.png">主要传染病</div>
<div id="histogramChart1" style="width: 45%;display: inline-block;height: 400px;margin-top: 15px;"></div>
<div id="lineChart1" style="width: 52%;height: 66%;display: inline-block;"></div>
<div style="width: 50%;height: 20%;display: inline-block;color:red;position: absolute;right: 2%;top: 8%;">
<div style="display: inline-block;width:33%;text-align:center;">
<div style="color:#fff;font-size: 18px;line-height: 32px;">病例报告数</div>
<div style="color:#87cefa;font-size: 30px;line-height: 42px;">2354</div>
</div><div style="display: inline-block;width:33%;text-align:center;">
<div style="color:#fff;font-size: 18px;line-height: 32px;">死亡数</div>
<div style="color:red;font-size: 30px;line-height: 42px;">26</div>
</div><div style="display: inline-block;width:33%;text-align:center;">
<div style="color:#fff;font-size: 18px;line-height: 32px;">同比发病数趋势</div>
<div style="color:#ff7f50;font-size: 30px;line-height: 42px;">5.36%</div>
</div>
</div>
</div>
</div>
<div class="left div_any01" style="width:48%;">
<div class="div_any_child" style="height: 420px;">
<div class="div_any_title"><img src="../images/title_14.png">主要症状</div>
<p id="histogramChart2" class="p_chart" style="height: 400px;"></p>
</div>
</div>
<div class="left div_table_box" style="width: 48%;">
<div class="div_any_child" style="height: 420px;">
<div class="div_any_title"><img src="../images/title_16.png">预警信息</div>
<div class="table_p">
<table>
<thead><tr>
<th>序号</th>
<th>内容</th>
<th>发布时间</th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>9月21日感染性腹泻发病：123人次</td><td>2018-11-05</td></tr>
<tr><td>2</td><td>9月20日流行性感冒：57人次</td><td>2018-11-03</td></tr>
<tr><td>3</td><td>9月19日:手足口病发病同比增长220%</td><td>2018-11-01</td></tr>
<tr><td>4</td><td>9月18日登革热死亡:2人</td><td>2018-10-29</td></tr>
<tr><td>5</td><td>9月17日流行性感冒：157人次</td><td>2018-10-27</td></tr>
<tr><td>6</td><td>9月15日全区传染病发病人数较低</td><td>2018-10-25</td></tr>
<tr><td>7</td><td>9月14日流行性感冒：157人次</td><td>2018-10-23</td></tr>
<tr><td>8</td><td>9月13日全区传染病发病人数较低</td><td>2018-10-21</td></tr>
<tr><td>9</td><td>9月12日流行性感冒：157人次</td><td>2018-10-20</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="con right" style="width:50%;">
<div class="div_any">
<div class="left div_any01" style="width:100%;">
<div class="div_any_child" style="width:98%;position:relative;height: 420px;">
<div class="div_any_title"><img src="../images/title_17.png">主要疾病排行</div>
<div id="histogramChart3" style="width: 45%;display: inline-block;height: 400px;margin-top: 15px;"></div>
<div id="lineChart2" style="width: 52%;height: 90%;display: inline-block;"></div>
</div>
</div>
<div class="left div_any01" style="width:48%;">
<div class="div_any_child" style="height: 420px;">
<div class="div_any_title"><img src="../images/title_18.png">年龄分布</div>
<p id="pieChart1" class="p_chart" style="height: 400px;"></p>
</div>
</div>
<div class="right div_any01" style="width:48%;">
<div class="div_any_child" style="height: 420px;">
<div class="div_any_title"><img src="../images/title_19.png">性别分布</div>
<p id="pieChart2" class="p_chart" style="height: 400px;"></p>
</div>
</div>
</div>
</div>
</body>
</html>