百度echarts使用

百度echarts,將數據以圖表方式展示：

 

var startDate;
var endDate;
$(document).ready(function() {
	startDate = $("#txtStartDate").val(); //開始時間
	endDate = $("#txtEndDate").val(); //結束時間
	initFormatDate(); //初始化時間格式
	initData(); //初始化數據
});

/**
 * 初始化數據
 * @returns
 */
function initData() {
	$("#loaddataview").show(); //顯示加載中動畫
	
	getChartsLine(startDate, endDate, '報價', '查詢數據條件', 'jsp_view_line');//異步請求後臺對應數據_折線
	getChartsPie(startDate, endDate, '報價', '查詢數據條件', 'jsp_view_pie');//異步請求後臺對應數據_餅圖

	$("#loaddataview").hide(); //隱藏加載中動畫
}

/**
 * 請求後臺對應數據_折線
 * @param startDate 開始時間
 * @param endDate   結束時間 
 * @param chaTitle  圖表名稱 
 * @param taskType  請求類型
 * @param viewId    存放位置
 * @returns
 */
function getChartsLine(startDate, endDate, chaTitle, taskType, viewId) {
	var postData = {
		startDate: startDate,
		endDate: endDate,
		taskType: taskType
	};
	$.ajax({
		type: "post",
		url: "xxxxxxxxxxx.do",
		data: postData,
		success: function(res) {

			if(res == "") {
				alert("當前無數據！");
				return false;
			}

			initCharline(res, chaTitle, viewId); //裝載折線圖數據
		}
	})
}

/**
 * 請求後臺對應數據_餅圖
 * @param startDate 開始時間
 * @param endDate   結束時間 
 * @param chaTitle  圖表名稱 
 * @param taskType  請求類型
 * @param viewId    存放位置
 * @returns
 */
function getChartsPie(startDate, endDate, chaTitle, taskType, viewId) {
	var postData = {
		startDate: startDate,
		endDate: endDate,
		taskType: taskType
	};
	$.ajax({
		type: "post",
		url: "xxxxxxxxx.do?actionType=search",
		data: postData,
		success: function(res) {

			if(res == "") {
				alert("當前無數據！");
				return false;
			}

			initCharPie(startDate, endDate, res, chaTitle, viewId, taskType); //裝載餅圖數據
		}
	})
}

/**
 * 裝載折線圖數據
 * @param dataList 圖表中數據集
 * @param chaTitle 圖表標題內容
 * @param viewId   圖表顯示位置
 * @returns
 */
function initCharline(dataList, chaTitle, viewId) {
	var monitorLineInfoCharts;
	var countMonitor = []; //監控總數					
	var countNormal = []; //正常
	var countError = []; //異常
	var monitorDate = []; //時間線

	if(dataList != null && dataList != "") {
		$(dataList).each(function(index, domEle) {
			countMonitor.push(domEle.totalNumber);
			countNormal.push(parseInt(domEle.totalNumber) - parseInt(domEle.abnormalNumber));
			countError.push(domEle.abnormalNumber);
			monitorDate.push(domEle.createdDate.substring(0, 10));
		});
	}

	option = {
		title: {
			text: chaTitle + '數據彙總'
		},
		tooltip: {
			trigger: 'axis'
		},
		color: ["#61a0a8", "#2f4554", "#c23531"],
		legend: {
			data: ['總數', '正常', '異常']
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		toolbox: {
			feature: {
				magicType: {
					type: ['line', 'bar'] //圖表切換方式
				},
				saveAsImage: {}
			}
		},
		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: monitorDate
			/*,axisLabel: {  //時間線傾斜
	            interval:0,  
	            rotate:40  
	         }*/
		},
		yAxis: {
			type: 'value'
		},
		series: [{
				name: '總數',
				type: 'line',
				lineStyle: {
					normal: {
						color: '#61a0a8',
						//width:1// 線寬度
					}
				},
				data: countMonitor,
				markPoint: {
					data: [{
							type: 'max',
							name: '最大值'
						},
						{
							type: 'min',
							name: '最小值'
						}
					]
				},
				markLine: {
					data: [{
						type: 'average',
						name: '平均值'
					}]
				}
			},
			{
				name: '正常',
				type: 'line',
				lineStyle: {
					normal: {
						color: '#2f4554',
						//width:1// 線寬度
					}
				},
				data: countNormal,
				markPoint: {
					data: [{
							type: 'max',
							name: '最大值'
						},
						{
							type: 'min',
							name: '最小值'
						}
					]
				},
				markLine: {
					data: [{
						type: 'average',
						name: '平均值'
					}]
				}
			},
			{
				name: '異常',
				type: 'line',
				lineStyle: {
					normal: {
						color: '#c23531',
						//width:1// 線寬度
					}
				},
				data: countError,
				markPoint: {
					data: [{
							type: 'max',
							name: '最大值'
						},
						{
							type: 'min',
							name: '最小值'
						}
					]
				},
				markLine: {
					data: [{
						type: 'average',
						name: '平均值'
					}]
				}
			}

		]
	};

	monitorLineInfoCharts = echarts.init(document.getElementById(viewId)); //指定圖表顯示位置
	monitorLineInfoCharts.showLoading(); //顯示echarts自帶加載動畫
	monitorLineInfoCharts.hideLoading(); //隱藏echarts自帶加載動畫
	monitorLineInfoCharts.clear(); //清除之前的圖表數據
	monitorLineInfoCharts.setOption(option); //裝載新數據
	window.onresize = function() {
		monitorLineInfoCharts.resize(); //調整屏幕大小展示
	};
}

/**
 * 初始化餅圖
 * @param startDate TIME-開始時間
 * @param endDate   TIME-結束時間
 * @param dataList  圖表中數據集
 * @param chaTitle  圖表標題內容
 * @param viewId    圖表顯示位置
 * @returns
 */
function initCharPie(startDate, endDate, dataList, chaTitle, viewId, taskType) {
	var monitorPieInfoCharts;
	var msgInfo = []; //異常信息					
	var msgCount = []; //異常條數					

	if(dataList != null && dataList != "") {
		$(dataList).each(function(index, domEle) {
			console.log("errTitle:" + chaTitle + ",errInfo:" + domEle.msgInfo + ",errCount:" + domEle.msgCount);
			var varmsgInfo = domEle.msgInfo;
			//if(varmsgInfo.length>7){
			//	varmsgInfo=varmsgInfo.substring(0,7)+'...';
			//}
			msgInfo.push(varmsgInfo);
			msgCount.push({value: domEle.msgCount,name: varmsgInfo}); //{value: 335, name: '空指針'},//餅圖數據結構
		});
	} else {
		//後臺返回數據爲空時展示
		msgInfo.push("當前數據無異常信息");
		msgCount.push({value: 0,name: "當前數據無異常信息"}); //{value: 335, name: '空指針'},
	}

	option = {
		title: {
			text: chaTitle + '異常',
			subtext: ' TIME ' + startDate.substring(5, 10) + ' ' + endDate.substring(5, 10),
			left: 'center'
		},
		tooltip: {
			trigger: 'item',
			formatter: '{a} <br/>{b} : {c} ({d}%)'
		},
		legend: {
			type: 'scroll',
			orient: 'vertical',
			right: 10,
			top: 20,
			bottom: 20,
			//bottom : -5,
			//left: 'left',
			//padding:[0,300,0,0],//[（距離上方距離），（距離右方距離）、（距離下方距離）、（距離左方距離）]
			data: msgInfo
		},
		//自定義扇形顏色
		color: [ /*'rgb(203,155,255)',*/ 'rgb(149,162,255)', 'rgb(58,186,255)', 'rgb(119,168,249)', 'rgb(235,161,159)'], //五個數據，五個顏色
		series: [{
			name: taskType, //精準定位
			type: 'pie',
			radius: '55%',
			center: ['40%', '50%'],
			data: msgCount,
			emphasis: {
				itemStyle: {
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: 'rgba(0, 0, 0, 0.5)'
				}
			}
		}]
	};

	monitorPieInfoCharts = echarts.init(document.getElementById(viewId)); //指定圖表顯示位置
	monitorPieInfoCharts.showLoading(); //顯示echarts自帶加載動畫
	monitorPieInfoCharts.hideLoading(); //隱藏echarts自帶加載動畫
	monitorPieInfoCharts.clear(); //清除之前的圖表數據
	monitorPieInfoCharts.setOption(option); //裝載新數據
	window.onresize = function() {
		monitorPieInfoCharts.resize(); //調整屏幕大小展示
	};
	monitorPieInfoCharts.on("click", downloadErrMsg);
}

/**
 * 下載異常信息-csv （點擊異常信息時）
 * @param param
 * @returns
 */
function downloadErrMsg(param) {

	var startDate = $("#txtStartDate").val(); //開始時間
	var endDate = $("#txtEndDate").val(); //結束時間
	var errName = param.data.name;
	var taskType = param.seriesName;

	if(errName == "") {
		return false;//無數據直接返回
	}

	if(errName == "" || errName == null || errName == undefined) {
		return false;
	}

	//	window.open這種方式傳輸中文會亂碼  不可取要採用encodeURI(encodeURI(errName)方式   後臺也要做相應處理
	//	String errName = URLDecoder.decode(request.getParameter("errName").trim(), "utf-8");//異常信息//處理window.open中文方式亂碼

	//	var url='downErrMsgByTaskType.do?startDate='+startDate+"&endDate="+endDate+"&taskType="+taskType+"&errName="+errName;//通過類型+異常信息下載  

	var url = 'downErrMsgByTaskType.do?startDate=' + startDate + "&endDate=" + endDate + "&taskType=" + taskType + "&errName=" + encodeURI(encodeURI(errName)); //通過類型+異常信息下載
	window.open(url, 'newWin', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,draggable=false,width=500,height=150');
	//	window.open(url,'_blank');//下載文件
}

/**
 * 下載異常信息方法all or type（右上角下載按鈕）
 * @param dwtype
 * @returns
 */
function downloadAllErrMsg(dwtype) {
	var startDate = $("#txtStartDate").val(); //開始時間
	var endDate = $("#txtEndDate").val(); //結束時間
	var taskType = dwtype;

	var url = ''; //下載請求地址
	if(taskType == "") {
		url = 'xxxdownAllErrMsg.do?startDate=' + startDate + "&endDate=" + endDate; //下載所有
	} else {
		url = 'xxxdownErrMsgByTaskType.do?startDate=' + startDate + "&endDate=" + endDate + "&taskType=" + taskType; //通過類型下載
	}

	window.open(url, 'newWin', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,draggable=false,width=500,height=150');
	//	window.open(url,'_blank');//下載文件

}

/**
 * 日期格式初始化方法 YYYY-MM-DD
 * @returns
 */
function initFormatDate() {
	//設置時間格式
	$("#txtStartDate").datetimepicker({
		format: 'YYYY-MM-DD',
	});
	$("#txtEndDate").datetimepicker({
		format: 'YYYY-MM-DD',
	});
}

/**
 * 搜索按鈕綁定方法
 * @returns
 */
$("#btnSearch").click(function() {
	var startDateStr = $("#txtStartDate").val();
	var endDateStr = $("#txtEndDate").val();
	if(startDateStr == null || startDateStr == "" ||
		endDateStr == null || endDateStr == "") {
		alert("創建時間不能爲空！");
		return;
	}

	var startDate = new Date(startDateStr);
	var endDate = new Date(endDateStr);
	if(startDate > endDate) {
		alert("創建起始時間不能大於截止時間！");
		return;
	}

	var maxDate = new Date();
	if(maxDate < endDate) {
		alert("創建結束時間不能大於今天！");
		return;
	}

	if(WeeksBetw($("#txtStartDate").val(), $("#txtEndDate").val()) > 30) {
		alert("報價時間查詢範圍限制在30天以內，請檢查！");
		return false;
	}

	initData(); //加載echarts數據

});

/**
 * 返回兩個日期相差的天數 
 * @param date1 開始時間
 * @param date2 結束時間
 * @returns
 */
function WeeksBetw(date1, date2) {
	date1 = date1.replace(/-/g, "/");
	date2 = date2.replace(/-/g, "/");
	//這裏的date1、date2爲日期的字符串  
	//將date1,date2轉換爲Date對象  
	var _dt1 = new Date(date1);
	var _dt2 = new Date(date2);
	var dt1 = _dt1.getTime();
	var dt2 = _dt2.getTime();
	return parseInt(Math.abs(dt1 - dt2) / 1000 / 60 / 60 / 24);
}

/**
 * 動態校驗開始時間
 * @returns
 */
function onblurStartDate() {
	var startDateStr = $("#txtStartDate").val();
	var nowDate = new Date().toISOString().substring(0, 10); //當前時間截取操作
	var endDateStr = addDate(startDateStr, 29);

	if(startDateStr >= nowDate) {
		alert("開始時間不能大於等於今天！");
		var endDate = addDate(nowDate, -29);
		$("#txtStartDate").val(endDate);
		return;
	}
	if(endDateStr >= nowDate) {
		$("#txtEndDate").val(nowDate);
		return false;
	}
	$("#txtEndDate").val(endDateStr);
}

/**
 * 動態校驗結束時間
 * @returns
 */
function onblurEndDate() {
	var endDateStr = $("#txtEndDate").val();
	var nowDate = new Date().toISOString().substring(0, 10); //當前時間截取操作

	if(endDateStr > nowDate) {
		alert("結束時間不能大於今天！");
		$("#txtEndDate").val(nowDate);
		var startDate = addDate(nowDate, -29);
		$("#txtStartDate").val(startDate);
		return false;
	}
	var startDateStr = addDate(endDateStr, -29);
	$("#txtStartDate").val(startDateStr);
}

/**
 * 日期加減法 格式:addDate('2017-01-11',20)
 * @param date計算開始的日期
 * @param days需要加的天數 （正數加，負數減）
 * @returns 計算後的時間
 */
function addDate(date, days) {
	var d = new Date(date);
	d.setDate(d.getDate() + parseInt(days));
	var m = d.getMonth() + 1;
	m = parseInt(m) < 10 ? ('0' + m) : m;
	var day = parseInt(d.getDate()) < 10 ? ('0' + d.getDate()) : d.getDate();
	return d.getFullYear() + '-' + m + '-' + day;
}