php使用echarts柱状图,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 js

// 基于准备好的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);