全国疫情统计可视化地图 01

第一阶段目标：
导入全国疫情数据库payiqing.sql（MySQL数据库）。
可以按照时期查询各个省市的疫情统计表格。
以折线图或柱状图展示某天的全国各省的确诊人数。　　

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>全国疫情统计可视化地图</title>

</head>

</frameset>

</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

 

<style type="text/css">

body {

    margin: 0;

    padding: 0;

    font-size: 12px;

    font-family: "Microsoft Yahei", Verdana, Arial, Helvetica, sans-serif

}

.leftMenu {

    min-width:220px;

    width:268px;

    margin:40px auto 0 auto;

}

.menu {

    border: #bdd7f2 1px solid;

    border-top: #0080c4 4px solid;

    border-bottom: #0080c4 4px solid;

    background: #f4f9ff repeat-y right;

    margin-left: 10px;

}

.menu .ListTitle {

 

    border-bottom: 1px #98c9ee solid;

    display: block;

    text-align: center;

    /*position: relative;*/

    height: 38px;

    line-height: 38px;

    cursor: pointer;

    /*+min-width:220px;*/

 

    +width:100%;

}

.ListTitlePanel {

    position: relative;

}

.leftbgbt {

    position: absolute;

    background: no-repeat;

    width: 11px;

    height: 52px;

    left: -11px;

    top: -4px;

}

/*.leftbgbt {

    float:left;

    background: no-repeat;

    width: 11px;

    height: 52px;

    left: 0px;

    top: 0px;

    zoom:1;

    z-index:200px;

}

*/

.leftbgbt2 {

    position: absolute;

    background: no-repeat;

    width: 11px;

    height: 48px;

    left: -11px;

    top: -1px;

}

.menuList {

    display: block;

    height: auto;

}

.menuList div {

    height: 28px;

    line-height: 24px;

    border-bottom: 1px #98c9ee dotted;

}

.menuList div a {

    display: block;

    background: #fff;

    line-height: 28px;

    height: 28px;

    

    color: #185697;

    text-decoration: none;

}

.menuList div a:hover {

    color: #f30;

    background: #0080c4;

    color: #fff;

}

</style>

 

<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-1.12.1.js"></script>

<script type="text/javascript">

$(document).ready(function() {

    var menuParent = $('.menu > .ListTitlePanel > div');//获取menu下的父层的DIV

    var menuList = $('.menuList');

    $('.menu > .menuParent > .ListTitlePanel > .ListTitle').each(function(i) {//获取列表的大标题并遍历

        $(this).click(function(){

            if($(menuList[i]).css('display') == 'none'){

                $(menuList[i]).slideDown(300);

            }

            else{

                $(menuList[i]).slideUp(300);

            }

        });

    });

});

</script>

 

</head>

<body style="margin-top: -30px;">

 

<div class="leftMenu">

    <div class="menu">

        <div class="menuParent">

            <div class="ListTitlePanel">

                <div class="ListTitle">

                    <strong>资料查询</strong>

                    <div class="leftbgbt2"> </div>

                </div>

            </div>

            <div class="menuList" style="text-align:center">

                <div> <a target="mainAction"  href="${pageContext.request.contextPath}/listall.jsp">疫情查询</a></div>

                <div> <a target="mainAction" href="${pageContext.request.contextPath}/keshihuaceshi.jsp">全国疫情柱状图统计</a></div>

 

            </div>

        </div>

        

        </div>

</div>

 

</body>

</html>

<%@ page language="java" contentType="text/html; charset=utf-8"

pageEncoding="utf-8"%>

console.log($('#bt1').val())

console.log($('#bt2').val());

</script>

<!DOCTYPE html>

<html>

<head>

<title>ECharts</title>

</head>

<body>

<div>

<div >

查询时间<input type="data" id="data" name="data"/> <td> <button type="submit" class="b">查询</button>

</td> </div>

</form>

</div>

function check() {

var data = document.getElementById("data");;

//非空

if(data.value == '') {

alert('请填写时间');

return false;

}

</script>

<div>

<tr>

</tr>

<c:forEach items="${info}" var="item">

<tr>

<td>${item.province}</td>

</tr>

</c:forEach>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>广西壮族自治区</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>内蒙古自治区</td>

</tr>

<tr>

<td>宁夏回族自治区</td>

</tr>

<tr>

<td>新疆维吾尔自治区</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据

var option = {

title: {

text: '本日各省确诊病例数量分析'

tooltip: {},

legend: {

data:['人数']

xAxis: {

data: ["湖北省","广东省","浙江省","河南省"

,"安徽省"

,"江西省"

,"江苏省"

,"重庆市"

,"山东省"

,"四川省"

,"北京市"

,"黑龙江省"

,"上海市"

,"河北省"

,"陕西省"

,"广西壮族自治区"

,"云南省"

,"海南省"

,"山西省"

,"辽宁省"

,"贵州省"

,"天津市"

,"甘肃省"

,"吉林省"

,"内蒙古自治区"

,"宁夏回族自治区"

,"新疆维吾尔自治区"

,"香港"

,"青海省"

,"台湾"]

yAxis: {},

series: [{

name: '人数',

type: 'bar',

data: [24953,

1075,

1048,

981,

733,

698,

439,

426,

407,

363,

315,

295,

286,

195,

183,

138,

124,

104,

99,

89,

88,

71,

69,

52,

45,

42,

26,

18,

17]

}]

};

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

</script>

</body>

</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>浏览需求</title>

</head>

<body>

<%

        Object message = request.getAttribute("message");

        if (message != null && !"".equals(message)) {

    %>

    <script type="text/javascript">

               alert("<%=request.getAttribute("message")%>");

    </script>

    <%

        }

    %>

    <div align="center">

        <h1>各省市疫情统计表</h1>

        <br>

        日期范围<input type="date" id="btime" name="btime">-<input type="date" id="etime" name="etime">

        <button type="button" class="btn btn-info" onclick="checkfind()">查询</button>    

        <br><br>

        <table>

          <thead>

            <tr>

                <th>编号</th>

              <th>日期</th>

              <th>省名</th>

              <th>市名</th>

              <th>确诊人数</th>

              <th>治愈人数</th>

              <th>死亡人数</th>

            </tr>

          </thead>

          <tbody>

          <c:forEach items="${pres}" var="item">

            <tr class="active">

            <td>${item.id}</td>

              <td>${item.date}</td>

              <td>${item.name}</td>

              <td>${item.city}</td>

              <td>${item.confirmed}</td>

              <td>${item.cured}</td>

              <td>${item.dead}</td>

           </tr>

          </c:forEach>

          </tbody>

        </table>

    </div>

<script type="text/javascript">

 

function checkfind()

{

    var btime=document.getElementById("btime").value;

    var etime=document.getElementById("etime").value;

    if(btime==""||etime==""||(btime==""&&etime==""))

    {

        alert("请填写时间");

        return ;

    }

    else

    {

        window.location.href = "checkfind?btime="+btime+"&etime="+etime;

    }

}

 

</script>

</body>

</html>

<%@page import="entity.Cvf"%>

<%@page import="java.util.List"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>链接地址</title>

</head>

<body>

<%         request.setCharacterEncoding("utf-8");

List <Cvf> cvfs =(List<Cvf>) request.getAttribute("cvfs");

%>

 

      <table >

      <thead >

         <tr>

         <th>标题</th>

         <th>关键词</th>

         </tr>

  </thead>

  <tbody class="htbody">

         <%

 

         if(cvfs!=null){

           for(Cvf cvf:cvfs){

            %>            

            <tr>                

                <td><a href="<%=cvf.getChref() %>"><%=cvf.getCname() %></a></td>

                <td><%=cvf.getCkeyword() %></td>

            </tr>

            <%

           }

         }

         %>

         </tbody>

      </table> 

</div>

</body>

</html>

<%@page import="java.util.Iterator"%>

<%@page import="java.util.HashMap"%>

<%@page import="entity.Cvf"%>

<%@page import="java.util.List"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<title>CVPR词云</title>

</head>

<body>

<% request.setCharacterEncoding("utf-8");

List <Cvf> cvfs =(List<Cvf>) request.getAttribute("cvfs");

int i=0;

int j=0;

int k=0;

HashMap<String, Integer> hm=new HashMap();

if(cvfs!=null){

for(Cvf cvf:cvfs){i++;

if (!hm.containsKey(cvf.getCkeyword())) {

hm.put(cvf.getCkeyword(), 1);

}else {

Integer counts=hm.get(cvf.getCkeyword());

hm.put(cvf.getCkeyword(), counts+1);

}

var myChart = echarts.init(document.getElementById('main'));

option = {

title: {

text: '词云',//标题

x: 'center',

textStyle: {

fontSize: 23

}

backgroundColor: '#F7F7F7',

tooltip: {

show: true

series: [{

name: '热点分析',//数据提示窗标题

type: 'wordCloud',

sizeRange: [6, 66],//画布范围，如果设置太大会出现少词（溢出屏幕）

rotationRange: [-45, 90],//数据翻转范围

//shape: 'circle',

textPadding: 0,

autoSize: {

enable: true,

minSize: 6

drawOutOfBound: true,//词云显示完整，超出画布的也显示

textStyle: {

normal: {

color: function() {

return 'rgb(' + [

Math.round(Math.random() * 160),

Math.round(Math.random() * 160)

].join(',') + ')';

}

emphasis: {

shadowBlur: 10,

shadowColor: '#333'

}

data:[

//获取request域中的数据

Iterator<String> it=hm.keySet().iterator();

while(it.hasNext()) {

String keyName=it.next();

{name:"<%=keyName%>",value:<%=hm.get(keyName) %>},

}

]

}]

};

myChart.setOption(option,true);

myChart.on('click',function(param){

var selected = param.name;

if(selected){

window.open("ListServlet?keyword="+selected);

}

});

</script>

</body>

</html>

posted @ 2020-03-05 14:23 qazvve 阅读(572) 评论(0) 收藏举报

刷新页面返回顶部

qvvvvvv

全国疫情统计可视化地图 01

公告