今天小编就为大家分享一篇使用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折线图的使用

1. var myChart = echarts.init(document.getElementById("contain")); 
2.    
3.    option = { 
4.     title : { 
5.      text: '时间变化图' // 标题 
6.     }, 
7.     tooltip : { 
8.      trigger: 'axis' // 折线图 
9.     }, 
10.     legend: { 
11.      data:['时间'] // 图例，就是折线图上方的符号 
12.     }, 
13.     toolbox: { // 工具箱，在折线图右上方的工具条，可以变成别的图像 
14.      show : true, 
15.      feature : { 
16.       mark : {show: true}, 
17.       dataView : {show: true, readOnly: false}, 
18.       magicType : {show: true, type: ['line', 'bar']}, 
19.       restore : {show: true}, 
20.       saveAsImage : {show: true} 
21.      } 
22.     }, 
23.     calculable : true, // 是否启动拖拽重计算属性，默认false 
24.     xAxis : [ // x坐标轴 
25.      { 
26.       axisLine: { // x坐标轴颜色 
27.        lineStyle: { color: '#333' } 
28.       }, 
29.       axisLabel: { // x轴的数据会旋转30度 
30.        rotate: 30, 
31.        interval: 0 
32.       }, 
33.       type : 'category', 
34.       boundaryGap : false, // x轴从0开始 
35.       data : [] // x轴数据 
36.      } 
37.     ], 
38.     yAxis : [ // y轴 
39.      { 
40.       type : 'value', 
41.       axisLabel : { 
42.        formatter: '{value} 秒' // y轴的值都加上秒的单位 
43.       }, 
44.       axisLine: { 
45.        lineStyle: { color: '#333' } 
46.       } 
47.      } 
48.     ], 
49.     series : [ // 设置图标数据用 
50.      { 
51.       name:'时间',  
52.       type:'line', 
53.       smooth: 0.3, // 线有弧度 
54.       data: [] // y轴数据 
55.      } 
56.     ] 
57.    }; 
58.    // 使用刚指定的配置项和数据显示图表。 
59.    myChart.setOption(option); 

4、实现功能

（1）路由

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

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

（2）方法

1. public function index() 
2.  { 
3.   return view('user.index'); 
4.  } 
5. // 是ajax所用的的方法，得到要显示的数据，返回数组 
6. public function axis() 
7.  { 
8.   $key = Key::all('name', 'ttl', 'created_time'); 
9.   return $key; 
10.  } 

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

（4）index.blade.php的内容

1. <div class="contain" style="width: 84%;" id="contain"></div> 
2.    
3.  <script type="text/javascript"> 
4.    
5.   var names = []; // 设置两个变量用来存变量 
6.   var ttls = []; 
7.   var time = Date.parse(new Date()).toString().substr(0, 10); // 获取当前时间，精确到秒，但因为是毫秒级的，会多3个0，变成字符串后去掉 
8.   time = parseInt(time); 
9.   function getData() 
10.   { 
11.    $.post("{{ url('/axis') }}", { 
12.     "_token": "{{ csrf_token() }}" 
13.    }, function(data) { 
14.     $.each(data, function(i, item) { 
15.      names.push(item.name); 
16.      if((ttl = (parseInt(item.ttl) + parseInt(item.created_time) - time)) > 0) { // 小于0就==0， 
17.       ttls.push(ttl); 
18.      } else { 
19.       ttls.push(0); 
20.      } 
21.     }); 
22.    }); 
23.   } 
24.   getData(); // 一定不能忘了，调用 
25.    
26.   // 实现画图的功能 
27.   function chart() { 
28.    var myChart = echarts.init(document.getElementById("contain")); 
29.    
30.    option = { 
31.     title : { 
32.      text: '键名过期时间变化图' 
33.     }, 
34.     tooltip : { 
35.      trigger: 'axis' 
36.     }, 
37.     legend: { 
38.      data:['过期剩余时间'] 
39.     }, 
40.     toolbox: { 
41.      show : true, 
42.      feature : { 
43.       mark : {show: true}, 
44.       dataView : {show: true, readOnly: false}, 
45.       magicType : {show: true, type: ['line', 'bar']}, 
46.       restore : {show: true}, 
47.       saveAsImage : {show: true} 
48.      } 
49.     }, 
50.     calculable : true, 
51.     xAxis : [ 
52.      { 
53.       axisLine: { 
54.        lineStyle: { color: '#333' } 
55.       }, 
56.       axisLabel: { 
57.        rotate: 30, 
58.        interval: 0 
59.       }, 
60.       type : 'category', 
61.       boundaryGap : false, 
62.       data : names // x的数据，为上个方法中得到的names 
63.      } 
64.     ], 
65.     yAxis : [ 
66.      { 
67.       type : 'value', 
68.       axisLabel : { 
69.        formatter: '{value} 秒' 
70.       }, 
71.       axisLine: { 
72.        lineStyle: { color: '#333' } 
73.       } 
74.      } 
75.     ], 
76.     series : [ 
77.      { 
78.       name:'过期剩余时间', 
79.       type:'line', 
80.       smooth: 0.3, 
81.       data: ttls // y轴的数据，由上个方法中得到的ttls  
82.      }  
83.     ] 
84.    }; 
85.    // 使用刚指定的配置项和数据显示图表。 
86.    myChart.setOption(option); 
87.   } 
88.    
89.   setTimeout('chart()', 1000); // 为什么加定时器？因为上面是一起执行的，可能还未取得数据，便已经将图画好了，图上就没有数据，所以这里我延迟了1s， 
90.    
91.  </script> 

（5）大功告成！！

Tags: laravel ECharts

分享到：