NICT泊位计划图echarts 避让时段配置项内容和展示

如何能让y轴的等分刻度不一致？如泊位轴的 Berth #11能对应桩位轴的 1~30

      app.title = '泊位计划图';

//船数据
var vessel = [{
    cname: '德祥瓦纳',
    ename: 'DeXiangWaNa',
    uno_no: '1233',
    status: '预报',
    eta: '2016-11-01 07:00:00',
    etb: '2016-11-01 18:00',
    etc: '2016-11-01 18:00',
    etd: '2016-11-01 18:00:00',
    ata: '2016-11-02 14:00',
    atb: '2016-11-02 14:00',
    atc: '2016-11-02 16:00',
    atw: '2016-11-02 16:00',
    atd: '2016-11-02 16:00',
    start_bitt: '42',
    end_bitt: '53',
    alongside: 'F',
    operator: 'APL',
    length: '500M',
    loading: 2399,
    discharging: 1245,
    qcs: ['QC01', 'QC02', 'QC03']
},{
    cname: '仁建10',
    ename: 'Renjian10',
    uno_no: '1234',
    status: '预报',
    eta: '2016-11-02 14:00',
    etb: '2016-11-02 14:00',
    etc: '2016-11-02 18:00',
    etd: '2016-11-02 18:00',
    ata: '2016-11-02 14:00',
    atb: '2016-11-02 14:00',
    atc: '2016-11-02 16:00',
    atw: '2016-11-02 16:00',
    atd: '2016-11-02 16:00',
    start_bitt: '56',
    end_bitt: '63',
    alongside: 'F',
    operator: 'ATL',
    length: '500M',
    loading: 2399,
    discharging: 1245,
    qcs: ['QC01', 'QC02', 'QC03']
}, {
    cname: '藤县668',
    ename: 'TengXian668',
    uno_no: '1235',
    status: '预报',
    eta: '2016-11-03 08:00',
    etb: '2016-11-03 08:00',
    etc: '2016-11-03 14:00',
    etd: '2016-11-03 14:00',
    ata: '2016-11-02 14:00',
    atb: '2016-11-02 14:00',
    atc: '2016-11-02 16:00',
    atw: '2016-11-02 16:00',
    atd: '2016-11-02 16:00',
    start_bitt: '88',
    end_bitt: '99',
    alongside: 'F',
    operator: 'ZGS',
    length: '500M',
    loading: 2399,
    discharging: 1245,
    qcs: ['QC01', 'QC02', 'QC03']
}, {
    cname: '美总吉大',
    ename: 'MeiZongJiDa',
    uno_no: '1236',
    status: '预报',
    eta: '2016-11-02 22:00',
    etb: '2016-11-02 22:00',
    etc: '2016-11-03 03:00',
    etd: '2016-11-03 03:00',
    ata: '2016-11-02 14:00',
    atb: '2016-11-02 14:00',
    atc: '2016-11-02 16:00',
    atw: '2016-11-02 16:00',
    atd: '2016-11-02 16:00',
    start_bitt: '1',
    end_bitt: '14',
    alongside: 'F',
    operator: 'APL',
    length: '500M',
    loading: 2399,
    discharging: 1245,
    qcs: ['QC01', 'QC02', 'QC03']
}, {
    cname: '日照盛世',
    ename: 'RiZhaoShengShi',
    uno_no: '1236',
    status: '预报',
    eta: '2016-11-03 04:00',
    etb: '2016-11-03 04:00',
    etc: '2016-11-03 06:00',
    etd: '2016-11-03 10:00',
    ata: '2016-11-02 14:00',
    atb: '2016-11-02 14:00',
    atc: '2016-11-02 16:00',
    atw: '2016-11-02 16:00',
    atd: '2016-11-02 16:00',
    start_bitt: '40',
    end_bitt: '48',
    alongside: 'F',
    operator: 'APL',
    length: '500M',
    loading: 2399,
    discharging: 1245,
    qcs: ['QC01', 'QC02', 'QC03']
}];

//不能离靠泊数据
var not_in_out =[{
    type:'不能离泊',
    start_time:'2016-11-03 03:30',
    end_time:'2016-11-03 06:15'
},{
    type:'不能靠泊',
    start_time:'2016-11-02 07:30',
    end_time:'2016-11-02 13:30'
},{
    type:'不能靠泊',
    start_time:'2016-11-05 11:30',
    end_time:'2016-11-05 17:30'
}];

//查询时间
var query_option ={
    start_time: '2016-11-01 00:00',
    end_time: '2016-11-08 00:00'
};


function format(date, fmt) {
    var o = {
        "M+": date.getMonth() + 1, //月份 
        "d+": date.getDate(), //日 
        "h+": date.getHours(), //小时 
        "m+": date.getMinutes(), //分 
        "s+": date.getSeconds(), //秒 
        "q+": Math.floor((date.getMonth() + 3) / 3), //季度 
        "S": date.getMilliseconds() //毫秒 
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}




var series = [];
var not_in_out_coor=[];

not_in_out.forEach(function(item){
    
    not_in_out_coor.push([{
                    name: item.type,
                    xAxis: item.start_time,
                    yAxis:0
                }, {
                    xAxis: item.end_time,
                    yAxis:115
                }]);
});

series.push({
    
            name:'避让时段',
            type:'line',
            smooth: true,
            markArea: {
                data: not_in_out_coor,
                
                itemStyle:{
                    normal:{
                     color:'rgba(234, 112, 24, 0.3)'    
                    }
                  }
                },
                
        
});


series.push({
    
            name:'QC01',
            type:'line',
            //smooth: true,
            markArea: {
                data: [ [{
                    //name: item.cname,
                    xAxis: '2016-11-01 07:00',
                    yAxis: '44'
                }, {
                    xAxis: '2016-11-01 10:00',
                    yAxis: '45'
                }],[{
                    //name: item.cname,
                    xAxis: '2016-11-01 07:00',
                    yAxis: '46'
                }, {
                    xAxis: '2016-11-01 13:00',
                    yAxis: '47'
                }],[{
                    //name: item.cname,
                    xAxis: '2016-11-01 07:00',
                    yAxis: '48'
                }, {
                    xAxis: '2016-11-01 11:00',
                    yAxis: '49'
                }] ],
            itemStyle:{
                normal:{
                    color:'rgba(255, 0, 0, 0.7)'
                }
            }
         },
          itemStyle:{
                normal:{
                    color:'rgba(85, 85, 85, 1)'
                }
            }

});

vessel.forEach(function(item) {
    series.push({
    
            name:item.cname,
            type:'line',
            //smooth: true,
            markArea: {
                data: [ [{
                    name: item.cname+'/'+item.start_bitt+'~'+item.end_bitt+'/'+ item.eta.substring(11,16)+'~'+item.etd.substring(11,16),
                    xAxis: item.eta,
                    yAxis: item.start_bitt,
                    
                }, {
                    xAxis: item.etd,
                    yAxis: item.end_bitt
                }] ],
                tooltip: {
                   formatter: function() {
                    return [
                    '船名：' + item.cname,
                    '艘次：' + item.uno_no,
                    '状态：' + item.status,
                    '船属：' + item.operator,
                    '预计靠泊时间：' + item.eta,
                    '预计离泊时间：' + item.etd,
                    '桩位：#' + item.start_bitt+'~#'+item.end_bitt
                ].join('<br/>');
            }
        },
        
            itemStyle:{
                normal:{
                    color:'rgba(66, 208, 41, 0.7)',
                }
            }
         },
          itemStyle:{
                normal:{
                    color:'rgba(85, 85, 255, 1)'
                }
            }

});
});



var _arr = [];
for (var i = 0; i < vessel.length; i++) {
    _arr[i] = vessel[i].cname;
}

option = {
    backgroundColor: '#f4f2e3',
    title: {
        text: "NICT泊位计划图", 
        subtext: query_option.start_time+'~'+query_option.end_time, 
        x: "center"
    }, 
    tooltip: {
        //trigger: 'item',
        //alwaysShowContent:true
        // axisPointer: {
        //     type: 'shadow'
        // }
    },
    grid:{
        bottom:100
    },
    // legend: {
    //     data: _arr
    // },
    dataZoom: [
        {
            show: true,
            realtime: true,
            start: 0,
            end: 50,
            xAxisIndex: [0,1],
            zoomLock:true
        },
        {
            type: 'inside',
            realtime: true,
            start: 0,
            end: 50,
            xAxisIndex: [0, 1],
            zoomLock:true
        }
    ],
    toolbox: {
        feature: {
           
            restore: {show: true},
            saveAsImage: {}
        }
    },
    xAxis:[{
        type: 'time',
        min: query_option.start_time,
        max: query_option.end_time,
        interval: 60 * 60 * 1000,
        axisLine: {
                lineStyle: {
                    color: '#ccc'
                }
            },
            nameTextStyle: {
                color: '#333'
            },
            axisLabel: {
                textStyle: {
                    color: '#333',
                    fontSize:5
                },
                formatter: function(value) {
                    return format(new Date(value), 'hh');
                }
            },
            axisTick: {
                show: false
            }
        
    },{
        type: 'time',
        position:'bottom',
        offset:25,
        min: query_option.start_time,
        max: query_option.end_time,
        interval: 4*60 * 60 * 1000,
        
            axisLabel: {
                textStyle: {
                    color: '#333',
                    fontSize:5
                },
                formatter: function(value) {
                    return format(new Date(value), 'MM-dd');
                }
            }
        
    }],

    yAxis: [{
        type: 'value',
        name: '桩位',
        nameLocation: 'start',
        min: 0,
        max: 115,
        interval: 2,
        inverse: true,
        position: 'left',
        axisLabel: {
            formatter: function(v) {
                // 在这里修改
                return v + 1;
            }
        }

    }, {
        type: 'category',
        name: '泊位',
        offset: 40,
        position: 'left',
        data: ['Berth #16', 'Berth #15', 'Berth #14', 'Berth #13', 'Berth #12', 'Berth #11'],
        // data:[{
        //     value:'Berth #16',
            
        //     textStyle: {
        //         fontSize: 10,
        //         color: 'red'
        //         }
        // },{
        //     value:'Berth #15',
        //     gap: '10%',
        //     textStyle: {
        //         fontSize: 10,
        //         color: 'red'
        //         }
        // }
        // ],

        // splitArea: {
        //     show: true,
        //     areaStyle: {
        //         color: ['#39ceff'],
        //     }
        // },

    }],
    series: series
};