今天小编就为大家分享一篇laravel5.5添加echarts实现画图功能的方法，具有很好的参考价值，希望对大家有所帮助，一起跟随小编过来看看吧。

一、下载echarts

我用的是3.X版本，下载地址

二、在页面中引入echarts

<script type="text/javascript" src="/js/echarts.min.js"></script>

我把下载下来的echarts.min.js放在了public/js/目录下

三、通过post的请求获取数据并在页面展示

1.添加路由

Route::get('/test2', 'CunliangController@test2')->name('test2');

Route::post('/odata', 'CunliangController@odata');

/test2用来展示echarts的界面，/odata获取数据。

2.控制器添加代码

1. public function test2() 
2. { 
3.  return view('cunliang.test2'); 
4. } 
5. public function odata() 
6. { 
7.  //返回最近七天的数据 
8.  $data = Cunliang::where("file_type", "O")->latest() 
9.      ->take(7) 
10.      ->get(); 
11.  
12.  return array_reverse($data->toArray(),false); 
13.  
14. } 

3.页面blade模板添加

<div id="contain" style="width: 950px;height:400px;"></div>

4.添加js

1. <script type="text/javascript"> 
2.  var names = []; 
3.  var ttls = []; 
4.  function getData() 
5.  { 
6.   $.post("{{ url('/odata') }}", { 
7.    "_token": "{{ csrf_token() }}" 
8.   }, function(data) { 
9.    $.each(data, function(i, item) { 
10.     names.push(item.update_date); 
11.     ttls.push(item.space_size); 
12.    }); 
13.   }); 
14.  } 
15.  getData(); 
16.  function chart() { 
17.   var myChart = echarts.init(document.getElementById("contain")); 
18.  
19.  
20.   option = { 
21.    title : { 
22.     text: 'O域数据最近7天更新情况' 
23.    }, 
24.    tooltip : { 
25.     trigger: 'axis' 
26.    }, 
27.    legend: { 
28.     data:['数据大小'] 
29.    }, 
30.    toolbox: { 
31.     show : true, 
32.     feature : { 
33.      mark : {show: true}, 
34.      dataView : {show: true, readOnly: false}, 
35.      magicType : {show: true, type: ['line', 'bar']}, 
36.      restore : {show: true}, 
37.      saveAsImage : {show: true} 
38.     } 
39.    }, 
40.    calculable : true, 
41.    xAxis : [ 
42.     { 
43.      axisLine: { 
44.       lineStyle: { color: '#333' } 
45.      }, 
46.      axisLabel: { 
47.       rotate: 30, 
48.       interval: 0 
49.      }, 
50.      type : 'category', 
51.      boundaryGap : false, 
52.      data : names // x的数据，为上个方法中得到的names 
53.     } 
54.    ], 
55.    yAxis : [ 
56.     { 
57.      type : 'value', 
58.      axisLabel : { 
59.       formatter: '{value} M' 
60.      }, 
61.      axisLine: { 
62.       lineStyle: { color: '#333' } 
63.      } 
64.     } 
65.    ], 
66.    series : [ 
67.     { 
68.      name:'数据大小', 
69.      type:'line', 
70.      smooth: 0.3, 
71.      data: ttls // y轴的数据，由上个方法中得到的ttls 
72.     } 
73.    ] 
74.  }; 
75.  // 使用刚指定的配置项和数据显示图表。 
76.  myChart.setOption(option); 
77.  } 
78.  setTimeout('chart()', 1000); 
79. </script> 

其中getdata通过post得到的数据为echart准备数据，function chart()为echart的数据展示形式，可以根据自己需求在官网查找。

Tags: laravel5 5 echarts

分享到：