一、功能描述
本篇博客要實現對項目中所涉及到的參與5個培訓項目人數和人次信息，將該信息進行Echarts數據展示。
思路如下：首先通過SQL語句查詢出一共有幾個培訓類型用作Echarts的橫座標展示，將查詢到的培訓類型採用一個ArrayList數組進行存放，然後通過SQL語句將培訓類型作爲參數查找培訓人數信息和培訓人次信息。
該項目中涉及到5個培訓類型，因此，會對應5個項目的培訓人數信息和培訓人次信息。通過ArrayList數組存儲查詢到的5個項目培訓人次信息，同理，用另一個ArrayList數組存儲參與5個項目的人次信息。
最後構建HashMap將上述三個ArrayList存放進去。
二、數據庫數據信息
//查詢所有的培訓類型
select distinct (traintype) as traintype from v_all
//查詢參與各個培訓類型的人數信息
SELECT count(*) as traintypeNumber,traintype from v_all group by traintype
//查詢參與各個培訓類型的人次信息
select count(distinct teacherNo) as traintypePeopleTime,traintype from v_all group by traintype上述查詢語句的結果如下所示：
數據庫信息如下所示：
三、Java後臺代碼如下
//mapper層代碼
@Select("select distinct (traintype) as traintype from v_all")
public List<All> getCountTraintype();
@Select("select count(*) as traintypePeopleNumber from v_all where traintype= #{traintype}")
public int getCountTraintypePeopleNumber(@Param( "traintype" ) String traintype);
@Select("select count(distinct teacherNo) as traintypePeopleTime from v_all where traintype= #{traintype}")
public int getCountTraintypePeopleTime(@Param( "traintype" ) String traintype);
//service層代碼
public List<All> getCountTraintype(){
return integratedQueryMapper.getCountTraintype();
}
public int getCountTraintypePeopleNumber(String traintype){
return integratedQueryMapper.getCountTraintypePeopleNumber(traintype);
}
public int getCountTraintypePeopleTime(String traintype){
return integratedQueryMapper.getCountTraintypePeopleTime(traintype);
}
//controller層代碼
/**
* @Author WilsonM
* @Description 統計項目的人數信息和人次信息
* 採用ArrayList進行存儲，最後將所有信息同意存儲在HashMap中
* @Date 17:21 2018/8/20
* @Param [session, request]
* @return java.util.Map
**/
@RequestMapping(value = "/getTrainTypeNumberTime",method = {RequestMethod.GET, RequestMethod.POST})
@ResponseBody
public Map getTrainTypeNumberTime(HttpSession session,HttpServletRequest request){
List<All> getCountTraintype=integratedQueryService.getCountTraintype(); //獲取全部的培訓名稱
List getCountTraintypeList=new ArrayList(); //創建List存放全部的培訓類型
for(int j=0;j<getCountTraintype.size();j++){
getCountTraintypeList.add(getCountTraintype.get(j).traintype); //List存放每個培訓名稱
}
int getCountTraintypeNumer[]=new int[getCountTraintype.size()]; //創建數組存放每個培訓的人數信息
List getCountTraintypeNumerList=new ArrayList(); //存放每個培訓的人數
for(int i=0;i<getCountTraintype.size();i++){
getCountTraintypeNumer[i]=integratedQueryService.getCountTraintypePeopleNumber(getCountTraintype.get(i).traintype);
//getCountTraintype.get(i).traintypename獲取某個培訓名稱，作爲參數查詢培訓的人數
getCountTraintypeNumerList.add(getCountTraintypeNumer[i]);//將每個培訓的人數放入培訓人數List中
}
int getCountTraintypetime[]=new int[getCountTraintype.size()]; //創建數組存放每個培訓的人次信息(去除重複的人)
List getCountTraintypeTimeList=new ArrayList(); //存放每個培訓的人次數目
for(int i=0;i<getCountTraintype.size();i++){
getCountTraintypetime[i]=integratedQueryService.getCountTraintypePeopleTime(getCountTraintype.get(i).traintype);
//getCountTraintypetime.get(i).traintypename獲取某個培訓名稱，作爲參數查詢培訓的人次數目
getCountTraintypeTimeList.add(getCountTraintypetime[i]);//將每個培訓的人數放入培訓人次數目List中
}
Map resultMap=new HashMap();
resultMap.put("getCountTraintypeList",getCountTraintypeList);
resultMap.put("getCountTraintypeNumerList",getCountTraintypeNumerList);
resultMap.put("getCountTraintypeTimeList",getCountTraintypeTimeList);
return resultMap;
}四、前臺數據獲取+bug調試
如果用上述代碼alert(res.getCountTraintypeList(j)),則將報錯，通過上述信息可以看到，數據信息爲數組，alert(res.getCountTraintypeList[j]),應該用[]而不是()。
如果採用以上代碼，因爲res中存在3個對象，直接使用res是無法進行成功打印的。
如果採用以上代碼，將會看到以下結果，每個數組中的元素重複了5份
綜上所述，js代碼應爲如下所示：
$.ajax({
url: "/getTrainTypeNumberTime",
type: "post",
datatype: "json",
success: function (res) {
var getCountTraintype=[];
var getCountTraintypeNumer=[];
var getCountTraintypeTime=[];
for(var j in res.getCountTraintypeList){
getCountTraintype.push(res.getCountTraintypeList);
getCountTraintypeNumer.push(res.getCountTraintypeNumerList);
getCountTraintypeTime.push(res.getCountTraintypeTimeList);
}
}
}) 上述的3個數組中存放的元素分別爲第二節中數據庫中查找的數據，如下圖所示：
由上圖可以看出，數組中存儲的元素在Echarts展示中數據格式是不對的，需要做以下改變：
$.ajax({
url: "/getTrainTypeNumberTime",
type: "post",
datatype: "json",
success: function (res) {
var getCountTraintype=[];
var getCountTraintypeNumer=[];
var getCountTraintypeTime=[];
for(var i in res.getCountTraintypeList){
getCountTraintype.push(res.getCountTraintypeList[i]);
getCountTraintypeNumer.push(res.getCountTraintypeNumerList[i]);
getCountTraintypeTime.push(res.getCountTraintypeTimeList[i]);
}
}
}) 經過上述代碼後，數組中的數據格式如下所示：
五、Echarts數據展示
Echarts代碼如下，前提記得引入Echarts的js文件。
<div id="main" style="height: 80%;width:84%"></div>
$(function () {
var myChart = echarts.init(document.getElementById('main'));
$.ajax({
url: "/getTrainTypeNumberTime",
type: "post",
datatype: "json",
success: function (res) {
var getCountTraintype=[];
var getCountTraintypeNumer=[];
var getCountTraintypeTime=[];
for(var i in res.getCountTraintypeList){
getCountTraintype.push(res.getCountTraintypeList[i]);
getCountTraintypeNumer.push(res.getCountTraintypeNumerList[i]);
getCountTraintypeTime.push(res.getCountTraintypeTimeList[i]);
}
myChart.setOption({
title: {
text: '培訓類新信息統計展示',
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['人數統計','人次統計']
},
toolbox: {
show: true,
feature: {
saveAsImage: {},
dataView: {readOnly: false},
magicType: {type: ['line', 'bar']},
restore: {},
}
},
xAxis: {
type: 'category',
name: '培訓類型',
data: getCountTraintype
},
yAxis: {
type: 'value',
name: '人次',
min: 0,
},
series: [
{
name:'人數統計',
type:'line',
data:getCountTraintypeNumer,
},
{
name:'人次統計',
type:'line',
data:getCountTraintypeTime,
markPoint: {
},
}
],
});
}
})
})效果截圖如下所示：
