echarts的简单应用以及数据库数据的处理

时间 2019-11-10

原文原文链接

1.引入文件，须要日期的选择php

<script src="js/echarts.js"></script>
<script src="../laydate/laydate.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

2.html

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
        <title></title>
    </head>
    <body>

    <label>选择查询日期范围:<input type="text" id="cal"></label>
    <input type="submit" value="开始查询" id="sub">
    <!-- 为 ECharts 准备一个具有大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>

    </body>
    <script src="js/echarts.js"></script>
    <script src="../laydate/laydate.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>

    $('#sub').click(function(){

         // 基于准备好的dom，初始化echarts实例
               var myChart = echarts.init(document.getElementById('main'));
            var time=$('#cal').val();
            //post实现异步
            $.post('get_date.php',{"time":time},function(data){
                 console.log(data.time);
                // console.log(data.total);
                var ti=eval(data.time);
                var to=eval(data.total);
             // 指定图表的配置项和数据

            var option = {
                color: ['#3398DB'],
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : ti,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'直接访问',
                        type:'bar',
                        barWidth: '60%',
                        data:to
                    }
                ]
            };


                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
        },'json');
    });
    //日期
            laydate.render({
              elem: '#cal',
              type: 'date',
              range:'--',
            });
        </script>
    </html>

3.get_date.phpmysql

<?php
$time=$_POST['time'];
$arr=explode('--',$time);//把字符串分割成数组

$start_time=strtotime(trim($arr[0]));//选取的起始时间 转换成时间戳strtotime()
$end_time=strtotime(trim($arr[1]));//选取的结束时间 转换成时间戳

//链接数据库 并将数据库的数值处理成须要的数据
try{
    $db = new PDO('mysql:host=127.0.0.1;dbname=fyh;port=3306;charset=utf8','pdo','admin');
    $db->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
}catch(PDOException $e){
    echo 'connect Mysql Error:'.$e->getMessage();
}

$sql ="select total,ctime from total_access where ctime between :star_time and :end_time";
$stmt = $db->prepare($sql);
$data = [':star_time'=>$start_time,':end_time'=>$end_time];
//time : ['2017-9-1', '2017-9-2', '2017-9-2'],
//data:[10, 52, 200, 334, 390, 330, 220]
$stmt->execute($data);

$res=$stmt->fetchAll(PDO::FETCH_ASSOC);
//date(Y-m-d，时间戳);时间戳格式化成时间样式
//拼接成前台须要的数据
$res_time='[';
$res_total='[';
foreach ($res as $v) {
    $res_time.='\''.date('Y-m-d',$v['ctime']).'\''.',';
    $res_total.=$v['total'].',';
}
$res_time=substr($res_time,0,-1);
$res_time.=']';

$res_total=substr($res_total,0,-1);//截去数组中最后一个逗号
$res_total.=']';

// echo $res_time;
// echo $res_total;
echo json_encode(['time'=>$res_time,'total'=>$res_total]);

echarts的简单应用 以及数据库数据的处理

echarts的简单应用以及数据库数据的处理