由于我的项目中只用到了柱形图和扇形图，所以这里就介绍这两种吧。
柱形图
前端代码
<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<title>需求看板</title>
<div th:include="include :: footer"></div>
<script type="text/javascript" src="/js/appjs/test_processing/echarts/dist/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 100%;height:90%;"></div>
<script type="text/javascript">
$(document).ready(function(){
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
//数据加载完之前先显示一段简单的loading动画
myChart.showLoading();
$.ajax({
type : "post",
async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url : "/echarts/requireViewChart", //请求发送到dataActiont处
dataType : "json", //返回数据形式为json
success : function(result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (result.code === 0) {
myChart.hideLoading(); //隐藏加载动画
console.log(result.data.mapList);
console.log(result.data.dataList);
console.log(result.product);
var seriesData =[];
for(var j=0;j<result.product.length;j++){
seriesData.push({
type: 'bar',
name: result.product[j],
data: result.data.dataList[j]
})
}
myChart.setOption({
//加载数据图表
legend: {
},
tooltip : {
},
title: {
text: '需求分配情况'
},
dataset: {
},
xAxis: {
type: 'category',
name: '业务需求名称',
axisLabel: {
interval: 0,
rotate: 20
},
splitLine: {
show: false
},
data : result.data.mapList
},
yAxis: {
},
series: seriesData
});
}else {
alert(result.msg);
window.close();
}
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
});//end ajax
});
</script>
</body>
</html>
后端封装的返回对象
package com.yangyt.process_control.entity;
import lombok.AllArgsConstructor;
import lombok.Data;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
@Data
@AllArgsConstructor
public class RequireResult<T> implements Serializable {
private static final long serialVersionUID = 1L;
//状态码
private int code;
//状态信息
private String msg;
//返回的数据
private T data;
//这里是因为我的柱形图是有根据不同情况的计数的子列，而这些名称是固定的，就在这写死了
private List<String> product;
public RequireResult(){
product = new ArrayList<>();
this.product.add("功能需求数");
this.product.add("已确认");
this.product.add("未确认");
this.product.add("挂起");
this.product.add("已确认/已分配");
this.product.add("已确认/未分配");
}
public RequireResult(int code, String msg){
this.code = code;
this.msg = msg;
}
public RequireResult(int code, String msg, T data){
this();
this.code = code;
this.msg = msg;
this.data = data;
}
}
Controller层
@RequestMapping("/requireViewChart")
@ResponseBody
RequireResult<Map<String,Object>> requireViewChart(){
try{
return new RequireResult<>(0,"加载成功",requireService.countView());
}catch (Exception e){
e.printStackTrace();
return new RequireResult<>(1,"加载失败");
}
}
service层
service层代码有些不是很雅观，，而且sql的查询显得有些笨拙，这里后期可能会使用设计模式以及sql 的union查询进行优化，暂且这样通俗易懂的瞅瞅吧。。
@Override
public Map<String,Object> countView() {
Map<String,Object> map = new HashMap<>();
//mapList存储横轴需要显示的字段名称
List<String> mapList = requireDao.getBusinessRequireName();
//下面这几个分别存储前面product对应的状态的查询结果,这里其实可以直接查出来统计计数的结果，但是如果少了case_id的结果咧，就会出问题，所以下面又使用for循环取了一下，代码看着着实优点不堪入目，暂且先这样吧
List<Map<String,Object>> functionRequireList = requireDao.count0();
List<Map<String,Object>> submittedList = requireDao.count1();
List<Map<String,Object>> ubSubmittedList = requireDao.count2();
List<Map<String,Object>> hangUppedList = requireDao.count3();
List<Map<String,Object>> assignedList = requireDao.count4();
List<Map<String,Object>> unAssignedList = requireDao.count5();
List<Long> caseList_1 = new ArrayList<>();
List<Long> caseList_2 = new ArrayList<>();
List<Long> caseList_3 = new ArrayList<>();
List<Long> caseList_4 = new ArrayList<>();
List<Long> caseList_5 = new ArrayList<>();
List<Long> caseList_6 = new ArrayList<>();
for(int i=0;i<functionRequireList.size();i++){
caseList_1.add((Long) functionRequireList.get(i).get("SUM"));
caseList_2.add((Long) submittedList.get(i).get("SUM"));
caseList_3.add((Long) ubSubmittedList.get(i).get("SUM"));
caseList_4.add((Long) hangUppedList.get(i).get("SUM"));
caseList_5.add((Long) assignedList.get(i).get("SUM"));
caseList_6.add((Long) unAssignedList.get(i).get("SUM"));
}
//将这些结果进行封装,以便前端使用for循环遍历
List<List<Long>> list = new ArrayList<>();
list.add(caseList_1);
list.add(caseList_2);
list.add(caseList_3);
list.add(caseList_4);
list.add(caseList_5);
list.add(caseList_6);
map.put("mapList",mapList);
map.put("dataList",list);
return map;
}
mybatis
其他的都差不多
<select id="count1" resultType="java.util.Map">
SELECT DISTINCT m.require_id as requireId,IFNULL(s.sum, 0) AS SUM FROM function_require AS m
LEFT JOIN
(SELECT require_id,COUNT(1) AS sum FROM function_require WHERE submit_state='0' GROUP BY require_id) AS s
ON m.require_id = s.require_id;
</select>
注意：mysql这里进行查询的时候，如果分组查询统计结果为0的时候是不会显示的，所以这里做了处理。
扇形图
前端代码
<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<title>需求分配情况</title>
<div th:include="include :: footer"></div>
<script type="text/javascript" src="/js/appjs/test_processing/echarts/dist/echarts.js"></script>
</head>
<body>
<div id="main" style="width: 100%;height:100%;"></div>
<script type="text/javascript">
$(document).ready(function(){
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
//数据加载完之前先显示一段简单的loading动画
myChart.showLoading();
var names=[]; //横坐标数组（实际用来盛放X轴坐标值）
var values=[]; //纵坐标数组（实际用来盛放Y坐标值）
$.ajax({
type : "post",
async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url : "/echarts/requireAssignViewChart", //请求发送到dataActiont处
dataType : "json", //返回数据形式为json
success : function(result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (result.code === 0) {
myChart.hideLoading(); //隐藏加载动画
for(var i=0;i<result.data.length;i++){
names.push(result.data[i].staff);
values.push(result.data[i].count);
}
var data = [];
for(var i=0;i<names.length;i++){
data.push({
value:values[i],
name:names[i]
})
}
myChart.setOption({
//加载数据图表
title: {
text: '功能需求分配情况',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
},
series: [
{
name: '测试人员',
type: 'pie',
radius: '50%',
data: data,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
label : {
normal : {
formatter: '{b}({d}%)',
textStyle : {
fontWeight : 'normal',
fontSize : 15
}
}
},
}
]
});
}else {
alert(result.msg);
window.close();
}
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
});//end ajax
});
</script>
</body>
</html>
封装的返回结果
Result
package com.yangyt.process_control.entity;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.io.Serializable;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Result<T> implements Serializable {
private static final long serialVersionUID = 1L;
private int code;
private String msg;
private T data;
public Result(int code,String msg){
this.code = code;
this.msg = msg;
}
}
EchartRequireAssign
package com.yangyt.process_control.entity;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.io.Serializable;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class EchartRequireAssign implements Serializable {
private static final long serialVersionUID = 1L;
private String staff;
private Long count;
}
controller层
@RequestMapping("/requireAssignViewChart")
@ResponseBody
Result<List<EchartRequireAssign>> requireAssignViewChart(){
try{
return new Result<>(0,"加载成功",requireService.countAssign());
}catch (Exception e){
e.printStackTrace();
return new Result<>(1,"加载失败");
}
}
service层
@Override
public List<EchartRequireAssign> countAssign() {
List<Map<String,Object>> list = requireDao.countAssign();
List<EchartRequireAssign> assigns = new ArrayList<>();
for (Map<String, Object> map : list) {
StaffDO staffDO = staffDao.get((Long) map.get("testStaff"));
EchartRequireAssign echartRequireAssign = new EchartRequireAssign();
echartRequireAssign.setStaff(staffDO.getStaffName()+"-"+staffDO.getPhone());
echartRequireAssign.setCount((Long) map.get("count"));
assigns.add(echartRequireAssign);
}
return assigns;
}
mybatis
<select id="countAssign" resultType="java.util.Map">
select (
SELECT staff_id from staff where staff_id = test_principal
) testStaff,
count(1) count
from function_require
GROUP BY test_principal
HAVING test_principal is not null;
</select>
ok 完结。