红色代码为单位数据代码，代码示例：
//自评与考核柱状图 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;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;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;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;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;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;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); } }); }