1、首先引入echart.js

2、html頁面，要有一個布局容器，用來顯示圖像，一定要設(shè)置寬和高

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)容

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，

(5)大功告成！！

以上這篇使用laravel和ECharts實現(xiàn)折線圖效果的例子就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

總結(jié)

以上是生活随笔為你收集整理的php echarts 两条曲线图,使用laravel和ECharts实现折线图效果的例子的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。