laravel5.5添加echarts实现画图功能的方法

一、下载echarts

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

二、在页面中引入echarts

?

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

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

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

1.添加路由

?

1 2 3

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

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

2.控制器添加代码

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

public function test2() {   return view( 'cunliang.test2' ); } public function odata() {   //返回最近七天的数据   $data = Cunliang::where( "file_type" , "O" )->latest()       ->take(7)       ->get();     return array_reverse($data->toArray(), false );   }

3.页面blade模板添加

?

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

4.添加js

?

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

<script type= "text/javascript" >   var names = [];   var ttls = [];   function getData()   {    $.post( "{{ url('/odata') }}" , {     "_token" : "{{ csrf_token() }}"    }, function (data) {     $.each(data, function (i, item) {      names.push(item.update_date);      ttls.push(item.space_size);     });    });   }   getData();   function chart() {    var myChart = echarts.init(document.getElementById( "contain" ));        option = {     title : {      text: 'O域数据最近7天更新情况'     },     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} M'       },       axisLine: {        lineStyle: { color: '#333' }       }      }     ],     series : [      {       name: '数据大小' ,       type: 'line' ,       smooth: 0.3,       data: ttls // y轴的数据，由上个方法中得到的ttls      }     ]   };   // 使用刚指定的配置项和数据显示图表。   myChart.setOption(option);   }   setTimeout( 'chart()' , 1000); </script>

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

参考资料

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

官网教程

以上这篇laravel5.5添加echarts实现画图功能的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持服务器之家。

原文链接：https://blog.csdn.net/yiluohan0307/article/details/79860777