var x_data1 = ['0', '1', '2', '3', '4', '5', '6']; // 橫座標
var jstr = [5, 6, 40, 100, 58, 99]; //進場資料
var cstr = [36, 11, 22, 69, 115, 196]; //出場資料
var option = {
    backgroundColor: '#8B4513',
    tooltip: {
        trigger: 'axis',
        axisPointer: { // 座標軸指示器，座標軸觸發有效
            type: 'shadow' // 預設為直線，可選為：'line' | 'shadow'
        },
        formatter: function(params) {
            // 重定義marker值
            var marker1 = "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(2,242,180,1);'></span>";
            var marker2 = "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(2,209,223,1);'></span>";
            var res = "時間：" + params[0].name + ":00<br/>";
            var index = x_data1.indexOf(params[0].name); //定位到懸浮的名稱在橫座標的位置
            for (var i = 0; i < params.length; i++) { //只有一個系列
                res += marker1 + "進場數：" + jstr[index] + "輛<br/>";
                res += marker2 + "出場數：" + cstr[index] + "輛<br/>";
            }
            return res;
        },
    },
    grid: [
        // 0 進場數
        {
            top: '20%',
            left: '15%',
            right: '15%',
            height: '30%',
        },
        // 1 出場數
        {
            top: '60%',
            left: '15%',
            right: '15%',
            height: '30%',
        }
    ],
    calculable: true,
    xAxis: [{
        name: 'h',
        nameLocation: 'end',
        nameTextStyle: {
            color: '#fff',
            fontSize: 12,
        },
        gridIndex: 0, // 對應前面grid的索引位置（第一個）進場
        type: 'category',
        axisLabel: {
            show: true,
            textStyle: {
                color: function(value) { // x軸顏色的設定
                    return value >= 4 ? 'gray' : 'white'; // 橫座標預警值
                },
                fontSize: 20,
            },
            margin: 18,
        },
        axisTick: {
            show: false,
            alignWithLabel: true
        },
        axisLine: {
            lineStyle: {
                color: '#2B70A6' // x軸顏色
            }
        },
        data: x_data1,
        splitLine: {
            show: false,
            lineStyle: {
                color: "rgba(52,135,200,.4)",
                width: 1,
                type: "solid"
            }
        },
    }, {
        gridIndex: 1, // 對應前面grid的索引位置（第二個）出場
        position: 'top',
        type: 'category',
        axisTick: {
            show: false,
            alignWithLabel: true
        },
        axisLabel: {
            show: false,
        },
        axisLine: {
            lineStyle: {
                color: '#2B70A6' // x軸顏色
            }
        },
        data: x_data1,
        splitLine: {
            show: false,
            lineStyle: {
                color: "rgba(52,135,200,.4)",
                width: 1,
                type: "solid"
            }
        },
    }],
    yAxis: [{
        // show : false,//隱藏了y軸

        type: 'value',
        gridIndex: 0,
        name: '進場',
        nameLocation: 'center',
        nameTextStyle: {
            color: '#fff',
            fontSize: 20,
        },
        nameGap: 1,
        nameRotate: 0,
        axisTick: {
            show: false,
            // alignWithLabel: true
        },
        axisLabel: {
            show: false,
        },
        axisLine: {
            show: false,
        },
        splitLine: {
            show: false,
            lineStyle: {
                color: "rgba(52,135,200,.4)",
                width: 1,
                type: "solid"
            }
        },
    }, {
        // show : false,//隱藏了y軸
        type: 'value',
        gridIndex: 1,
        name: '出場',
        nameLocation: 'center',
        nameTextStyle: {
            color: '#fff',
            fontSize: 20,
        },
        nameGap: 1,
        nameRotate: 0,
        inverse: true,
        axisLine: { // y軸
            show: false

        },
        axisLabel: {
            show: false,
        },
        axisTick: { // y軸刻度線
            show: false,
            alignWithLabel: false
        },
        splitLine: {
            show: false,
            lineStyle: {
                color: "rgba(52,135,200,.4)",
                width: 1,
                type: "solid"
            }
        },
    }],
    series: [{
        name: '進場數',
        type: 'bar',
        barWidth: 20,
        xAxisIndex: 0, // 對應前面x的索引位置（第一個）
        yAxisIndex: 0, // 對應前面y的索引位置（第一個）
        itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [{
                            offset: 0,
                            color: 'rgba(2,242,180,1)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(2,242,180,.2)'
                        }
                    ]
                )
            },
        },
        data: jstr
    }, {
        name: '出場數',
        type: 'bar',
        barWidth: 20,
        xAxisIndex: 1, // 對應前面x的索引位置（第二個）
        yAxisIndex: 1, // 對應前面y的索引位置（第二個）
        itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [{
                            offset: 0,
                            color: 'rgba(2,209,223,1)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(2,209,223,.2)'
                        }
                    ]
                )
            },
        },
        data: cstr
    }]
};