var data = [{ "areaCode": null, "areaIdPath": null, "areaName": null, "baseAreaId": null, "baseClasslevelId": null, "baseSubjectId": null, "baseUserId": "a6973168fc0c4d0c9fa55fad62e25c30", "beginTime": null, "classStatus": null, "classlevelName": null, "classlevelSort": null, "clsSchoolId": null, "planCourseCnt": 1554, "realBeginTime": null, "realCourseCnt": 211, "roomType": null, "scheduleCount": 0, "status": null, "subjectName": null, "teacherUserName": "毛老师", "userName": null }, { "areaCode": null, "areaIdPath": null, "areaName": null, "baseAreaId": null, "baseClasslevelId": null, "baseSubjectId": null, "baseUserId": "a52aefe2915b4eb7ae6685ab3dfbec83", "beginTime": null, "classStatus": null, "classlevelName": null, "classlevelSort": null, "clsSchoolId": null, "planCourseCnt": 796, "realBeginTime": null, "realCourseCnt": 190, "roomType": null, "scheduleCount": 0, "status": null, "subjectName": null, "teacherUserName": "jishu1director", "userName": null }, { "areaCode": null, "areaIdPath": null, "areaName": null, "baseAreaId": null, "baseClasslevelId": null, "baseSubjectId": null, "baseUserId": "700b0cfc040a4db38e117e2b3ca1d289", "beginTime": null, "classStatus": null, "classlevelName": null, "classlevelSort": null, "clsSchoolId": null, "planCourseCnt": 904, "realBeginTime": null, "realCourseCnt": 90, "roomType": null, "scheduleCount": 0, "status": null, "subjectName": null, "teacherUserName": "东院老师", "userName": null }, { "areaCode": null, "areaIdPath": null, "areaName": null, "baseAreaId": null, "baseClasslevelId": null, "baseSubjectId": null, "baseUserId": "fbbe8173f36c47959ad6968b80d08cb9", "beginTime": null, "classStatus": null, "classlevelName": null, "classlevelSort": null, "clsSchoolId": null, "planCourseCnt": 1160, "realBeginTime": null, "realCourseCnt": 78, "roomType": null, "scheduleCount": 0, "status": null, "subjectName": null, "teacherUserName": "张老师", "userName": null }, { "areaCode": null, "areaIdPath": null, "areaName": null, "baseAreaId": null, "baseClasslevelId": null, "baseSubjectId": null, "baseUserId": "0069205b1595492999ed2f444fadac8c", "beginTime": null, "classStatus": null, "classlevelName": null, "classlevelSort": null, "clsSchoolId": null, "planCourseCnt": 152, "realBeginTime": null, "realCourseCnt": 71, "roomType": null, "scheduleCount": 0, "status": null, "subjectName": null, "teacherUserName": "王雪晶", "userName": null }, { "areaCode": null, "areaIdPath": null, "areaName": null, "baseAreaId": null, "baseClasslevelId": null, "baseSubjectId": null, "baseUserId": "bae4302c237c409d96487e52cf6b50f9", "beginTime": null, "classStatus": null, "classlevelName": null, "classlevelSort": null, "clsSchoolId": null, "planCourseCnt": 118, "realBeginTime": null, "realCourseCnt": 64, "roomType": null, "scheduleCount": 0, "status": null, "subjectName": null, "teacherUserName": "李老师", "userName": null }, { "areaCode": null, "areaIdPath": null, "areaName": null, "baseAreaId": null, "baseClasslevelId": null, "baseSubjectId": null, "baseUserId": "5893795b4e444716b652c62dc68a69b1", "beginTime": null, "classStatus": null, "classlevelName": null, "classlevelSort": null, "clsSchoolId": null, "planCourseCnt": 834, "realBeginTime": null, "realCourseCnt": 64, "roomType": null, "scheduleCount": 0, "status": null, "subjectName": null, "teacherUserName": "燕子埠王老师", "userName": null }, { "areaCode": null, "areaIdPath": null, "areaName": null, "baseAreaId": null, "baseClasslevelId": null, "baseSubjectId": null, "baseUserId": "aec0d9925e954931911b227dd4703c49", "beginTime": null, "classStatus": null, "classlevelName": null, "classlevelSort": null, "clsSchoolId": null, "planCourseCnt": 484, "realBeginTime": null, "realCourseCnt": 54, "roomType": null, "scheduleCount": 0, "status": null, "subjectName": null, "teacherUserName": "常态", "userName": null }, { "areaCode": null, "areaIdPath": null, "areaName": null, "baseAreaId": null, "baseClasslevelId": null, "baseSubjectId": null, "baseUserId": "356cc5d7493b4acb84e3c4e6e3157bbb", "beginTime": null, "classStatus": null, "classlevelName": null, "classlevelSort": null, "clsSchoolId": null, "planCourseCnt": 471, "realBeginTime": null, "realCourseCnt": 47, "roomType": null, "scheduleCount": 0, "status": null, "subjectName": null, "teacherUserName": "邳州实验小学于肖肖", "userName": null }, { "areaCode": null, "areaIdPath": null, "areaName": null, "baseAreaId": null, "baseClasslevelId": null, "baseSubjectId": null, "baseUserId": "49f9ca8d43c54d2e8a08a7e819633532", "beginTime": null, "classStatus": null, "classlevelName": null, "classlevelSort": null, "clsSchoolId": null, "planCourseCnt": 759, "realBeginTime": null, "realCourseCnt": 44, "roomType": null, "scheduleCount": 0, "status": null, "subjectName": null, "teacherUserName": "燕子埠李老师", "userName": null } ]; var areaName = [], realCourseCnt = [], planCourseCnt = [], CourseRate = [], maxCount = []; var fullAreaName = []; for (var i = 0; i < data.length; i++) { areaName.push(data[i].teacherUserName); fullAreaName.push(data[i].teacherUserName); realCourseCnt.push(data[i].realCourseCnt); planCourseCnt.push(data[i].planCourseCnt); CourseRate.push(('(' + (data[i].realCourseCnt * 100 / data[i].planCourseCnt).toFixed(0)) + '%)'); } var maxPlanCourseCnt = Math.max.apply(null, planCourseCnt); var maxRealCourseCnt = Math.max.apply(null, realCourseCnt); var maxCourseCnt = Math.max(maxPlanCourseCnt, maxRealCourseCnt); $.each(data, function(i, d) { maxCount.push(maxCourseCnt); }); option = { backgroundColor: '#0B1A32', title: { text: '计划开课', left: '70', bottom: '-11', textStyle: { color: 'rgba(255,255,255,0.5)', fontSize: '12', fontfamily: 'PingFangMedium', fontWeight: 'light' } }, grid: { left: '29', top: '20', right: '28', bottom: '6', containLabel: true }, tooltip: { show: "true", trigger: 'axis', axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: 'none' // 默认为直线,可选为:'line' | 'shadow' }, transitionDuration: 0, backgroundColor: 'rgba(255,255,255,0.3)', borderColor: '#535b69', borderRadius: 8, borderWidth: 0, padding: [5, 10], formatter: function(param) { var html = fullAreaName[param[1].dataIndex] + '<br/>'; html += '实际开课:' + param[0].value + '<br/>'; html += '计划开课:' + planCourseCnt[param[1].dataIndex] + '<br/>'; html += '开课占比:' + param[1].axisValue; return html; } }, xAxis: { type: 'value', axisTick: { show: false }, max: maxCourseCnt, axisLine: { show: false, lineStyle: { color: '#90979c' } }, splitLine: { show: false } }, yAxis: [{ type: 'category', axisTick: { show: false }, axisLine: { show: false, lineStyle: { color: '#1bb9f9' } }, axisLabel: { fontSize: '16', fontFamily: 'PingFangMedium', }, data: areaName, offset: 57 }, { type: 'category', axisTick: { show: false }, axisLine: { show: false, lineStyle: { color: '#7e9bc6' } }, axisLabel: { fontSize: '14' }, position: 'left', offset: 5, data: CourseRate, zLevel: '2' }, { type: 'category', axisTick: { show: false }, axisLine: { show: false, lineStyle: { color: '#7e9bc6' } }, axisLabel: { show: true, color: '#fff', interval: '0', fontSize: '24', fontFamily: 'myFirstFont' }, position: 'right', offset: 10, data: realCourseCnt, zLevel: '3' }], series: [{ name: '计划开课', type: 'bar', yAxisIndex: 1, barWidth: '12', itemStyle: { normal: { show: true, color: '#09152a', borderType: 'solid', barBorderRadius: 50, borderWidth: 1, borderColor: '#61738c' } }, barGap: '0%', barCategoryGap: '20%', data: planCourseCnt }, { name: '实际开课', type: 'bar', // yAxisIndex: 2, barWidth: '6', label: { normal: { show: false, color: '#fff', position: [320, -8], fontSize: '24', fontFamily: 'myFirstFont' } }, itemStyle: { normal: { show: true, color: '#1bb2f9', barBorderRadius: 50, borderWidth: 0, borderColor: '#333' } }, barGap: '0%', barCategoryGap: '20%', data: realCourseCnt, zLevel: '2' } ] };