index.jsp
<%@ page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>用戶行爲分析</title>
<style>
#left{
width: 15%;
height: 700px;
float: left;
border-right:1px solid gray;
}
#right{
width: 84%;
height: 700px;
border:0;
}
li{
line-height:1.8;
}
</style>
<body>
<h2>用戶行爲分析結果</h2><hr>
<div id="left">
<ul>
<li><a href="zonghe-1.jsp" target="right">每天成交量</a></li>
<li><a href="zonghe-2.jsp" target="right">訪問量前10的商品種類</a></li>
<li><a href="zonghe-3.jsp" target="right">購買量前10的用戶</a></li>
</ul>
</div>
<iframe id="right" name="right" src=""></iframe>
</body>
</html>
zonghe-1.jsp
<%@page pageEncoding="UTF-8" import="java.sql.*"%>
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<title>柱狀圖顯示數值</title>
</head>
<body style="height:600px; margin: 0">
<div id="main" style="width: 2000px;height:80%;"></div>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script>
function show(title,value){
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option = {
// 標題
title: {
text: '每天的成交量'
},
// 工具箱
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {readOnly: false},
magicType: {type: ['line', 'bar']},
restore: {},
saveAsImage: {}
}
},
// 圖例
legend: {
data: ['銷量']
},
// x軸
xAxis: {
data: title
},
yAxis: {
type: 'value'
},
// 數據
series: [{
name: '銷量',
type: 'bar',
data: value,
itemStyle: {
normal: {
label: {
show: true, //開啓顯示
position: 'top', //在上方顯示
textStyle: { //數值樣式
color: 'black',
fontSize: 16
}
}
}
},
}]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
}
</script>
<%
Class.forName("com.mysql.jdbc.Driver");
String url="jdbc:mysql://192.168.159.128:3306/test";
Connection con=DriverManager.getConnection(url,"guest","guest");
String sql="select time,count(item_id) c from province where behavior_type='4' and time<'2020-1-1'and time>'2013-1-1' group by day(time) order by c DESC;";
PreparedStatement pst=con.prepareCall(sql);
ResultSet rs=pst.executeQuery();
%>
<script type="text/javascript">
title=new Array();
value=new Array();
<%
while(rs.next()){
%>
title.push("<%=rs.getString(1)%>");value.push(<%=rs.getInt(2)%>);
<%
}
rs.close();
pst.close();
con.close();
%>
show(title,value);
</script>
</body>
</html>
zonghe-1.jsp
<%@page pageEncoding="UTF-8" import="java.sql.*"%>
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<title>柱狀圖顯示數值</title>
</head>
<body style="height:600px; margin: 0">
<div id="main" style="width: 2000px;height:80%;"></div>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script>
function show(title,value){
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option = {
// 標題
title: {
text: '訪問量前10名的商品種類'
},
// 工具箱
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {readOnly: false},
magicType: {type: ['line', 'bar']},
restore: {},
saveAsImage: {}
}
},
// 圖例
legend: {
data: ['銷量']
},
// x軸
xAxis: {
data: title
},
yAxis: {
type: 'value'
},
// 數據
series: [{
name: '銷量',
type: 'bar',
data: value,
itemStyle: {
normal: {
label: {
show: true, //開啓顯示
position: 'top', //在上方顯示
textStyle: { //數值樣式
color: 'black',
fontSize: 16
}
}
}
},
}]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
}
</script>
<%
Class.forName("com.mysql.jdbc.Driver");
String url="jdbc:mysql://192.168.159.128:3306/test";
Connection con=DriverManager.getConnection(url,"guest","guest");
String sql="select item_category,count(item_category) c from province where behavior_type='1' group by item_category order by c DESC limit 10;";
PreparedStatement pst=con.prepareCall(sql);
ResultSet rs=pst.executeQuery();
%>
<script type="text/javascript">
title=new Array();
value=new Array();
<%
while(rs.next()){
%>
title.push("<%=rs.getString(1)%>");value.push(<%=rs.getInt(2)%>);
<%
}
rs.close();
pst.close();
con.close();
%>
show(title,value);
</script>
</body>
</html>
zhonghe-3
<%@page pageEncoding="UTF-8" import="java.sql.*"%>
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<title>柱狀圖顯示數值</title>
</head>
<body style="height:600px; margin: 0">
<div id="main" style="width: 2000px;height:80%;"></div>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script>
function show(title,value){
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option = {
// 標題
title: {
text: '購買量前10名的用戶'
},
// 工具箱
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {readOnly: false},
magicType: {type: ['line', 'bar']},
restore: {},
saveAsImage: {}
}
},
// 圖例
legend: {
data: ['銷量']
},
// x軸
xAxis: {
data: title
},
yAxis: {
type: 'value'
},
// 數據
series: [{
name: '銷量',
type: 'bar',
data: value,
itemStyle: {
normal: {
label: {
show: true, //開啓顯示
position: 'top', //在上方顯示
textStyle: { //數值樣式
color: 'black',
fontSize: 16
}
}
}
},
}]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
}
</script>
<%
Class.forName("com.mysql.jdbc.Driver");
String url="jdbc:mysql://192.168.159.128:3306/test";
Connection con=DriverManager.getConnection(url,"guest","guest");
String sql="select user_id ,count(item_id) from province where behavior_type='4' group by user_id having count(item_id) order by count(item_id) desc limit 10 ;";
PreparedStatement pst=con.prepareCall(sql);
ResultSet rs=pst.executeQuery();
%>
<script type="text/javascript">
title=new Array();
value=new Array();
<%
while(rs.next()){
%>
title.push("<%=rs.getString(1)%>");value.push(<%=rs.getInt(2)%>);
<%
}
rs.close();
pst.close();
con.close();
%>
show(title,value);
</script>
</body>
</html>