0、效果展示
1、概述
2、搭建环境
本文以实现一个体育运动项目大数据可视化分析系统为目标，从环境搭建到编码实现全过程讲述
我们使用javaweb、J2EE来构建体育运动项目大数据可视化分析系统，环境使用最新版jdk和tomcat，配合mysql数据库
开发工具使用idea（也可以使用eclipse），数据库管理工具使用Navicat Premium
开发框架使用JavaBean Servlet MVC结构；
没有使用SSH（Struts+Spring+Hibernate）或SSM（Spring+SpringMVC+MyBatis），这两个框架我们在别的项目中再介绍开发过程
在项目中会引入My97DatePicker作为前端日期时间选择工具，使用fckeditor作为富媒体编辑器（也可以使用百度的ueditor）
使用DWR（Direct Web Remoting）用于改善web页面与Java类交互，实现远程服务器端AJAX读取登录数据。
使用JSTL（Java server pages standarded tag library，即JSP标准标签库），此库是由JCP（Java community Proces）所制定的标准规范，它主要提供给Java Web开发人员一个标准通用的标签库，并由Apache的Jakarta小组来维护。开发人员可以利用这些标签取代JSP页面上的Java代码，从而提高程序的可读性，降低程序的维护难度。
echarts百度图表插件
3、数据表结构
| 5 | t_guojia 国家 表 | ||
| 字段名称 | 自动增长 | 字段类型 | 说明 |
| id | - | int | 编号 |
| name | - | varchar | 名称 |
| jieshao | - | varchar | 描述 |
| del | - | varchar | 是否删除 |
| 6 | t_qiuyuan 球员 表 | ||
| 字段名称 | 自动增长 | 字段类型 | 说明 |
| id | - | int | 编号 |
| code | - | varchar | 编号 |
| name1 | - | varchar | 名称 |
| sex | - | varchar | 性别 |
| age | - | varchar | 年龄 |
| qiudui_id | - | varchar | 球队ID |
| indate | - | varchar | 时间 |
| del | - | varchar | 是否删除 |
4、后端代码示例
package com.action;
import java.io.IOException;
import java.sql.ResultSet;
import java.text.DecimalFormat;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.directwebremoting.WebContext;
import org.directwebremoting.WebContextFactory;
import com.dao.DB;
import com.orm.TAdmin;
import com.orm.TTongji;
import com.orm.Tgrades;
import com.service.liuService;
public class tongji_servlet extends HttpServlet {
public void service(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
String type = req.getParameter("type");
if (type.endsWith("tongjiOne")) {
tongjiOne(req, res);
}
if (type.endsWith("tongjiMore")) {
tongjiMore(req, res);
}
}
// 单场比赛统计
public void tongjiOne(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
String bisaidateinfo = "";
bisaidateinfo = req.getParameter("bisaidateinfo");
String wheresql = "";
String qiyuanList = "";
List gradesList = new ArrayList();
List chuanqiuList = new ArrayList();
List zhugongList = new ArrayList();
List shemenList = new ArrayList();
List guorenList = new ArrayList();
List shiwuList = new ArrayList();
List qiangduanList = new ArrayList();
List lanjieList = new ArrayList();
List yueweiList = new ArrayList();
List fanguiList = new ArrayList();
List juliList = new ArrayList();
if (bisaidateinfo != null) {
wheresql = " where bisaidate like '%" + bisaidateinfo + "%'";
String sql = "SELECT name1,code, qiuyuan_id,bisaidate,grades, chuanqiu, zhugong, shemen, guoren, shiwu, qiangduan, lanjie, yuewei, fangui, juli "
+ " FROM `t_grades` " + " left join t_qiuyuan on t_qiuyuan.id=t_grades.qiuyuan_id" + wheresql
+ " group by bisaidate,qiuyuan_id";
Object[] params = {};
DB mydb = new DB();
try {
mydb.doPstm(sql, params);
ResultSet rs = mydb.getRs();
while (rs.next()) {
qiyuanList += "\"" + rs.getString("name1") + "\"" + ",";
gradesList.add(rs.getString("grades"));
chuanqiuList.add(rs.getString("chuanqiu"));
zhugongList.add(rs.getString("zhugong"));
shemenList.add(rs.getString("shemen"));
guorenList.add(rs.getString("guoren"));
shiwuList.add(rs.getString("shiwu"));
qiangduanList.add(rs.getString("qiangduan"));
lanjieList.add(rs.getString("lanjie"));
yueweiList.add(rs.getString("yuewei"));
fanguiList.add(rs.getString("fangui"));
juliList.add(rs.getString("juli"));
}
rs.close();
} catch (Exception e) {
e.printStackTrace();
}
mydb.closed();
}
if (qiyuanList != "") {
qiyuanList = qiyuanList.substring(0, qiyuanList.length() - 1);// 删除多余的逗号
req.setAttribute("bisaidateinfo", bisaidateinfo);
req.setAttribute("qiyuanList", "[" + qiyuanList + "]");
req.setAttribute("gradesList", "[" + listToString(gradesList) + "]");
req.setAttribute("chuanqiuList", "[" + listToString(chuanqiuList) + "]");
req.setAttribute("zhugongList", "[" + listToString(zhugongList) + "]");
req.setAttribute("shemenList", "[" + listToString(shemenList) + "]");
req.setAttribute("guorenList", "[" + listToString(guorenList) + "]");
req.setAttribute("shiwuList", "[" + listToString(shiwuList) + "]");
req.setAttribute("qiangduanList", "[" + listToString(qiangduanList) + "]");
req.setAttribute("lanjieList", "[" + listToString(lanjieList) + "]");
req.setAttribute("yueweiList", "[" + listToString(yueweiList) + "]");
req.setAttribute("fanguiList", "[" + listToString(fanguiList) + "]");
req.setAttribute("juliList", "[" + listToString(juliList) + "]");
} else {
req.setAttribute("bisaidateinfo", "");
req.setAttribute("qiyuanList", "[]");
req.setAttribute("gradesList", "[]");
req.setAttribute("chuanqiuList", "[]");
req.setAttribute("zhugongList", "[]");
req.setAttribute("shemenList", "[]");
req.setAttribute("guorenList", "[]");
req.setAttribute("shiwuList", "[]");
req.setAttribute("qiangduanList", "[]");
req.setAttribute("lanjieList", "[]");
req.setAttribute("yueweiList", "[]");
req.setAttribute("fanguiList", "[]");
req.setAttribute("juliList", "[]");
}
// 获取比赛日期
List bisaiDateList = new ArrayList();
String sql1 = "SELECT bisaidate FROM `t_grades` group by bisaidate ";
Object[] params1 = {};
DB mydb1 = new DB();
try {
mydb1.doPstm(sql1, params1);
ResultSet rs1 = mydb1.getRs();
while (rs1.next()) {
bisaiDateList.add(rs1.getString("bisaidate"));
}
rs1.close();
} catch (Exception e) {
e.printStackTrace();
}
mydb1.closed();
// String ddddd=listToString(qiyuanList);
// System.out.println(ddddd);
req.setAttribute("bisaiDateList", bisaiDateList);
req.getRequestDispatcher("admin/tongji/tongjiOne.jsp").forward(req, res);
}
//多 场比赛统计
public void tongjiMore(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
String bisaidateinfo1 = "";
String bisaidateinfo2 = "";
bisaidateinfo1 = req.getParameter("bisaidateinfo1");
bisaidateinfo2 = req.getParameter("bisaidateinfo2");
String wheresql = "";
String qiyuanList = "";
List gradesList = new ArrayList();
List chuanqiuList = new ArrayList();
List zhugongList = new ArrayList();
List shemenList = new ArrayList();
List guorenList = new ArrayList();
List shiwuList = new ArrayList();
List qiangduanList = new ArrayList();
List lanjieList = new ArrayList();
List yueweiList = new ArrayList();
List fanguiList = new ArrayList();
List juliList = new ArrayList();
List shoufaList = new ArrayList();
if (bisaidateinfo1 != "" && bisaidateinfo2 != "") {
wheresql = " where bisaidate >'"+bisaidateinfo1+"' and bisaidate <'"+bisaidateinfo2+"' ";
String sql = " SELECT name1,code, qiuyuan_id,bisaidate,"
+ " sum(grades) as grades ,sum( chuanqiu) as chuanqiu, sum(zhugong) as zhugong, sum(shemen) as shemen, sum(guoren) as guoren , sum(shiwu) as shiwu, "
+ " sum( qiangduan) as qiangduan, sum(lanjie) as lanjie, sum(yuewei) as yuewei, sum(fangui) as fangui, sum(juli) as juli "
+ " , sum( if( shoufa > 0, shoufa, 0)) as shoufa "
+ " FROM `t_grades` left join t_qiuyuan on t_qiuyuan.id=t_grades.qiuyuan_id " + wheresql
+ " group by qiuyuan_id";
Object[] params = {};
DB mydb = new DB();
try {
mydb.doPstm(sql, params);
ResultSet rs = mydb.getRs();
while (rs.next()) {
qiyuanList += "\"" + rs.getString("name1") + "\"" + ",";
gradesList.add(rs.getString("grades"));
chuanqiuList.add(rs.getString("chuanqiu"));
zhugongList.add(rs.getString("zhugong"));
shemenList.add(rs.getString("shemen"));
guorenList.add(rs.getString("guoren"));
shiwuList.add(rs.getString("shiwu"));
qiangduanList.add(rs.getString("qiangduan"));
lanjieList.add(rs.getString("lanjie"));
yueweiList.add(rs.getString("yuewei"));
fanguiList.add(rs.getString("fangui"));
juliList.add(rs.getString("juli"));
shoufaList.add(rs.getString("shoufa"));
}
rs.close();
} catch (Exception e) {
e.printStackTrace();
}
mydb.closed();
}
if (qiyuanList != "") {
qiyuanList = qiyuanList.substring(0, qiyuanList.length() - 1);// 删除多余的逗号
req.setAttribute("bisaidateinfo", bisaidateinfo1 +"到"+ bisaidateinfo2);
req.setAttribute("qiyuanList", "[" + qiyuanList + "]");
req.setAttribute("gradesList", "[" + listToString(gradesList) + "]");
req.setAttribute("chuanqiuList", "[" + listToString(chuanqiuList) + "]");
req.setAttribute("zhugongList", "[" + listToString(zhugongList) + "]");
req.setAttribute("shemenList", "[" + listToString(shemenList) + "]");
req.setAttribute("guorenList", "[" + listToString(guorenList) + "]");
req.setAttribute("shiwuList", "[" + listToString(shiwuList) + "]");
req.setAttribute("qiangduanList", "[" + listToString(qiangduanList) + "]");
req.setAttribute("lanjieList", "[" + listToString(lanjieList) + "]");
req.setAttribute("yueweiList", "[" + listToString(yueweiList) + "]");
req.setAttribute("fanguiList", "[" + listToString(fanguiList) + "]");
req.setAttribute("juliList", "[" + listToString(juliList) + "]");
req.setAttribute("shoufaList", "[" + listToString(shoufaList) + "]");
} else {
req.setAttribute("bisaidateinfo", "");
req.setAttribute("qiyuanList", "[]");
req.setAttribute("gradesList", "[]");
req.setAttribute("chuanqiuList", "[]");
req.setAttribute("zhugongList", "[]");
req.setAttribute("shemenList", "[]");
req.setAttribute("guorenList", "[]");
req.setAttribute("shiwuList", "[]");
req.setAttribute("qiangduanList", "[]");
req.setAttribute("lanjieList", "[]");
req.setAttribute("yueweiList", "[]");
req.setAttribute("fanguiList", "[]");
req.setAttribute("juliList", "[]");
req.setAttribute("shoufaList", "[]");
}
// 获取比赛日期
List bisaiDateList = new ArrayList();
String sql1 = "SELECT bisaidate FROM `t_grades` group by bisaidate ";
Object[] params1 = {};
DB mydb1 = new DB();
try {
mydb1.doPstm(sql1, params1);
ResultSet rs1 = mydb1.getRs();
while (rs1.next()) {
bisaiDateList.add(rs1.getString("bisaidate"));
}
rs1.close();
} catch (Exception e) {
e.printStackTrace();
}
mydb1.closed();
// String ddddd=listToString(qiyuanList);
// System.out.println(ddddd);
req.setAttribute("bisaiDateList", bisaiDateList);
req.getRequestDispatcher("admin/tongji/tongjiMore.jsp").forward(req, res);
}
// list使用逗号分切
public static String listToString(List<String> stringList) {
if (stringList == null) {
return null;
}
StringBuilder result = new StringBuilder();
boolean flag = false;
for (String string : stringList) {
if (flag) {
result.append(",");
} else {
flag = true;
}
result.append(string);
}
return result.toString();
}
public void dispatch(String targetURI, HttpServletRequest request, HttpServletResponse response) {
RequestDispatcher dispatch = getServletContext().getRequestDispatcher(targetURI);
try {
dispatch.forward(request, response);
return;
} catch (ServletException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
public void init(ServletConfig config) throws ServletException {
super.init(config);
}
public void destroy() {
}
}
5、前端代码示例
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ page isELIgnored="false"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3" />
<meta http-equiv="description" content="This is my page" />
<script type="text/javascript"
src="<%=path%>/My97DatePicker/WdatePicker.js"></script>
<script src="<%=path%>/js/echarts.common.min.js"></script>
<link rel="stylesheet" type="text/css" href="<%=path%>/css/base.css" />
<script type="text/javascript" src="<%=path %>/My97DatePicker/WdatePicker.js"></script>
</head>
<body leftmargin="2" topmargin="2"
background='<%=path%>/images/allbg.gif'>
<form action="<%=path%>/tongji?type=tongjiMore" name="formAdd"
method="post">
赛季比赛日期范围:
开始<input name="bisaidateinfo1" readonly="readonly" class="Wdate" type="text" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd'})"/>
结束<input name="bisaidateinfo2" readonly="readonly" class="Wdate" type="text" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd'})"/>
<input type="submit"
value="分析" />
</form>
<div id="main" style="width:98%;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart2 = echarts.init(document.getElementById('main'));
option2 = {
title : {
text : " 赛季数据图"
},
tooltip : {
trigger : 'axis',
axisPointer : {
type : 'cross',
crossStyle : {
color : '#999'
}
},
textStyle : {
align : 'right'
}
},
toolbox : {
feature : {
dataView : {
show : true,
readOnly : false
},
magicType : {
show : true,
type : [ 'line', 'bar' ]
},
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},
legend : {
data : [ '进球','传球','助攻','射门','过人','失误','抢断','拦截','越位','犯规','跑动','首发' ]
},
yAxis : [
{
type : 'value',
name : '次数',
axisLabel : {
formatter : '{value} '
}
}
],
xAxis : [
{
type : 'category',
axisPointer : {
type : 'shadow'
}
}
],
series : [
{
name : '进球',
type : 'bar',
itemStyle : {
normal : {
barBorderRadius : 5
}
},
label : {
/*每个柱子上面是有数字显示的，而且数字是有千分位符号的：*/
normal : {
show : true,
position : 'top'
}
},
markLine : {
symbol : 'none',
data : [
{
type : 'average',
name : '平均值'
}
]
}
},
{
name : '传球',
type : 'bar',
itemStyle : {
normal : {
barBorderRadius : 5
}
},
label : {
/*每个柱子上面是有数字显示的，而且数字是有千分位符号的：*/
normal : {
show : true,
position : 'top'
}
},
markLine : {
symbol : 'none',
data : [
{
type : 'average',
name : '平均值'
}
]
}
},
{
name : '助攻',
type : 'bar',
itemStyle : {
normal : {
barBorderRadius : 5
}
},
label : {
/*每个柱子上面是有数字显示的，而且数字是有千分位符号的：*/
normal : {
show : true,
position : 'top'
}
},
markLine : {
symbol : 'none',
data : [
{
type : 'average',
name : '平均值'
}
]
}
},
{
name : '射门',
type : 'bar',
itemStyle : {
normal : {
barBorderRadius : 5
}
},
label : {
/*每个柱子上面是有数字显示的，而且数字是有千分位符号的：*/
normal : {
show : true,
position : 'top'
}
},
markLine : {
symbol : 'none',
data : [
{
type : 'average',
name : '平均值'
}
]
}
},
{
name : '过人',
type : 'bar',
itemStyle : {
normal : {
barBorderRadius : 5
}
},
label : {
/*每个柱子上面是有数字显示的，而且数字是有千分位符号的：*/
normal : {
show : true,
position : 'top'
}
},
markLine : {
symbol : 'none',
data : [
{
type : 'average',
name : '平均值'
}
]
}
},
{
name : '失误',
type : 'bar',
itemStyle : {
normal : {
barBorderRadius : 5
}
},
label : {
/*每个柱子上面是有数字显示的，而且数字是有千分位符号的：*/
normal : {
show : true,
position : 'top'
}
},
markLine : {
symbol : 'none',
data : [
{
type : 'average',
name : '平均值'
}
]
}
},
{
name : '抢断',
type : 'bar',
itemStyle : {
normal : {
barBorderRadius : 5
}
},
label : {
/*每个柱子上面是有数字显示的，而且数字是有千分位符号的：*/
normal : {
show : true,
position : 'top'
}
},
markLine : {
symbol : 'none',
data : [
{
type : 'average',
name : '平均值'
}
]
}
},
{
name : '拦截',
type : 'bar',
itemStyle : {
normal : {
barBorderRadius : 5
}
},
label : {
/*每个柱子上面是有数字显示的，而且数字是有千分位符号的：*/
normal : {
show : true,
position : 'top'
}
},
markLine : {
symbol : 'none',
data : [
{
type : 'average',
name : '平均值'
}
]
}
},{
name : '越位',
type : 'bar',
itemStyle : {
normal : {
barBorderRadius : 5
}
},
label : {
/*每个柱子上面是有数字显示的，而且数字是有千分位符号的：*/
normal : {
show : true,
position : 'top'
}
},
markLine : {
symbol : 'none',
data : [
{
type : 'average',
name : '平均值'
}
]
}
},
{
name : '犯规',
type : 'bar',
itemStyle : {
normal : {
barBorderRadius : 5
}
},
label : {
/*每个柱子上面是有数字显示的，而且数字是有千分位符号的：*/
normal : {
show : true,
position : 'top'
}
},
markLine : {
symbol : 'none',
data : [
{
type : 'average',
name : '平均值'
}
]
}
},
{
name : '跑动',
type : 'bar',
itemStyle : {
normal : {
barBorderRadius : 5
}
},
label : {
/*每个柱子上面是有数字显示的，而且数字是有千分位符号的：*/
normal : {
show : true,
position : 'top'
}
},
markLine : {
symbol : 'none',
data : [
{
type : 'average',
name : '平均值'
}
]
}
},
{
name : '首发',
type : 'bar',
itemStyle : {
normal : {
barBorderRadius : 5
}
},
label : {
/*每个柱子上面是有数字显示的，而且数字是有千分位符号的：*/
normal : {
show : true,
position : 'top'
}
},
markLine : {
symbol : 'none',
data : [
{
type : 'average',
name : '平均值'
}
]
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart2.setOption(option2);
myChart2.setOption({
title: {text: '${requestScope.bisaidateinfo} 赛季数据分析'},
xAxis : [
{
data : ${requestScope.qiyuanList}
}
],
series : [
{
data : ${requestScope.gradesList}
},
{
data : ${requestScope.chuanqiuList}
},
{
data : ${requestScope.zhugongList}
},
{
data : ${requestScope.shemenList}
},
{
data : ${requestScope.guorenList}
},
{
data : ${requestScope.shiwuList}
},
{
data : ${requestScope.qiangduanList}
},
{
data : ${requestScope.lanjieList}
},
{
data : ${requestScope.yueweiList}
},
{
data : ${requestScope.fanguiList}
},
{
data : ${requestScope.juliList}
},
{
data : ${requestScope.shoufaList}
}
]
});
</script>
</body>
</html>
5129
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
