三个y轴

描述:当前是关于Echarts图表中的 柱状图 示例。
 
            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'
        }
    ]
};