1、首先引入echart.js

<script type="text/javascript" src="{{ asset('/public/js/echarts.js') }}"></script>

<div class="contain" style="width: 84%;" id="contain"></div>

var myChart = echarts.init(document.getElementById("contain"));

            option = {
                title : {
                    text: '時間變化圖'   // 標題
                },
                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,   // 是否啟動拖拽重計算屬性，預設false
                xAxis : [    // x座標軸
                    {
                        axisLine: {   // x座標軸顏色
                            lineStyle: { color: '#333' }
                        },
                        axisLabel: {   // x軸的資料會旋轉30度
                            rotate: 30,
                            interval: 0
                        },
                        type : 'category',
                        boundaryGap : false,   // x軸從0開始
                        data : []   // x軸資料
                    }
                ],
                yAxis : [   // y軸
                    {
                        type : 'value',
                        axisLabel : {
                            formatter: '{value} 秒'   // y軸的值都加上秒的單位
                        },
                        axisLine: {
                            lineStyle: { color: '#333' }
                        }
                    }
                ],
                series : [    // 設定圖示資料用
                    {
                        name:'時間',    
                        type:'line',
                        smooth: 0.3,   // 線有弧度
                        data: []   // y軸資料
                    }
                ]
            };
            // 使用剛指定的配置項和資料顯示圖表。
            myChart.setOption(option);    
 

（1）路由

Route::get('/', '[email protected]');
Route::post('/axis', '[email protected]');

public function index()
    {
        return view('user.index');
    }

// 是ajax所用的的方法，得到要顯示的資料，返回陣列

public function axis()
    {
        $key = Key::all('name', 'ttl', 'created_time');
        return $key;
    }
 

（4）index.blade.php的內容

<div class="contain" style="width: 84%;" id="contain"></div>

    <script type="text/javascript">

        var names = [];   // 設定兩個變數用來存變數
        var ttls = [];
        var time = Date.parse(new Date()).toString().substr(0, 10);   // 獲取當前時間，精確到秒，但因為是毫秒級的，會多3個0，變成字串後去掉
        time = parseInt(time);
        function getData()
        {
            $.post("{{ url('/axis') }}", {
                "_token": "{{ csrf_token() }}"
            }, function(data) {
                $.each(data, function(i, item) {
                    names.push(item.name);
                    if((ttl = (parseInt(item.ttl) + parseInt(item.created_time) - time)) > 0) {   // 小於0就==0，
                        ttls.push(ttl);
                    } else {
                        ttls.push(0);
                    }
                });
            });
        }
        getData();   // 一定不能忘了，呼叫
 

        // 實現畫圖的功能
        function chart() {
            var myChart = echarts.init(document.getElementById("contain"));

            option = {
                title : {
                    text: '鍵名過期時間變化圖'
                },
                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 : [
                    {
                        axisLine: {
                            lineStyle: { color: '#333' }
                        },
                        axisLabel: {
                            rotate: 30,
                            interval: 0
                        },
                        type : 'category',
                        boundaryGap : false,
                        data : names    // x的資料，為上個方法中得到的names
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        axisLabel : {
                            formatter: '{value} 秒'
                        },
                        axisLine: {
                            lineStyle: { color: '#333' }
                        }
                    }
                ],
                series : [
                    {
                        name:'過期剩餘時間',
                        type:'line',
                        smooth: 0.3,
                        data: ttls   // y軸的資料，由上個方法中得到的ttls 
                    } 
                ]
            };
            // 使用剛指定的配置項和資料顯示圖表。
            myChart.setOption(option);
        }
  
        setTimeout('chart()', 1000);   // 為什麼加定時器？因為上面是一起執行的，可能還未取得資料，便已經將圖畫好了，圖上就沒有資料，所以這裡我延遲了1s，

    </script>