Echarts 多种分类统计

最新推荐文章于 2025-06-17 22:50:31 发布

原创最新推荐文章于 2025-06-17 22:50:31 发布 · 4.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Echarts 统计图

java 开发专栏收录该内容

16 篇文章

订阅专栏

一、将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;
	}

五、界面展示如图