ECharts 一周每天注册图表

官网http://echarts.baidu.com/

首先了解官方入门示例,才能更好修改为项目需要的图表。

获取每周时间:

function getTime($time =array())
    {
        $stimestamp = strtotime($time['start_time']);
        $etimestime = strtotime($time['end_time']);
        //计算日期段内有多少天
        $days = ($etimestime - $stimestamp) / 86400 + 1;
        //保存每天日期
        $date = array();
        /* for循环本周一到周日 */
        for ($i = 0; $i < $days; $i++) {
            $date[] = date("Y-m-d", $stimestamp + (86400 * $i));
        }
        return $date;
    }

json输出

public function listAction(){        
        $time['end_time'] = date('Y-m-d',time());//获取当前周一
        $time['start_time'] =date("Y-m-d", strtotime("-6 day"));//获取当前周日
        $time_all = $this->getTime($time);
        $date_json = json_encode($time_all);//json格式输出
        /* 遍历七天每天的人数 */
        foreach ($time_all as $key => $value) {
            /* 时间条件 */
            $map = array();
            $map["time"] = array(strtotime($value . " 00:00:00"),  strtotime($value . " 23:59:59"));
            $stime = $map["time"][0];//当天开始时间
            $etime = $map["time"][1];//结束时间
            $UserdataModel = new UserdataModel;
            $totalCount = $UserdataModel->getTimeCount($stime,$etime);
            $number[] = $totalCount;
        }
        $number = json_encode($number);////json格式输出
        $this->getView()->assign('number', $number);
        $this->getView()->assign('date_json', $date_json);
        $this->display('list');
}

model获取人数

public function getTimeCount($stime,$etime){
        $sql = 'SELECT count(*) FROM user WHERE create_time >:stime and create_time <:etime';
        $pdo = PDO::getInstance();
        $statement = $pdo->prepare($sql);
        $statement->bindParam(':stime', $stime);
        $statement->bindParam(':etime', $etime);
        $statement->execute();

        $num = $statement->fetchColumn(0);

        return $num;

    }

view:

<!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 100%;height:400px;"></div>
    <script>
        $(function () {
            var myChart = echarts.init(document.getElementById("main"));
            var option = {
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data:['当日注册']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        boundaryGap : false,
                        data :
                            <?=$date_json?>,

                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'当日注册',
                        type:'line',
                        stack: '人数',
                        smooth: true,
                        data:<?=$arr?>
                    },
                 ]
            };
            myChart.setOption(option);
        });
    </script>

效果图

鼠标悬停在上面时提示信息显示乱码

引入文件改为 cdn引入试试,如果现实编码正常则是文件保存到本地时编码出现错误

https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js

更换echarts引入文件就好

猜你喜欢

转载自blog.csdn.net/dmedaa/article/details/82494082