echarts 3d饼图_百度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} 
{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;}