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

1、首先引入echart.js

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

2、html页面，要有一个布局容器，用来显示图像，一定要设置宽和高

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

3、echarts折线图的使用

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

4、实现功能

（1）路由

Route::get('/', 'UserController@index');Route::post('/axis', 'UserController@axis');

（2）方法

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

// 是ajax所用的的方法，得到要显示的数据，返回数组

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

（3）当访问/首页时，到index.blade.php

（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>

（5）大功告成！！