easyUI显示echarts

淩亂°似流年 2023-10-17 16:49 7阅读 0赞

easyUi加载echarts图表：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    	<head>
    		    <title>日统计分析</title>
    		<%@ include file="/WEB-INF/views/include/easyui.jsp"%>
    		<%@ include file="/WEB-INF/views/include/kindeditor.jsp"%>
    		    <script charset="utf-8" src="${ctx}/static/plugins/kindeditor/plugins/insertfile/excelin.js"></script>
    		<script type="text/javascript" src="${ctx}/static/model/js/comm/echart/echarts.js"></script>
    		 
    	</head>
    	<body class="easyui-layout" style="font-family: '微软雅黑'">
    		  <form id="leftsearchFrom" action="">
    			    <div data-options="region:'center',split:true,border:false,title:'数据展示'">
    				    <div id="tb" style="padding:5px;height:auto">
    					    <div>
    						
    						
    						       <input id="MonthTime" editable="false" name="MonthTime" value="${obj.m1 }" class="easyui-datebox"   style="width: 172px"
    						 data-options="required:true,prompt: '年月'" />
    						        <span class="toolbar-item dialog-tool-separator"></span>
    						        <a href="javascript(0)" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="devicecx()">查询</a>
    						        <span class="toolbar-item dialog-tool-separator"></span>
    						        <a href="javascript(0)" class="easyui-linkbutton" iconCls="icon-delete" plain="true" onclick="deviceclear()">重置查询条件</a>
    						    </div>
    				</div>
    				<table id="dg">
    					  <div id="mainbars" style="height:400px"></div>
    				</table>
    				   
    			</div>   
    			  </form>  
    		<script type="text/javascript">
    			var axisData = []; //x轴数据
    			var seriesData = []; //y轴数据
    			var daytitle = ""; //标题
    			var MonthTime; //用户输入时间
    
    
    			$(function() {
    				daytitle = new Date().toISOString().substring(0, 7); //获取标题
    				daytitle1 = new Date().toISOString().substring(0, 7); //获取标题
    				MonthTime = $("#MonthTime").datebox("getValue");
    				getMonAjaxData(MonthTime);
    				setMonth();
    			});
    
    
    			function setMonth() {
    				$('#MonthTime').datebox({
    					//显示日趋选择对象后再触发弹出月份层的事件，初始化时没有生成月份层
    					onShowPanel: function() {
    						//触发click事件弹出月份层
    						span.trigger('click');
    						if (!tds)
    							//延时触发获取月份对象，因为上面的事件触发和对象生成有时间间隔
    							setTimeout(function() {
    								tds = p.find('div.calendar-menu-month-inner');
    								tds.click(function(e) {
    
    									//禁止冒泡执行easyui给月份绑定的事件
    									e.stopPropagation();
    									//得到年份
    									var year = /\d{4}/.exec(span.html())[0];
    									//月份
    									//之前是这样的month = parseInt($(this).attr('abbr'), 10) + 1; 
    									//                     var month = parseInt(p.find('td.calendar-selected').attr('abbr'), 10); 
    									var month = parseInt(p.find('td.calendar-menu-month.calendar-selected').attr('abbr'), 10);
    									//tdmonth = p.find('td.calendar-selected').attr('abbr'); 
    									//alert(tdmonth);
    									//calendar-selected
    									//隐藏日期对象                     
    									$('#MonthTime').datebox('hidePanel')
    										//设置日期的值
    										.datebox('setValue', year + '-' + month);
    								});
    							}, 0);
    					},
    					//配置parser，返回选择的日期
    					parser: function(s) {
    						if (!s) return new Date();
    						var arr = s.split('-');
    						return new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, 1);
    					},
    					//配置formatter，只返回年月 之前是这样的d.getFullYear() + '-' +(d.getMonth()); 
    					formatter: function(d) {
    
    						var currentMonth = (d.getMonth() + 1);
    						var currentMonthStr = currentMonth < 10 ? ('0' + currentMonth) : (currentMonth + '');
    						return d.getFullYear() + '-' + currentMonthStr;
    					}
    				});
    
    
    
    
    				//日期选择对象
    				var p = $('#MonthTime').datebox('panel'),
    					//日期选择对象中月份
    					tds = false,
    					//显示月份层的触发控件
    					span = p.find('div.calendar-title span');
    				var curr_time = new Date();
    
    				//设置前当月
    				$("#MonthTime").datebox("setValue", myformatter(curr_time));
    			}
    			//格式化日期
    			function myformatter(date) {
    				//获取年份
    				var y = date.getFullYear();
    				//获取月份
    				var m = date.getMonth() + 1;
    				return y + '-' + m;
    			}
    
    
    
    			function getMonAjaxData(MonthTime) {
    				$.ajax({
    					type: "post",
    					async: true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
    					url: '${ctx}/modelcare/monthalarmsta/list',
    					data: {
    						"MonthTime": MonthTime
    					},
    					dataType: "json", //返回数据形式为json
    					success: function(result) {
    						// alert(JSON.stringify(result));
    						if (result.rows != "") {
    							if (result) {
    								$(result.rows).each(function(i, element) {
    									axisData.push("" + element.SerialNumber);
    								});
    								$(result.rows).each(function(i, element) {
    									seriesData.push(element.monthcon);
    								});
    								if (MonthTime == "") {
    									daytitle = new Date().toISOString().substring(0, 7); //获取标题
    								} else {
    									daytitle = MonthTime;
    								}
    								getEcharts(axisData, seriesData, daytitle);
    							}
    
    						} else {
    							$.ajax({
    								type: "post",
    								async: true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
    								url: '${ctx}/modelcare/dayalarmsta/listnull', //请求发送到TestServlet处
    								data: {},
    								dataType: "json", //返回数据形式为json
    								success: function(backdata) {
    									if (backdata) {
    										if (MonthTime == "") {
    											daytitle = new Date().toISOString().substring(0, 7); //获取标题
    										} else {
    											daytitle = MonthTime;
    										}
    										$(backdata.rows).each(function(i, element) {
    											axisData.push("" + element.SerialNumber);
    											seriesData.push(0);
    										});
    										getEcharts(axisData, seriesData, daytitle);
    									}
    
    								},
    								error: function(msg) {
    									alert(msg);
    								}
    							});
    						}
    
    					}
    					/* ,beforeSend: function(){
    					$('#mainbars').text('正在加载中...请稍后！');
    					} */
    				});
    			}
    
    			function getEcharts(axisData, seriesData, daytitle) {
    				require.config({
    					paths: {
    						echarts: '${ctx}/static/model/js/comm/echart'
    					}
    				});
    
    				// 使用
    				require(
    					[
    						'echarts',
    						'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
    						'echarts/chart/line'
    					],
    					function(ec) {
    						// 基于准备好的dom，初始化echarts图表
    						var myChart = ec.init(document.getElementById('mainbars'));
    
    						option = {
    							title: {
    								text: '' + daytitle + '月统计各仪器的报警次数',
    								subtext: '报警次数'
    							},
    							tooltip: {
    								trigger: 'axis'
    							},
    							legend: {
    								data: ['报警次数']
    							},
    							toolbox: {
    								show: true,
    								feature: {
    									mark: {
    										show: true
    									},
    									dataView: {
    										show: true,
    										readOnly: false
    									},
    									magicType: {
    										show: true,
    										type: ['line', 'bar']
    									},
    									restore: {
    										show: true
    									},
    									saveAsImage: {
    										show: true
    									}
    								}
    							},
    							calculable: true,
    							grid: {
    								y2: 140
    							},
    							xAxis: [{
    								type: 'category',
    								axisLabel: {
    									interval: 0, //横轴信息全部显示  
    									rotate: -30, //-30度角倾斜显示  
    								},
    								data: axisData
    							}],
    							yAxis: [{
    								type: 'value'
    							}],
    							series: [{
    								name: '报警次数',
    								type: 'bar',
    								data: seriesData,
    								barWidth: 30,
    								itemStyle: {
    									normal: {
    										color: '#4ad2ff' //月色
    									}
    								},
    							}]
    						};
    
    						myChart.setOption(option);
    					}
    				);
    			}
    
    			//查询
    			function devicecx() {
    				//查询前清空数据
    				axisData = []; //x轴数据
    				seriesData = []; //y轴数据
    
    
    				MonthTime = $("#MonthTime").datebox("getValue");
    				if (MonthTime == "") {
    					parent.$.messager.show({
    						title: "提示",
    						msg: "请输入查询的时间！",
    						position: "bottomRight"
    					});
    					return;
    				}
    				if (MonthTime > daytitle1) {
    					parent.$.messager.show({
    						title: "提示",
    						msg: "不能大于当前时间！",
    						position: "bottomRight"
    					});
    					return;
    				}
    				getMonAjaxData(MonthTime);
    			}
    
    
    			function deviceclear() {
    				$("#leftsearchFrom").form("clear");
    				axisData = []; //x轴数据
    				seriesData = []; //y轴数据
    				window.location.reload(); //重置时刷新当前页
    			}
    		</script>
    	</body>
    </html>