配置项如下
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'
}
]
};