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即可找到。