混合柱状图，柱子在时间段内显示echarts 柱状配置项内容和展示

产品的鬼要求

      let minslots=["00:00","00:15","00:30","00:45","01:00","01:15","01:30","01:45","02:00","02:15","02:30","02:45","03:00","03:15","03:30","03:45","04:00","04:15","04:30","04:45","05:00","05:15","05:30","05:45","06:00","06:15","06:30","06:45","07:00","07:15","07:30","07:45","08:00","08:15","08:30","08:45","09:00","09:15","09:30","09:45","10:00","10:15","10:30","10:45","11:00","11:15","11:30","11:45","12:00","12:15","12:30","12:45","13:00","13:15","13:30","13:45","14:00","14:15","14:30","14:45","15:00","15:15","15:30","15:45","16:00","16:15","16:30","16:45","17:00","17:15","17:30","17:45","18:00","18:15","18:30","18:45","19:00","19:15","19:30","19:45","20:00","20:15","20:30","20:45","21:00","21:15","21:30","21:45","22:00","22:15","22:30","22:45","23:00","23:15","23:30","23:45"]
let maxslots=["00:00","01:00","02:00","03:00","04:00","05:00","06:00","07:00","08:00","09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00","17:00","18:00","19:00","20:00","21:00","22:00","23:00"]
let maxdata=[3160.64453125,3256.542724609375,3129.1013793945312,3178.9060668945312,3179.492431640625,3163.47705078125,3194.7265014648438,3121.9725341796875,3223.9253540039062,3181.3485717773438,3190.6242065429688,3165.723388671875,3208.3980102539062,3138.867431640625,3056.2493286132812,3012.5001831054688,3010.253662109375,3019.1405029296875,3098.1444702148438,3049.0242919921875,3125.0970458984375,3204.6875,3205.3709716796875,3155.9573974609375]
let mindata=[3229.6875,3104.296875,3182.42236328125,3126.1712646484375,3246.0947265625,3357.8080444335938,3264.4539794921875,3157.81396484375,3126.9541015625,3220.703125,3155.4683837890625,3013.280029296875,3144.1416015625,3157.423583984375,3214.451171875,3199.6080322265625,3177.7379150390625,3245.7039794921875,3063.6700439453125,3230.85791015625,3192.96923828125,3092.970703125,3215.6224365234375,3152.3455810546875,3125.38916015625,3144.9219970703125,3217.9678955078125,3290.627197265625,3230.0748291015625,3140.2364501953125,3043.3560180664062,3074.2232666015625,3219.531982421875,3222.6552734375,3243.7496337890625,3209.7647705078125,3274.218017578125,3026.95361328125,3203.1292724609375,3221.0931396484375,3114.0604248046875,3260.9375,3234.3736572265625,3153.125244140625,3199.2183837890625,3040.62841796875,3235.93359375,3187.1131591796875,3200.388427734375,3310.1556396484375,3126.5611572265625,3196.4866943359375,3114.8455810546875,3220.69921875,3139.4560546875,3080.4688720703125,3143.3574829101562,3078.126708984375,2874.6080322265625,3128.9051513671875,3075.390380859375,3064.45361328125,2944.921630859375,2965.2351684570312,2968.3603515625,2943.75,3042.9691162109375,3085.9351806640625,3013.673583984375,3115.231201171875,2948.4383544921875,2999.21875,3150.7823486328125,3021.483154296875,3171.09716796875,3049.2152099609375,3098.4424438476562,3105.0732421875,2949.6119384765625,3042.9696044921875,3002.3399658203125,3147.6551513671875,3030.46923828125,3319.9239501953125,3216.795654296875,3210.157958984375,3204.296875,3187.4996337890625,3261.3272705078125,3242.57958984375,3119.9228515625,3197.6544189453125,3178.905517578125,3088.6728515625,3113.673583984375,3242.5775146484375];
let maxNewData = mindata.map((item, index) => {
    if (index % 4 === 2) {
        return item;
    }
    return '';
})
let minslots2=minslots
// mindata.push('')
// maxslots.push('24:00')
// maxdata.push('')
option = {
    dataZoom:[{
        // minSpan:50,
        // end:50,
        endValue:30,
        // zoomLock: true,

    }],
    tooltip:{
        trigger:'axis',
    },
    grid:{
        bottom:100
    },
    xAxis: {
        type: 'category',
        data: minslots2,
        // interval:0,
        axisTick:{
            alignWithLabel:true,
            interval:3
        },
        axisLabel:{
            // show:false,
            interval:3
        }
        // max:94
        
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: maxNewData,
        type: 'bar',
        // showBackground: true,
        backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
        },
        barWidth:8,
        color:'#088',
        // xAxisIndex:1
    },
    {
        type:'line',
        color:'#a90a09aa',
        // xAxisIndex:0,
        data:mindata,
    }
    // {
    //     type:'line',
    //     data:mindata,
    // },
    ]
};