echarts折柱混合(图表数据与x轴对应显示)

一天24个小时，每个小时不一定都有对应的数据，所以后台给出的数据，只有每个时间点对应的数据，比如4点，给的是112，5点的242，其他时间没有，则只显示4点，5点时候的数据，那么现在
对应的时间点就是后台给的时间点，x轴坐标与该时间点一一对应，按以下数据格式即可。
直接贴代码：
数据格式：{"value":["16", "117"]} //16代表在x轴显示的下标位置,117为数据量

var columns1=[{"value":["16", "117"]},{"value":["15", "17"},{"value":["6", "11"}，{"value":["22", "47"}，{"value":["16", "27"}]；

var columns2= [{"value":["16", "117"]},{"value":["15", "17"},{"value":["6", "11"}，{"value":["22", "47"}，{"value":["16", "27"}]；

var columns3= [{"value":["16", "117"]},{"value":["15", "17"},{"value":["6", "11"}，{"value":["22", "47"}，{"value":["16", "27"}]；

var columns4= [{"value":["16", "117"]},{"value":["15", "17"},{"value":["6", "11"}，{"value":["22", "47"}，{"value":["16", "27"}]；

var theme_style = ["#51DCD1", "red", "#FFD856", "#2E4650"];
var newXtitle = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23];//x轴

option = {
    legend:{show: true,},
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    grid: {
        left:"13%",
        right:"16%",
    },
    xAxis: [{
        type: 'category',
        //boundaryGap : false,//刻度从0开始
        data: newXtitle,
        axisPointer: {
            type: 'shadow'
        }}
    ],
    yAxis: [
　　　　　　{
　　　　　　type: 'value',
　　　　　　min: 0,
　　　　　　axisLabel: {
　　　　　　　　formatter: '{value}'
　　　　　　　　}
　　　　　　}
　　　　],
　　　series: [
　　　　　　{
　　　　　　　　name:'平均延迟',
　　　　　　　　type:'bar',
　　　　　　　　color: theme_style[0],
　　　　　　　　data: columns4,
　　　　　　　　yAxisIndex: 0,
　　　　　　　　//"connectNulls": true, //将断点链接
　　　　　　　　itemStyle : { normal: {label : {show: true}}},//显示数据
　　　　　　},
　　　　　　{
　　　　　　　　name:'平均延迟(昨日)',
　　　　　　　　type:'bar',
　　　　　　　　//symbol:"none",//去掉小圆点
　　　　　　　　yAxisIndex: 0,
　　　　　　　　color: theme_style[2],
　　　　　　　　//position:'start',//设置刻度线 是在上面 还是下面
　　　　　　　　smooth:0.4,//设置折线图弧度 0-1
　　　　　　　　data: columns2,
　　　　　　　　// "connectNulls": true, //将断点链接
　　　　　　　　itemStyle : { normal: {label : {show: true}}},//在柱状图上显示数据
　　　　　　},
　　　　　　{
　　　　　　　　name:'信控工单失败量',
　　　　　　　　boundaryGap: true,
　　　　　　　　type:'line',
　　　　　　　　barMinWidth:25,
　　　　　　　　color: theme_style[1],
　　　　　　　　yAxisIndex: 1,
　　　　　　　　smooth:0.4,
　　　　　　　　data: columns5,
　　　　　　　　itemStyle : { normal: {label : {show: false}}},
　　　　　　},
  　　　　　　{
　　　　　　　　name:'信控工单失败量(昨日)',
　　　　　　　　type:'line',
　　　　　　　　boundaryGap: true,
　　　　　　　　barMinWidth:25,
　　　　　　　　color: theme_style[3],
　　　　　　　　yAxisIndex: 1,
　　　　　　　　data: columns3,
　　　　　　　　itemStyle : { normal: {label : {show: false}}},
　　　　　　　　},
　　　　　　 ]
　　　　};                    

最终显示如下图：

对应的echarts知识点：

 

 

PS：很多知识点查api即可找到。