双数值轴,刻度在两侧echarts 柱状配置项内容和展示

配置项如下
      // 颜色设置
var backgroundColor = '#021547';
var fontColor = '#B3B3B3';
var lineColor = 'rgba(50, 68, 73, 1)';
var color7 = ['#53CEEB', '#FF9625'];

var result = {
    "time": [
        "00",
        "01",
        "02",
        "03",
        "04",
        "05",
        "06",
        "07",
        "08",
        "09",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
        "18",
        "19",
        "20",
        "21",
        "22",
        "23"
    ],
    "delayNum": [
        70,
        60,
        20,
        15,
        12,
        20,
        40,
        180,
        190,
        230,
        320,
        270,
        330,
        200,
        157,
        408,
        500,
        530,
        610,
        600,
        567,
        300,
        204,
        100
    ],
    "delayTime": [
        170,
        160,
        120,
        115,
        112,
        120,
        140,
        1180,
        1190,
        1230,
        1320,
        1270,
        1330,
        1200,
        1157,
        1408,
        1500,
        1530,
        1610,
        1600,
        1567,
        1300,
        1204,
        1100
    ]
};
var timeList = deepCopy(result.time);
timeList.push('00');



function deepCopy(o) {
    if (o instanceof Array) {
        var n = [];
        for (var i = 0; i < o.length; ++i) {
            n[i] = deepCopy(o[i]);
        }
        return n;

    } else if (o instanceof Object) {
        var n = {};
        for (var i in o) {
            n[i] = deepCopy(o[i]);
        }
        return n;
    } else {
        return o;
    }
}



option = {
    backgroundColor: backgroundColor,
    color: color7,
    textStyle: {
        fontSize: 16,
        color: fontColor,
        fontFamily: '苹方-简'
    },
    legend: {
        top: '5%',
        selectedMode: false,
        itemHeight: 10,
        data: [{
                name: '架次',
                icon: 'rect'
            },
            {
                name: '分钟'
            }
        ],
        textStyle: {
            fontSize: 14,
            color: '#F5F5F5'
        }
    },
    grid: {
        left: '5%',
        right: '5%',
        top: '15%',
        bottom: '6%',
        containLabel: false
    },
    xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLabel: {
                show: true,
                interval: 0,
                fontSize: 13,
                fontFamily: '苹方-简',
                color: fontColor
            },
            axisLine: {
                lineStyle: {
                    color: lineColor
                }
            },
            axisTick: {
                show: true,
                inside: true
            },
            data: timeList
        },
        {
            show: false,
            type: 'category',
            data: result.time
        }
    ],
    yAxis: [{
            type: 'value',
            name: '架次',
            nameTextStyle: {
                fontSize: 14
            },
            axisLabel: {
                show: true,
                fontSize: 13
            },
            axisLine: {
                lineStyle: {
                    color: lineColor
                }
            },
            axisTick: {
                show: false
            },
            splitArea: {
                show: false
            },
            splitLine: {
                show: false
            }
        },
        {
            type: 'value',
            name: '分钟',
            nameTextStyle: {
                fontSize: 14
            },
            axisLabel: {
                show: true
            },
            axisLine: {
                lineStyle: {
                    color: lineColor
                }
            },
            axisTick: {
                show: false
            },
            splitArea: {
                show: false
            },
            splitLine: {
                show: false
            }
        }
    ],
    series: [{
            type: 'bar',
            name: '架次',
            xAxisIndex: 1,
            barWidth: '10',
            data: result.delayNum
        },
        {
            type: 'line',
            name: '分钟',
            xAxisIndex: 1,
            yAxisIndex: 1,
            lineStyle: {
                width: 1
            },
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: {
                borderColor: 'rgba(255, 150, 37, 0.6)',
                borderWidth: 6
            },
            data: result.delayTime
        }
    ]
};
    
截图如下