PHP 技巧 * echarts 实现指定日期统计图

以 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

ato'ng

发布了49 篇原创文章 · 获赞 42 · 访问量 5万+

私信关注

PHP 技巧 * echarts 实现指定日期统计图

猜你喜欢