全国疫情统计可视化地图（1）

时间：2020-03-04 17:13:03 阅读：253 评论：0 收藏：0 [点我收藏+]

技术分享图片

第一阶段运行结果

技术分享图片

主要是根据 https://www.echartsjs.com/zh/index.html 上提供的表格模板。引入下载好的 echarts.min.js。然后其他的思路和平时的一样。

将模板中的数据改为自己从servlet中传来的数据即可

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@page import="com.bean.Data" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<meta charset="UTF-8">
     <link type="text/css" rel="stylesheet" href="css/style.css">

    <script src="echarts.min.js"></script>
    <script src="jquery-1.11.3.min.js"></script>
    <script src="bootstrap.js"></script>
<title>显示</title>

</head>

<body >
<br>
<h1>疫情统计表</h1>
<div id="main" style="height:400px"></div>
<div id="main2" style="height:600px;"></div>
<div>
<span>
        日期<input class="slide-up " type="date" id="btime" name="btime">-<input class="slide-up " type="date" id="etime" name="etime">
        <button type="button" class="btn btn-info" onclick="checkfind()">查询</button>&nbsp;&nbsp;&nbsp;&nbsp;
 </span><br><br>
    <table id="gradient-style" style="background-color:blue; width:100%; height:100%">

        <tr>

            <td>编号</td>

            <td>省份</td>

            <td>地区</td>
            
            <td>确诊人数</td>
            
            <td>YiSi人数</td>
            
            <td>治愈人数</td>

            <td>死亡人数</td>
            
            <td>总人数</td>
        </tr>

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

            <tr>

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

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

                <td>${item.city }</td>
                
                <td>${item.confirmed_num }</td>
                
                <td>${item.yisi_num }</td>
                
                <td>${item.cured_num}</td>
                
                <td>${item.dead_num }</td>
                
                <td>${item.code }</td>

            </tr>

        </c:forEach>

    </table>
    </div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById(‘main‘));

var arr = new Array();
var index = 0;
<c:forEach items="${pres}" var="goods">
    arr[index++] = ${goods.confirmed_num};
    
</c:forEach>

// 指定图表的配置项和数据
var option = {
    title: {
        text: ‘全国疫情统计(柱状图)‘
    },
    tooltip: {
        show: true
    },
    legend: {
        data:[‘患者数‘]
    },
    xAxis : [
        {
            type : ‘category‘,
            
            axisLabel:{  
                 interval:0,
                 rotate:40,
                  },
            data : [
                <c:forEach items="${pres}" var="g">
                ["${g.province}"],
                </c:forEach>
            ]
        }
    ],
    yAxis : [
        {
            type : ‘value‘
        }
    ],
    series : [
        {
            name:‘患者数‘,
            type:‘bar‘,
            data: arr
        }
    ]
};

// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);

var myChart2=echarts.init(document.getElementById("main2"));

var option={

  title:{
    text:‘全国疫情统计(折线图)‘
  },

  toolbox:{
      show:true,
      feature:{
          saveAsImage:{
              show:true
          }
      }
  },

  legend:{
      data:[‘患者数‘]
  },
 
  xAxis : [
      {
          type : ‘category‘,
          axisLabel:{  
               interval:0, 
               rotate:40,
                },
          data : [
              <c:forEach items="${pres}" var="g">
              ["${g.province}"],
              </c:forEach>
          ]
      }
  ],

 yAxis : [
      {
          type : ‘value‘
      }
  ],

  series:[{
      name:‘患者数‘,
      type:‘line‘,
      data:arr,
      itemStyle:{
          normal:{
            label : {
            show: true
            },
            borderColor:‘blue‘, 
            lineStyle:{                 
              width:5,  
              type:‘solid‘  
            }
          }
        }
  }]
};


//使用前面指定的配置项和数据项显示图表
myChart2.setOption(option);

</script>
<script type="text/javascript">
function checkfind()
{
    var stime=document.getElementById("btime").value;
    var etime=document.getElementById("etime").value;
    if(btime==""&&etime=="")
    {
        alert("请输入时间！");
        return ;
    }
    else
    {
        window.location.href = "ShowDataServlet?name="+name+"&stime="+stime+"&etime="+etime;
    }
}
</script>

</body>
</html>

全国疫情统计可视化地图（1）

原文：https://www.cnblogs.com/wendi/p/12410318.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)