使用laravel和ECharts实现折线图效果

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("/", "UserController@index");
Route::post("/axis", "UserController@axis");

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>