zmcoding
/
data_view


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
							<!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>