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

1、首先引入echart.js

?

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

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

?

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

3、echarts折线图的使用

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

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）路由

?

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

（2）方法

?

1 2 3 4 5 6 7 8 9 10

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的内容

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91

<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）大功告成！！

以上这篇使用laravel和ECharts实现折线图效果的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持服务器之家。

原文链接：https://blog.csdn.net/snow_small/article/details/78853594