以 ThinkPHP 爲例，其效果示例圖如下：
>>> 控制器代碼：
public function stat()
// 指定日期
$day = input('day') ?: date('Y-m-d',time());
// 單位 1 /分、 2 /時
$is_min = input('is_min') ?: 2;
return $this->fetch('',[
"day_data" => User::statByDay($day,$is_min),
"is_min" => $is_min
]);
}
>>> 模型層代層???：
/**
* 一天內數據變化
* @param $day string 指定日期 00:00
* @param $is_min int 1：/分 2：/時
* @return array
*/
public static function statByDay($day, $is_min = 1)
{
$after_day = date("Y-m-d", strtotime("+1 days", strtotime($day)));
$format = $is_min == 1 ? '"%H:%i"' : '"%H"';
$rs = self::whereTime('create_time', 'between', [$day, $after_day])
->column("id,DATE_FORMAT(create_time,$format)");
$_rs = [
'count' => count($rs)
];
$rs = array_count_values($rs);
$v_str = $k_str = '';
foreach ($rs as $k => $v) {
$k_str .= "\"$k\"" . ',';
$v_str .= $v . ",";
}
$_rs['k_str'] = trim($k_str, ',');
$_rs['v_str'] = trim($v_str, ',');
// dump($_rs);
return $_rs;
}
>>> 視圖層代碼???：
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.js"></script>
</head>
<body>
<!-- 爲ECharts準備一個具備大小（寬高）的Dom -->
<div id="day_data" style="width: 600px;height:1600px;"></div>
<!-- 圖2 js start -->
<script>
var myChart = echarts.init(document.getElementById('day_data'));
option = {
title : {
text: "一天內每"+"{:$date.is_min == 1 ? '分鐘' : '小時'}"+"數量統計圖",
subtext: '（數據爲空的時間段不展示..）'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['總人數']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : [{$day_data.k_str}]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'總人數',
type:'bar',
data:[{$day_data.v_str}],
itemStyle: {
normal: {
label: {
show: true, //開啓顯示
position: 'top', //在上方顯示
}
}
},
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
使用 echarts 的核心主要在圖標數據的拼接，但官方的示例還是需要看看。
官方 echarts 入門：https://echarts.baidu.com/tutorial.html