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);