使用laravel和ECharts实现折线图效果的例子
1、首先引入echart.js
2、html页面，要有一个布局容器，用来显示图像，一定要设置宽和高
3、echarts折线图的使用
varmyChart=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）路由
Route::get('/','UserController@index');
Route::post('/axis','UserController@axis');
（2）方法
publicfunctionindex()
{
returnview('user.index');
}
//是ajax所用的的方法，得到要显示的数据，返回数组
publicfunctionaxis()
{
$key=Key::all('name','ttl','created_time');
return$key;
}
（3）当访问/首页时，到index.blade.php
（4）index.blade.php的内容
（5）大功告成！！
以上这篇使用laravel和ECharts实现折线图效果的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。