1、首先引入echart.js
script type="text/javascript" src="{{ asset('/public/js/echarts.js') }}">/script>
2、html頁面，要有一個布局容器，用來顯示圖像，一定要設(shè)置寬和高
div class="contain" style="width: 84%;" id="contain">/div>
3、echarts折線圖的使用
var myChart = echarts.init(document.getElementById("contain"));
option = {
title : {
text: '時間變化圖' // 標(biāo)題
},
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, // 是否啟動拖拽重計算屬性，默認(rèn)false
xAxis : [ // x坐標(biāo)軸
{
axisLine: { // x坐標(biāo)軸顏色
lineStyle: { color: '#333' }
},
axisLabel: { // x軸的數(shù)據(jù)會旋轉(zhuǎn)30度
rotate: 30,
interval: 0
},
type : 'category',
boundaryGap : false, // x軸從0開始
data : [] // x軸數(shù)據(jù)
}
],
yAxis : [ // y軸
{
type : 'value',
axisLabel : {
formatter: '{value} 秒' // y軸的值都加上秒的單位
},
axisLine: {
lineStyle: { color: '#333' }
}
}
],
series : [ // 設(shè)置圖標(biāo)數(shù)據(jù)用
{
name:'時間',
type:'line',
smooth: 0.3, // 線有弧度
data: [] // y軸數(shù)據(jù)
}
]
};
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
4、實現(xiàn)功能
（1）路由
Route::get('/', 'UserController@index');
Route::post('/axis', 'UserController@axis');
（2）方法
public function index()
{
return view('user.index');
}
// 是ajax所用的的方法，得到要顯示的數(shù)據(jù)，返回數(shù)組
public function axis()
{
$key = Key::all('name', 'ttl', 'created_time');
return $key;
}
（3）當(dāng)訪問/首頁時，到index.blade.php
（4）index.blade.php的內(nèi)容
div class="contain" style="width: 84%;" id="contain">/div>
script type="text/javascript">
var names = []; // 設(shè)置兩個變量用來存變量
var ttls = [];
var time = Date.parse(new Date()).toString().substr(0, 10); // 獲取當(dāng)前時間，精確到秒，但因為是毫秒級的，會多3個0，變成字符串后去掉
time = parseInt(time);
function getData()
{
$.post("{{ url('/axis') }}", {
"_token": "{{ csrf_token() }}"
}, function(data) {
$.each(data, function(i, item) {
names.push(item.name);
if((ttl = (parseInt(item.ttl) + parseInt(item.created_time) - time)) > 0) { // 小于0就==0，
ttls.push(ttl);
} else {
ttls.push(0);
}
});
});
}
getData(); // 一定不能忘了，調(diào)用
// 實現(xiàn)畫圖的功能
function chart() {
var myChart = 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,
xAxis : [
{
axisLine: {
lineStyle: { color: '#333' }
},
axisLabel: {
rotate: 30,
interval: 0
},
type : 'category',
boundaryGap : false,
data : names // x的數(shù)據(jù)，為上個方法中得到的names
}
],
yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value} 秒'
},
axisLine: {
lineStyle: { color: '#333' }
}
}
],
series : [
{
name:'過期剩余時間',
type:'line',
smooth: 0.3,
data: ttls // y軸的數(shù)據(jù)，由上個方法中得到的ttls
}
]
};
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
}
setTimeout('chart()', 1000); // 為什么加定時器？因為上面是一起執(zhí)行的，可能還未取得數(shù)據(jù)，便已經(jīng)將圖畫好了，圖上就沒有數(shù)據(jù)，所以這里我延遲了1s，
/script>
（5）大功告成??！
以上這篇使用laravel和ECharts實現(xiàn)折線圖效果的例子就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:- 微信小程序使用echarts獲取數(shù)據(jù)并生成折線圖
- Layer+Echarts構(gòu)建彈出層折線圖的方法
- echarts多條折線圖動態(tài)分層的實現(xiàn)方法
- Echarts動態(tài)加載多條折線圖的實現(xiàn)代碼
- 基于mpvue小程序使用echarts畫折線圖的方法示例
- vue+echarts實現(xiàn)可拖動節(jié)點的折線圖（支持拖動方向和上下限的設(shè)置）
- Echarts教程之通過Ajax實現(xiàn)動態(tài)加載折線圖的方法
- jQuery插件echarts實現(xiàn)的單折線圖效果示例【附demo源碼下載】
- jQuery插件echarts實現(xiàn)的多折線圖效果示例【附demo源碼下載】
- jQuery插件echarts設(shè)置折線圖中折線線條顏色和折線點顏色的方法
- echarts實現(xiàn)折線圖的拖拽效果
