- 新建类：Contants
暂时没用上，也可以用上，主要用于存放一些常量 - 新建：index.jsp
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8" %>
<%
String path = request.getContextPath();
%>
<!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=ISO-8859-1">
<title>Show Time</title>
</head>
<body>
<form action="/queryContact">
id:<input type="text" name="id"/>
telephone:<input type="text" name="telephone"/>
<input type="submit" value="查询联系人"/>
</form>
<form action="/queryContactList">
<input type="submit" value="查询所有"/>
</form>
<form action='<c:url value="/queryCallLogList2"/>' method="post">
telephone:<input type="text" name="telephone"/>
year:<input type="text" name="year"/>
month:<input type="text" name="month"/>
day:<input type="text" name="day"/>
<input type="submit" value="查询该人通话记录"/>
</form>
</body>
</html>
-
新建：queryContact.jsp
<%--
Created by IntelliJ IDEA.
User: Z
Date: 2017/10/28
Time: 10:36
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored = "false" %>
<html>
<head>
<title>查询联系人</title>
</head>
<body>
查询结果：
<h1>${requestScope.contacts}</h1>
</body>
</html> -
新建：callLogList.jsp
<%--
Created by IntelliJ IDEA.
User: Z
Date: 2017/10/28
Time: 14:36
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored = "false" %>
<html>
<head>
<title>显示通话记录</title>
</head>
<body>
查询结果：
<h1>${requestScope.callLogList}</h1>
</body>
</html> -
新建：callLogListEchart.jsp
<%--
Created by IntelliJ IDEA.
User: Z
Date: 2017/10/28
Time: 14:36
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>显示通话记录</title>
<script type="text/javascript" src="../js/echarts.min.js"></script>
<%--<script type="text/javascript" src="{pageContext.request.contextPath}/jquery-3.2.0.min.js"></script>--%>
<%--<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>--%>
</head>
<body style="height: 100%; margin: 0">
<div id="container1" style="height: 100%; width: 50%; float:left"; m></div>
<div id="container2" style="height: 100%; width: 50%; float:right"></div>
<script type="text/javascript">
var telephone = "{requestScope.name}"
var date = "
{requestScope.count}"
var duration = "${requestScope.duration}"
callog1();
callog2();function callog1() {
var dom = document.getElementById("container1");
var myChart = echarts.init(dom);
myChart.showLoading();
var option = {
title: {
text: '通话记录查询人：' + name,
textStyle: {
//文字颜色
color: '#2c2c2c',
//字体风格,'normal','italic','oblique'
fontStyle: 'normal',
//字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
fontWeight: 'bold',
//字体系列
fontFamily: 'sans-serif',
//字体大小
fontSize: 20
},
itemGap: 12,
subtext: '手机号码：' + telephone,
subtextStyle: {
//文字颜色
color: '#2c2c2c',
//字体风格,'normal','italic','oblique'
fontStyle: 'normal',
//字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
fontWeight: 'bold',
//字体系列
fontFamily: 'sans-serif',
//字体大小
fontSize: 18
}
},
grid:{
x:100,
y:100,
borderWidth:1
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['通话次数', '通话时长']
},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {readOnly: false},
magicType: {type: ['line', 'bar']},
restore: {},
saveAsImage: {}
}
},
xAxis: {
data: date.split(","),
},
yAxis: {},
series: [
{
name: '通话次数',
type: 'line',
data: count.split(","),
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
},
{
name: '通话时长',
type: 'line',
data: duration.split(","),
markPoint: {
data: [
{name: '月最低', value: -2, xAxis: 1, yAxis: -1.5}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'},
[{
symbol: 'none',
x: '90%',
yAxis: 'max'
}, {
symbol: 'circle',
label: {
normal: {
position: 'start',
formatter: '最大值'
}
},
type: 'max',
name: '最高点'
}]
]
}
},
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
myChart.hideLoading()
}function callog2() {
var dom = document.getElementById("container2");
var myChart = echarts.init(dom);
myChart.showLoading();
var option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['通话次数', '通话时长']
},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {readOnly: false},
magicType: {type: ['line', 'bar']},
restore: {},
saveAsImage: {}
}
},
grid:{
x:100,
y:100,
borderWidth:1
},
xAxis: {
data: date.split(","),
},
yAxis: {},
series: [
{
name: '通话次数',
type: 'bar',
data: count.split(","),
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
},
{
name: '通话时长',
type: 'bar',
data: duration.split(","),
markPoint: {
data: [
{name: '月最低', value: -2, xAxis: 1, yAxis: -1.5}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'},
[{
symbol: 'none',
x: '90%',
yAxis: 'max'
}, {
symbol: 'circle',
label: {
normal: {
position: 'start',
formatter: '最大值'
}
},
type: 'max',
name: '最高点'
}]
]
}
},
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
myChart.hideLoading()
}
</script>
</body>
</html>
本教程由尚硅谷教育大数据研究院出品，如需转载请注明来源，欢迎大家关注尚硅谷公众号（atguigu）了解更多。
网友评论