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