第五周总结
本周学习了echart的用法可以绘制图表
<%//开头%>
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.util.*"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<link rel="stylesheet" type="text/css" href="a.css">
<!DOCTYPE html>
<html>
<head>
<!-- 引入 ECharts 文件 -->
<script src="js/echarts.min.js"></script>
<title>疫情数据统计</title>
</head>
<style type="text/css">
#main{
position:relative;
left: 100px;
}
.cha{
position:relative;
left: 50px;
}
td{
text-align:center;vertical-align:middle;
}
#cont
{
width: 1200px;
}
#test1 {
width: 400px;
position:relative;
margin: 10px 30px;
float: left;
}
#test2 {
width: 400px;
position:relative;
float: right;
}
</style>
<body>
<%String pname[] =(String[]) session.getAttribute("name");%>
<%String cnum[] =(String[]) session.getAttribute("num");%>
<div id="main" style="width: 600px;height:400px;"></div>
<div id="cont">
<div id="test2">
<!-- <table>
<tr>
<th>日期</th><th>省份</th><th>城市</th><th>确诊人数</th><th>治愈人数</th><th>死亡人数</th>
</tr>
<c:forEach items="${list}" var="use" >
<tr>
<td>${use.date}</td><td>${use.province}</td><td>${use.city}</td><td>${use.quezhen}</td><td>${use.zhiyu}</td><td>${use.dead}</td>
</tr>
</c:forEach>
</table>-->
</div>
<div id="test1">
<table>
<tr>
<th>日期</th><th>州</th><th>国家</th><th>确诊人数</th><th>治愈人数</th><th>死亡人数</th>
</tr>
<c:forEach items="${list2}" var="use2" >
<tr>
<td>${use2.date}</td><td>${use2.continents}</td><td>${use2.province}</td><td>${use2.confirmed_num}</td><td>${use2.cured_num}</td><td>${use2.dead_num}</td>
</tr>
</c:forEach>
</table>
</div>
</div>
</body>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '疫情确诊人数统计'
},
tooltip: {},
legend: {
data:['确诊人数']
},
xAxis: {
type: 'category',
axisLabel: {
interval:0,
rotate:40
} ,
data: ["<%=pname[0]%>","<%=pname[1]%>","<%=pname[2]%>","<%=pname[3]%>","<%=pname[4]%>","<%=pname[5]%>"
,"<%=pname[6]%>","<%=pname[7]%>","<%=pname[8]%>","<%=pname[9]%>","<%=pname[10]%>","<%=pname[11]%>","<%=pname[12]%>"
,"<%=pname[13]%>","<%=pname[14]%>","<%=pname[15]%>","<%=pname[16]%>","<%=pname[17]%>","<%=pname[18]%>","<%=pname[19]%>"
,"<%=pname[20]%>","<%=pname[21]%>","<%=pname[22]%>","<%=pname[23]%>","<%=pname[24]%>","<%=pname[25]%>","<%=pname[26]%>"
,"<%=pname[27]%>","<%=pname[28]%>","<%=pname[29]%>","<%=pname[30]%>","<%=pname[31]%>"]
},
yAxis: {
type:'value'
},
series: [{
name: '确诊人数',
data: [<%=cnum[0]%>,<%=cnum[1]%>,<%=cnum[2]%>, <%=cnum[3]%>,<%=cnum[4]%> ,<%=cnum[5]%>
,<%=cnum[6]%> ,<%=cnum[7]%> ,<%=cnum[8]%> ,<%=cnum[9]%> ,<%=cnum[10]%> ,<%=cnum[11]%> ,<%=cnum[12]%>
,<%=cnum[13]%> ,<%=cnum[14]%> ,<%=cnum[15]%> ,<%=cnum[16]%> ,<%=cnum[17]%> ,<%=cnum[18]%> ,<%=cnum[19]%>
,<%=cnum[20]%> ,<%=cnum[21]%> ,<%=cnum[22]%> ,<%=cnum[23]%> ,<%=cnum[24]%> ,<%=cnum[25]%> ,<%=cnum[26]%>
,<%=cnum[27]%> ,<%=cnum[28]%> ,<%=cnum[29]%> ,<%=cnum[30]%>,<%=cnum[31]%>],
type: 'line',
smooth: true
}]
};
// 指定图表的配置项和数据
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</html>
