百度echarts使用javascriptqq36521848的博客-

百度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; }