紅色代碼為單位數據代碼，代碼示例：
//自評與考核柱狀圖 checkoption = { /* * title: { text: '自評與考核' }, */ legend : { left : 300, top : -5 }, tooltip : { trigger : 'axis', formatter : function(params) { // 自定義函數修改折線圖給數據加單位 var str = '';// 聲明一個變量用來存儲數據 str += '<div>' + params[0].name + '</div>'; // 顯示日期的函數 for (var i = 0; i < params.length; i++) { // 圖顯示的數據較多時需要循環數據，這樣才可以成功的給多條數據添加單位 if (i === 0) { str += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;"></span>' + params[i].seriesName + '</span> : <span>' + (params[i].data ? params[i].data + '分' : '暫無') + '</br>'; } else { str += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;"></span>' + params[i].seriesName + '</span> : <span>' + (params[i].data ? params[i].data + '分' : '暫無') + '</br>'; } } return str; }, axisPointer : { type : 'cross', crossStyle : { color : '#999' } } }, // 調試圖表距離邊框位置 grid : { x : '1%', // 相當於距離左邊效果:padding-left y : '12%', // 相當於距離上邊效果:padding-top right :'3%', bottom : '10%', containLabel : true }, xAxis : [ { type : 'category', data : [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月' ], axisLabel : { show : true, textStyle : { color : 'black', fontSize : '13' } } } ], yAxis : [ { type : 'value', axisLabel : { show : true, textStyle : { color : 'black', fontSize : '13' } } } ], series : [ { name : '自評', type : 'bar', data : [ EvScores[0], EvScores[1], EvScores[2], EvScores[3], EvScores[4], EvScores[5], EvScores[6], EvScores[7], EvScores[8], EvScores[9], EvScores[10], EvScores[11]], itemStyle : { normal : { color : '#62B62F', barBorderRadius : 5, borderWidth : 0 } }, barWidth : '20%' }, { name : '考核', type : 'bar', data : [ ChScores[0], ChScores[1], ChScores[2], ChScores[3], ChScores[4], ChScores[5], ChScores[6], ChScores[7], ChScores[8],ChScores[9], ChScores[10], ChScores[11]], itemStyle : { normal : { color : '#058088', barBorderRadius : 5, borderWidth : 0 } }, barWidth : '20%' } ] };//ehcart checkChart.setOption(checkoption); 監管系統代碼示例: $(function() { //環形設備統計圖 initEqipmentCase(); //展廳統計初始化 initReception(); //時間選擇框初始化 inittime(); // 信息總覽圖表echart初始化 initchart(); }) //環形設備統計圖 function initEqipmentCase(){ var equipmentChart = echarts.init(document.getElementById('equipment')); // 設備使用情況圓形圖 $.ajax({ url : ftpIp+"/supervise/getEquipmentCase.do?", // 請求的url地址 dataType : "json", // 返回格式為json async : true,// 請求是否異步，默認為異步，這也是ajax重要特性 type : "GET", // 請求方式 success : function(req) { //設備總數 debugger; var count =req.count; //設備使用狀態 var online = req.online; var outline = req.outline; var storage = req.storage; var damage = req.damage; //設備使用百分比 var onPercentage = online/count*100; var onstr = onPercentage.toString(); if(onstr.length>2){ onstr = onstr.substring(0,2); } var outPercentage = outline/count*100; var outstr = outPercentage.toString(); if(outstr.length>2){ outstr = outstr.substring(0,2); } var stPercentage = storage/count*100; var ststr = stPercentage.toString(); if( ststr.length>2){ ststr = ststr.substring(0,2); } var daPercentage = damage/count*100; var dastr = daPercentage.toString(); if(dastr.length>2){ dastr = dastr.substring(0,2); } var equipmentoption = { /* * title: { text: '設備使用情況' }, */ tooltip : { trigger : 'item', formatter :'{a} <br/>{b}: {c}台 ({d}%)' }, legend : { orient : 'vertical', left : 250, top : 75, data : [ '在線 '+online+'台 '+onstr+"%", '離線 '+outline+'台 '+outstr+"%", '損壞 '+damage+'台 '+dastr+"%" , '存儲 '+storage+'台 '+ ststr+"%"] }, series : [ { name : '', type : 'pie', radius : [ '50%', '65%' ],// 圓的大小 center : [ '25%', '50%' ],// 圓的位置，中心點設置 avoidLabelOverlap : false, label : { normal : { show : true, position : 'center', formatter : count+'主機(台)', textStyle : { fontSize : 15, color : 'black' } }, emphasis : { show : true, textStyle : { fontSize : '10', fontWeight : 'bold' } } }, labelLine : { normal : { show : false } }, data : [ { value : 335, name : '在線 '+online+'台 '+onstr+"%", itemStyle : { color : '#FFD39B' } }, { value : 310, name : '離線 '+outline+'台 '+outstr+"%", itemStyle : { color : '#FF7256' } }, { value : 234, name : '損壞 '+damage+'台 '+dastr+"%", itemStyle : { color : '#9AFF9A' } }, { value : 135, name : '存儲 '+storage+'台 '+ ststr+"%", itemStyle : { color : '#63B8FF' } } ] } ] }; // 使用剛指定的配置項和數據顯示圖表。 equipmentChart.setOption(equipmentoption); } }) } function initReception(){ $.ajax({ url : ftpIp+"/supervise/getLevelPerson.do?", // 請求的url地址 dataType : "json", // 返回格式為json async : true,// 請求是否異步，默認為異步，這也是ajax重要特性 type : "GET", // 請求方式 success : function(req) { debugger; //一級接待人數 var aa = req.one; //二級接待人數 var bb = req.two; //三級接待人數 var cc = req.three; //所有接待人數 var all = req.all; //接待場次 var rccount = req.rccount; //展廳設備 var eqcount = req.eqcount; $("#onelevel").html(aa); $("#twolevel").html(bb); $("#threelevel").html(cc); $("#allrecept").html(all); $("#receptnum").html(rccount); $("#allequipment").html(eqcount); } }) } //時間選擇框初始化方法 function inittime(){ $("#selfKHDate").combobox({ panelHeight: 'auto', valueField:'selfKHDate', textField:'selfKHDate', onSelect:selfKHDateSelect, data:[{khId:"1",selfKHDate:"2018"},{khId:"2",selfKHDate:"2019"},{khId:"3",selfKHDate:"2020"},{khId:"4",selfKHDate:"2021"},{khId:"5",selfKHDate:"2022"}] }); $("#selfKHDate").combobox('select',"2020"); $("#showRoomDate").combobox({ panelHeight: 'auto', valueField:'showRoomDate', textField:'showRoomDate', onSelect:showRoomDateSelect, data:[{srId:"1",showRoomDate:"2018"},{srId:"2",showRoomDate:"2019"},{srId:"3",showRoomDate:"2020"},{khId:"4",showRoomDate:"2021"},{khId:"5",showRoomDate:"2022"}] }); $("#showRoomDate").combobox('select',"2020"); } //時間選擇框改動判斷方法，刷新e-chart數據 function selfKHDateSelect(data){ initchart(); } function showRoomDateSelect(data){ initchart(); } function initchart() { // 基於准備好的dom，初始化echarts實例 var checkChart = echarts.init(document.getElementById('selfKH')); var showroomChart = echarts.init(document.getElementById('showRoom')); //獲取自評與考核年份 var chdate = $("input[name='selfKHDate']").val(); var evdate = $("input[name='selfKHDate']").val(); //獲取接待年份 var rcdate = $("input[name='showRoomHDate']").val(); if(rcdate==""){ rcdate = "2020"; } //自評與考核年份處理，改成年月日格式，查詢數據庫里大於此日期數據，並按日期排序 chdate = chdate+"-01-01"; evdate = evdate+"-01-01"; //接待年份處理 rcdate = rcdate+"-01-01"; debugger; // 定義一個數組將考核分數放入 var ChScores = new Array(); //定義一個數組將自評分數放入 var EvScores = new Array(); //定義三個數組放入不同級別接待人數 var RcPersonsOne = new Array(); var RcPersonsTwo = new Array(); var RcPersonsThree = new Array(); // 獲取不同月份考核分數 $.ajax({ url : ftpIp+"/supervise/getChScoreByDate.do?chdate="+chdate, // 請求的url地址 dataType : "json", // 返回格式為json async : true,// 請求是否異步，默認為異步，這也是ajax重要特性 type : "GET", // 請求方式 success : function(req) { // 請求成功時處理 debugger; // 獲得一月到12月考核分數 chdate = chdate.substring(0,4); var strchdate; for (var i = 0; i < req.length; i++) { strchdate = req[i].chdate.substring(0,4); if(chdate==strchdate){ ChScores.push(req[i].chscore); } } $.ajax({ url : ftpIp+"/supervise/getEvScoreByDate.do?evdate="+evdate, // 請求的url地址 dataType : "json", // 返回格式為json async : true,// 請求是否異步，默認為異步，這也是ajax重要特性 type : "GET", // 請求方式 success : function(req) { // 請求成功時處理 debugger; // 獲得一月到12月考核分數 evdate = evdate.substring(0,4); var strevdate; for (var i = 0; i < req.length; i++) { strevdate = req[i].evdate.substring(0,4); if(strevdate==evdate){ EvScores.push(req[i].evscore); } } //自評與考核柱狀圖 checkoption = { /* * title: { text: '自評與考核' }, */ legend : { left : 300, top : -5 }, tooltip : { trigger : 'axis', formatter : function(params) { // 自定義函數修改折線圖給數據加單位 var str = '';// 聲明一個變量用來存儲數據 str += '<div>' + params[0].name + '</div>'; // 顯示日期的函數 for (var i = 0; i < params.length; i++) { // 圖顯示的數據較多時需要循環數據，這樣才可以成功的給多條數據添加單位 if (i === 0) { str += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;"></span>' + params[i].seriesName + '</span> : <span>' + (params[i].data ? params[i].data + '分' : '暫無') + '</br>'; } else { str += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;"></span>' + params[i].seriesName + '</span> : <span>' + (params[i].data ? params[i].data + '分' : '暫無') + '</br>'; } } return str; }, axisPointer : { type : 'cross', crossStyle : { color : '#999' } } }, // 調試圖表距離邊框位置 grid : { x : '1%', // 相當於距離左邊效果:padding-left y : '12%', // 相當於距離上邊效果:padding-top right :'3%', bottom : '10%', containLabel : true }, xAxis : [ { type : 'category', data : [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月' ], axisLabel : { show : true, textStyle : { color : 'black', fontSize : '13' } } } ], yAxis : [ { type : 'value', axisLabel : { show : true, textStyle : { color : 'black', fontSize : '13' } } } ], series : [ { name : '自評', type : 'bar', data : [ EvScores[0], EvScores[1], EvScores[2], EvScores[3], EvScores[4], EvScores[5], EvScores[6], EvScores[7], EvScores[8], EvScores[9], EvScores[10], EvScores[11]], itemStyle : { normal : { color : '#62B62F', barBorderRadius : 5, borderWidth : 0 } }, barWidth : '20%' }, { name : '考核', type : 'bar', data : [ ChScores[0], ChScores[1], ChScores[2], ChScores[3], ChScores[4], ChScores[5], ChScores[6], ChScores[7], ChScores[8],ChScores[9], ChScores[10], ChScores[11]], itemStyle : { normal : { color : '#058088', barBorderRadius : 5, borderWidth : 0 } }, barWidth : '20%' } ] };//ehcart checkChart.setOption(checkoption); } });//第二個ajax } });//第一個ajax $.ajax({ url : ftpIp+"/supervise/getPersonByDate.do?rcdate="+rcdate, // 請求的url地址 dataType : "json", // 返回格式為json async : true,// 請求是否異步，默認為異步，這也是ajax重要特性 type : "GET", // 請求方式 success : function(req) { // 請求成功時處理 debugger; var onelevelJanuary =0; var onelevelFebruaryh =0; var onelevelMarch =0; var onelevelApril= 0; var onelevelMay = 0; var onelevelJune= 0; var onelevelJuly = 0; var onelevelAugust =0; var onelevelSeptember =0; var onelevelOctober = 0; var onelevelNovember = 0; var onelevelDecember = 0; var twolevelJanuary =0; var twolevelFebruaryh =0; var twolevelMarch =0; var twolevelApril= 0; var twolevelMay = 0; var twolevelJune= 0; var twolevelJuly = 0; var twolevelAugust =0; var twolevelSeptember =0; var twolevelOctober = 0; var twolevelNovember = 0; var twolevelDecember = 0; var threelevelJanuary =0; var threelevelFebruaryh =0; var threelevelMarch =0; var threelevelApril= 0; var threelevelMay = 0; var threelevelJune= 0; var threelevelJuly = 0; var threelevelAugust =0; var threelevelSeptember =0; var threelevelOctober = 0; var threelevelNovember = 0; var threelevelDecember = 0; // 做判斷，分別獲取不同級別的一月到12月人數 for (var i = 0; i < req.length; i++) { debugger; var rclevel = req[i].rclevel; var sqlrcdate = req[i].rcdate; //選擇的日期 rcdate = rcdate.substring(0,4); //sql日期 sqlrcdatestr = sqlrcdate.substring(0,4); //如果日期不同，只留選擇日期的數據，sql日期不要 if(rcdate==sqlrcdatestr){ sqlrcdate = sqlrcdate.substring(5,7); if(rclevel=="一級"){ if(sqlrcdate=="01"){ onelevelJanuary= onelevelJanuary+req[i].rcpersonnum; } if(sqlrcdate=="02"){ onelevelFebruaryh = onelevelFebruaryh+req[i].rcpersonnum; } if(sqlrcdate=="03"){ onelevelMarch = onelevelMarch+req[i].rcpersonnum; } if(sqlrcdate=="04"){ onelevelApril= onelevelApril+req[i].rcpersonnum; } if(sqlrcdate=="05"){ onelevelMay = onelevelMay+req[i].rcpersonnum; } if(sqlrcdate=="06"){ onelevelJune = onelevelJune+req[i].rcpersonnum; } if(sqlrcdate=="07"){ onelevelJuly = onelevelJuly+req[i].rcpersonnum; } if(sqlrcdate=="08"){ onelevelAugust = onelevelAugust+req[i].rcpersonnum; } if(sqlrcdate=="09"){ onelevelSeptember = onelevelSeptember+req[i].rcpersonnum; } if(sqlrcdate=="10"){ onelevelOctober= onelevelOctober+req[i].rcpersonnum; } if(sqlrcdate=="11"){ onelevelNovember = onelevelNovember+req[i].rcpersonnum; } if(sqlrcdate=="12"){ onelevelDecember = onelevelDecember+req[i].rcpersonnum; } } else if(rclevel=="二級"){ if(sqlrcdate=="01"){ twolevelJanuary= twolevelJanuary+req[i].rcpersonnum; } if(sqlrcdate=="02"){ twolevelFebruaryh = twolevelFebruaryh+req[i].rcpersonnum; } if(sqlrcdate=="03"){ twolevelMarch = twolevelMarch+req[i].rcpersonnum; } if(sqlrcdate=="04"){ twolevelApril= twolevelApril+req[i].rcpersonnum; } if(sqlrcdate=="05"){ twolevelMay = twolevelMay+req[i].rcpersonnum; } if(sqlrcdate=="06"){ twolevelJune = twolevelJune+req[i].rcpersonnum; } if(sqlrcdate=="07"){ twolevelJuly = twolevelJuly+req[i].rcpersonnum; } if(sqlrcdate=="08"){ twolevelAugust = twolevelAugust+req[i].rcpersonnum; } if(sqlrcdate=="09"){ twolevelSeptember = twolevelSeptember+req[i].rcpersonnum; } if(sqlrcdate=="10"){ twolevelOctober= twolevelOctober+req[i].rcpersonnum; } if(sqlrcdate=="11"){ twolevelNovember = twolevelNovember+req[i].rcpersonnum; } if(sqlrcdate=="12"){ twolevelDecember = twolevelDecember+req[i].rcpersonnum; } } else if(rclevel=="三級"){ if(sqlrcdate=="01"){ threelevelJanuary= threelevelJanuary+req[i].rcpersonnum; } if(sqlrcdate=="02"){ threelevelFebruaryh = threelevelFebruaryh+req[i].rcpersonnum; } if(sqlrcdate=="03"){ threelevelMarch = threelevelMarch+req[i].rcpersonnum; } if(sqlrcdate=="04"){ threelevelApril= threelevelApril+req[i].rcpersonnum; } if(sqlrcdate=="05"){ threelevelMay = threelevelMay+req[i].rcpersonnum; } if(sqlrcdate=="06"){ threelevelJune = threelevelJune+req[i].rcpersonnum; } if(sqlrcdate=="07"){ threelevelJuly = threelevelJuly+req[i].rcpersonnum; } if(sqlrcdate=="08"){ threelevelAugust = threelevelAugust+req[i].rcpersonnum; } if(sqlrcdate=="09"){ threelevelSeptember = threelevelSeptember+req[i].rcpersonnum; } if(sqlrcdate=="10"){ threelevelOctober= threelevelOctober+req[i].rcpersonnum; } if(sqlrcdate=="11"){ threelevelNovember = threelevelNovember+req[i].rcpersonnum; } if(sqlrcdate=="12"){ threelevelDecember = threelevelDecember+req[i].rcpersonnum; } } } }//for循環 RcPersonsOne.push(onelevelJanuary,onelevelFebruaryh,onelevelMarch,onelevelApril,onelevelMay,onelevelJune,onelevelJuly,onelevelAugust,onelevelSeptember,onelevelOctober,onelevelNovember,onelevelDecember); RcPersonsTwo.push(twolevelJanuary,twolevelFebruaryh,twolevelMarch,twolevelApril,twolevelMay,twolevelJune,twolevelJuly,twolevelAugust,twolevelSeptember,twolevelOctober,twolevelNovember,twolevelDecember); RcPersonsThree.push(threelevelJanuary,threelevelFebruaryh,threelevelMarch,threelevelApril,threelevelMay,threelevelJune,threelevelJuly,threelevelAugust,threelevelSeptember,threelevelOctober,threelevelNovember,threelevelDecember); // 展廳接待 var showroomoption = { legend : { data : [ '一級接待', '二級接待', '三級接待' ] }, // 調試圖表距離邊框位置 grid : { x : '1%', // 相當於距離左邊效果:padding-left y : '15%', // 相當於距離上邊效果:padding-top right:'3%', bottom : '10%', containLabel : true }, /* * title: { text: '展廳接待', // subtext: '純屬虛構' }, */ tooltip : { trigger : 'axis', axisPointer : { type : 'cross' }, formatter : function(params) { // 自定義函數修改折線圖給數據加單位 var str = '';// 聲明一個變量用來存儲數據 str += '<div>' + params[0].name + '</div>'; // 顯示日期的函數 for (var i = 0; i < params.length; i++) { // 圖顯示的數據較多時需要循環數據，這樣才可以成功的給多條數據添加單位 if (i === 0) { str += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;"></span>' + params[i].seriesName + '</span> : <span>' + (params[i].data ? params[i].data + '人' : '暫無') + '</br>'; } else { str += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;"></span>' + params[i].seriesName + '</span> : <span>' + (params[i].data ? params[i].data + '人' : '暫無') + '</br>'; } } return str; }, }, /* * 下載圖片 toolbox: { show: true, feature: { saveAsImage: {} } }, */ xAxis : { type : 'category', boundaryGap : false, data : [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月' ] }, yAxis : { type : 'value', name : "人", axisLabel : { formatter : '{value}' }, axisPointer : { snap : true } }, series : [ { name : '一級接待', type : 'line', smooth : true, data : [ RcPersonsOne[0], RcPersonsOne[1], RcPersonsOne[2], RcPersonsOne[3], RcPersonsOne[4], RcPersonsOne[5], RcPersonsOne[6], RcPersonsOne[7],RcPersonsOne[8], RcPersonsOne[9], RcPersonsOne[10], RcPersonsOne[11]] }, { name : '二級接待', type : 'line', smooth : true, data : [ RcPersonsTwo[0], RcPersonsTwo[1], RcPersonsTwo[2], RcPersonsTwo[3],RcPersonsTwo[4], RcPersonsTwo[5], RcPersonsTwo[6], RcPersonsTwo[7], RcPersonsTwo[8], RcPersonsTwo[9], RcPersonsTwo[10], RcPersonsTwo[11]] }, { name : '三級接待', type : 'line', smooth : true, data : [ RcPersonsThree[0], RcPersonsThree[1], RcPersonsThree[2], RcPersonsThree[3], RcPersonsThree[4], RcPersonsThree[5], RcPersonsThree[6], RcPersonsThree[7], RcPersonsThree[8], RcPersonsThree[9], RcPersonsThree[10],RcPersonsThree[11]] } ] }; showroomChart.setOption(showroomoption); } }); }