Echarts 多種分類統計
阿新 • • 發佈：2019-01-06
一、將Echarts.js放到專案當中並在jsp頁面中引用
<!--引入圖示元件-->
<script type="text/javascript" src="${TEMPLATE_BASE_PATH}/js/echarts/echarts.min.js"></script>二、在頁面中建立相應的佈局
<div class="rk_tj"> <div class="rk_tj_title" style="width:100%;"> <h3>數量統計</h3> <div class="rk_cx"> <label>選擇查詢時間：</label> <select id="selTaskStateByTime" onchange="taskStateNumStatistics();"> <option value="taskStateYear" selected="selected">最近一年</option> <option value="taskStateMonth">最近一月</option> </select> <figure><img src="${TEMPLATE_BASE_PATH}/images/zy_btn.png"></figure> <a onclick="taskStateNumStatistics();">重新整理</a> </div> </div> <div id="taskStateChart" class="fz_container" style="width: 100%;height:400px;"> </div> </div>
三、相應的js傳送請求
//成功失敗數量統計 function taskStateNumStatistics() { // 基於準備好的dom，初始化echarts例項 var myChart = echarts.init(document.getElementById('taskStateChart')); // 使用剛指定的配置項和資料顯示圖表。 myChart.setOption({ title: { show: false, text: '數量統計' }, color: ['#25B20A','#C80101'], tooltip : { trigger: 'axis' }, toolbox: { feature: { magicType: {show: true, type: ['line', 'bar']}, restore: {show: true}, saveAsImage: {show: true} } }, grid: { left: '1%', right: '1%', bottom: '1%', containLabel: true } }); myChart.showLoading(); var path = BASE_PATH+ "/getSucAndFailStatistics.json?"; path = path + "taskState="+$("#selTaskStateByTime").val(); $.get(path).done(function (resultVal) { myChart.hideLoading(); // 填入資料 if(!resultVal) { return;}; if(!resultVal.series) { return;}; for(var i=0;i<resultVal.series.length;i++) { resultVal.series[i].type = "bar"; } // 指定圖表的配置項和資料 var option = { legend: { align: 'left', right: 150, top: 3, data:resultVal.legend }, xAxis: { type: 'category', boundaryGap: true, data: resultVal.xAxis }, yAxis : [ { name: '數量', type : 'value' } ], series: resultVal.series }; // 使用剛指定的配置項和資料顯示圖表。 myChart.setOption(option); }); }
四、傳送請求到action
/** * 多種型別的成功失敗的概率統計 * @param modelMap * @param request * @return */ @RequestMapping(value="/getSucAndFailStatistics.json",method=RequestMethod.GET) @ResponseBody public String getSucAndFailStatistics(@RequestParam(value="taskState",defaultValue="taskStateYear") String taskState, ModelMap modelMap,HttpServletRequest request){ try { if("taskStateMonth".equals(taskState)){ Date date = new Date(); DateFormat format = new SimpleDateFormat("yyyy-MM-dd HH"); String time = format.format(date); return statisticsService.getSucAndFailStatisticsByMonth(time); }else{ Date date = new Date(); DateFormat format = new SimpleDateFormat("yyyy-MM-dd"); String time = format.format(date); return statisticsService.getSucAndFailStatisticsByYear(time); } } catch (Exception e) { logger.error(e); } return null; }
/**
* 成功失敗的概率統計
* @param time 最近一年
* @return
*/
public String getSucAndFailStatisticsByYear(String time) throws Exception{
//方法二
String sql = "SELECT TASK_TYPE,DATE_FORMAT(CREATE_TIME,'%Y-%m') MONTHS,SUM(CASE WHEN TASK_STATE=200 THEN 1 ELSE 0 END) NUM_SUCC, "
+" SUM(CASE WHEN TASK_STATE=210 THEN 1 ELSE 0 END) NUM_FAIL "+
" FROM MTC_TASKLOG WHERE TASK_STATE IN (200,210) AND (DATE_FORMAT(CREATE_TIME,'%Y-%m') > DATE_FORMAT(DATE_SUB(CURDATE(), INTERVAL 12 MONTH),'%Y-%m')) GROUP BY TASK_TYPE";
List<DataMap> result = mDao.getSession().load(DataMap.class, sql, 0, 0);
if(result!=null && result.size()>0){
String[] xAxis = new String[result.size()];
int[] succValue = new int[result.size()];
int[] failValue = new int[result.size()];
for (int i = 0; i < result.size(); i++) {
CtrlWord ctrlWord = mtcDao.get(CtrlWord.class, ConditionUtils.equal(CtrlWord.CW_CODE, result.get(i).get("TASK_TYPE")));
xAxis[i] = ctrlWord.getCwName();
succValue[i] = Integer.valueOf(result.get(i).get("NUM_SUCC"));
failValue[i] = Integer.valueOf(result.get(i).get("NUM_FAIL"));
}
//定義成功和失敗的陣列
String[] legend = new String[]{"成功數量","失敗數量"};
Map<String, int[]> series = new HashMap<String, int[]>();
series.put("成功數量", succValue);
series.put("失敗數量", failValue);
JSONObject jo = new JSONObject();
jo.element("xAxis", xAxis);
jo.element("legend", legend);
JSONArray seriesArray = new JSONArray();
for (Map.Entry<String, int[]> entry : series.entrySet()) {
JSONObject itemObject = new JSONObject();
itemObject.element("name", entry.getKey());
itemObject.element("data", entry.getValue());
seriesArray.add(itemObject);
}
jo.element("series", seriesArray);
return jo.toString();
}
return null;
}/**
* 成功失敗的概率統計
* @param time 最近一月
* @return
* @throws Exception
*/
public String getSucAndFailStatisticsByMonth(String time) throws Exception{
/*
//方法一
int cwType = 2301; //任務型別
List<CtrlWord> ctrlWords = mDao.load(CtrlWord.class, null, ConditionUtils.equal(CtrlWord.CW_TYPE, cwType));
if(ctrlWords!=null && ctrlWords.size() >0){
//獲取橫軸為cw_type=2301對應的受控詞名稱
String[] xAxisold = new String[ctrlWords.size()];
int[] succ = new int[ctrlWords.size()];
int[] fail = new int[ctrlWords.size()];
for (int i = 0; i < ctrlWords.size(); i++) {
//task_state = 200 時表示任務釋出成功
xAxisold[i] = ctrlWords.get(i).getCwName();
String sqlsucc = "SELECT TASK_TYPE,COUNT(0) AS NUM_SUCC FROM " + MtcTasklog.TABLE_NAME +" WHERE TASK_STATE=200 AND TASK_TYPE="+ctrlWords.get(i).getCwCode()+" GROUP BY TASK_TYPE ";
List<DataMap> resultSuccVal = mtcDao.getSession().load(DataMap.class, sqlsucc, 0, 0);
if(resultSuccVal!=null && resultSuccVal.size()>0){
for (DataMap rlts : resultSuccVal) {
succ[i] = Integer.valueOf(rlts.get("NUM_SUCC"));
}
}else{
succ[i] = 0;
}
//task_state = 210 時表示任務釋出失敗
String sqlfail = "SELECT TASK_TYPE,COUNT(0) AS NUM_FAIL FROM " + MtcTasklog.TABLE_NAME +" WHERE TASK_STATE=210 AND TASK_TYPE="+ctrlWords.get(i).getCwCode()+" GROUP BY TASK_TYPE ";
List<DataMap> resultFailVal = mtcDao.getSession().load(DataMap.class, sqlfail, 0, 0);
if(resultFailVal!=null && resultFailVal.size()>0){
for (DataMap rltf : resultFailVal) {
fail[i] = Integer.valueOf(rltf.get("NUM_FAIL"));
}
}else{
fail[i] = 0;
}
}
List<String> xAxis = new ArrayList<String>();
List<Integer> succValue = new ArrayList<Integer>();
List<Integer> failValue = new ArrayList<Integer>();
for (int j = 0; j < ctrlWords.size(); j++) {
if(succ[j]+fail[j]>0){
xAxis.add(xAxisold[j]);
succValue.add(succ[j]);
failValue.add(fail[j]);
}
}
//定義成功和失敗的陣列
String[] legend = new String[]{"成功數量","失敗數量"};
Map<String, List<Integer>> series = new HashMap<String, List<Integer>>();
series.put("成功數量", succValue);
series.put("失敗數量", failValue);
JSONObject jo = new JSONObject();
jo.element("xAxis", xAxis);
jo.element("legend", legend);
JSONArray seriesArray = new JSONArray();
for (Map.Entry<String, List<Integer>> entry : series.entrySet()) {
JSONObject itemObject = new JSONObject();
itemObject.element("name", entry.getKey());
itemObject.element("data", entry.getValue());
seriesArray.add(itemObject);
}
jo.element("series", seriesArray);
return jo.toString();
}*/
//方法二
String sql = "SELECT TASK_TYPE,DATE_FORMAT(CREATE_TIME,'%Y-%m-%d') DAYS,SUM(CASE WHEN TASK_STATE=200 THEN 1 ELSE 0 END) NUM_SUCC, "
+" SUM(CASE WHEN TASK_STATE=210 THEN 1 ELSE 0 END) NUM_FAIL "+
" FROM MTC_TASKLOG WHERE TASK_STATE IN (200,210) AND (MONTH (CREATE_TIME) = MONTH (CURDATE()) AND YEAR (CREATE_TIME) = YEAR (CURDATE())) GROUP BY TASK_TYPE";
List<DataMap> result = mDao.getSession().load(DataMap.class, sql, 0, 0);
if(result!=null && result.size()>0){
String[] xAxis = new String[result.size()];
int[] succValue = new int[result.size()];
int[] failValue = new int[result.size()];
for (int i = 0; i < result.size(); i++) {
CtrlWord ctrlWord = mtcDao.get(CtrlWord.class, ConditionUtils.equal(CtrlWord.CW_CODE, result.get(i).get("TASK_TYPE")));
xAxis[i] = ctrlWord.getCwName();
succValue[i] = Integer.valueOf(result.get(i).get("NUM_SUCC"));
failValue[i] = Integer.valueOf(result.get(i).get("NUM_FAIL"));
}
//定義成功和失敗的陣列
String[] legend = new String[]{"成功數量","失敗數量"};
Map<String, int[]> series = new HashMap<String, int[]>();
series.put("成功數量", succValue);
series.put("失敗數量", failValue);
JSONObject jo = new JSONObject();
jo.element("xAxis", xAxis);
jo.element("legend", legend);
JSONArray seriesArray = new JSONArray();
for (Map.Entry<String, int[]> entry : series.entrySet()) {
JSONObject itemObject = new JSONObject();
itemObject.element("name", entry.getKey());
itemObject.element("data", entry.getValue());
seriesArray.add(itemObject);
}
jo.element("series", seriesArray);
return jo.toString();
}
return null;
}五、介面展示如圖