jsp加载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;}