好资源导航 » 文章资讯 » laravel5.5添加echarts实现画图功能的方法

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

2023-08-12 22:35:05 62

一、下载echarts

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

二、在页面中引入echarts

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

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

1.添加路由

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

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

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

2.控制器添加代码

publicfunctiontest2()
{
returnview('cunliang.test2');
}
publicfunctionodata()
{
//返回最近七天的数据
$data=Cunliang::where("file_type","O")->latest()
->take(7)
->get();

returnarray_reverse($data->toArray(),false);

}

3.页面blade模板添加

4.添加js


varnames=[];
varttls=[];
functiongetData()
{
$.post("{{url('/odata')}}",{
"_token":"{{csrf_token()}}"
},function(data){
$.each(data,function(i,item){
names.push(item.update_date);
ttls.push(item.space_size);
});
});
}
getData();
functionchart(){
varmyChart=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);

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

参考资料

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

官网教程

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

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐