PHP Laravel Echarts 柱状图显示未来12小时数据 半小时为一组数据

PHP 部份：这里的数据查询部份因为习惯了Laravel的Eloquent ORM方式，所以哪怕你用php原生DB查询，只要自己改一个mysql查询即可

    public function index()
    {
        $datetime = [];
        for ($i = 0; $i <= 12; $i++) {
            $time1 = date('Y-m-d H:00:00', strtotime('+' . $i . ' hours'));
            $time2 = date('Y-m-d H:29:59', strtotime('+' . $i . ' hours'));
            $time3 = date('Y-m-d H:30:00', strtotime('+' . $i . ' hours'));
            $time4 = date('Y-m-d H:59:59', strtotime('+' . $i . ' hours'));

            $datetime[] = date('H:i', strtotime($time1)) . '~' . date('H:i', strtotime($time2));
            $datetime[] = date('H:i', strtotime($time3)) . '~' . date('H:i', strtotime($time4));

            $data[] = AdminBatchReview::where('schedule_time', '>=', $time1)->where('schedule_time', '<=', $time2)->where('send_flag', 1)->sum('imp_num');
            $data[] = AdminBatchReview::where('schedule_time', '>=', $time3)->where('schedule_time', '<=', $time4)->where('send_flag', 1)->sum('imp_num');

        }

        $xAxis  = json_encode($datetime);
        $series = json_encode($data);

        return view('admin.dashboard.home', compact(['xAxis', 'series']));
    }

Echarts html

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="chart-line" class="charts" style="width: 100%;height:350px;"></div>

Echarts js

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('chart-line'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: ''
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data:['发送量']
        },
        dataZoom: [
            {
                id: 'dataZoomX',
                type: 'slider',
                xAxisIndex: [0],
                filterMode: 'filter',
                end: 50,
            }
        ],
        grid: {
        },
        xAxis : [
            {
                type : 'category',
                data: {!! $xAxis !!}, // 这里用你的模板语言输出 json数据即可，此处为laravel blade
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'发送量',
                type:'bar',
                data: {!! $series !!} // 这里用你的模板语言输出 json数据即可，此处为laravel blade
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>