使用laravel和ECharts實(shí)現(xiàn)折線圖效果的例子
1、首先引入echart.js
<script type="text/javascript" src="{{ asset('/public/js/echarts.js') }}"></script>
2、html頁面,要有一個(gè)布局容器,用來顯示圖像,一定要設(shè)置寬和高
<div class="contain" style="width: 84%;" id="contain"></div>
3、echarts折線圖的使用
var myChart = echarts.init(document.getElementById("contain")); option = { title : { text: '時(shí)間變化圖' // 標(biāo)題 }, tooltip : { trigger: 'axis' // 折線圖 }, legend: { data:['時(shí)間'] // 圖例,就是折線圖上方的符號(hào) }, 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, // 是否啟動(dòng)拖拽重計(jì)算屬性,默認(rèn)false xAxis : [ // x坐標(biāo)軸 { axisLine: { // x坐標(biāo)軸顏色 lineStyle: { color: '#333' } }, axisLabel: { // x軸的數(shù)據(jù)會(huì)旋轉(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:'時(shí)間', type:'line', smooth: 0.3, // 線有弧度 data: [] // y軸數(shù)據(jù) } ] }; // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。 myChart.setOption(option);
4、實(shí)現(xiàn)功能
(1)路由
Route::get('/', 'UserController@index'); Route::post('/axis', 'UserController@axis');
(2)方法
public function index() { return view('user.index'); } // 是ajax所用的的方法,得到要顯示的數(shù)據(jù),返回?cái)?shù)組 public function axis() { $key = Key::all('name', 'ttl', 'created_time'); return $key; }
(3)當(dāng)訪問/首頁時(shí),到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è)置兩個(gè)變量用來存變量 var ttls = []; var time = Date.parse(new Date()).toString().substr(0, 10); // 獲取當(dāng)前時(shí)間,精確到秒,但因?yàn)槭呛撩爰壍?,?huì)多3個(gè)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)用 // 實(shí)現(xiàn)畫圖的功能 function chart() { var myChart = echarts.init(document.getElementById("contain")); option = { title : { text: '鍵名過期時(shí)間變化圖' }, tooltip : { trigger: 'axis' }, legend: { data:['過期剩余時(shí)間'] }, 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ù),為上個(gè)方法中得到的names } ], yAxis : [ { type : 'value', axisLabel : { formatter: '{value} 秒' }, axisLine: { lineStyle: { color: '#333' } } } ], series : [ { name:'過期剩余時(shí)間', type:'line', smooth: 0.3, data: ttls // y軸的數(shù)據(jù),由上個(gè)方法中得到的ttls } ] }; // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。 myChart.setOption(option); } setTimeout('chart()', 1000); // 為什么加定時(shí)器?因?yàn)樯厦媸且黄饒?zhí)行的,可能還未取得數(shù)據(jù),便已經(jīng)將圖畫好了,圖上就沒有數(shù)據(jù),所以這里我延遲了1s, </script>
(5)大功告成?。?/strong>
以上這篇使用laravel和ECharts實(shí)現(xiàn)折線圖效果的例子就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- 微信小程序使用echarts獲取數(shù)據(jù)并生成折線圖
- Layer+Echarts構(gòu)建彈出層折線圖的方法
- echarts多條折線圖動(dòng)態(tài)分層的實(shí)現(xiàn)方法
- Echarts動(dòng)態(tài)加載多條折線圖的實(shí)現(xiàn)代碼
- 基于mpvue小程序使用echarts畫折線圖的方法示例
- vue+echarts實(shí)現(xiàn)可拖動(dòng)節(jié)點(diǎn)的折線圖(支持拖動(dòng)方向和上下限的設(shè)置)
- Echarts教程之通過Ajax實(shí)現(xiàn)動(dòng)態(tài)加載折線圖的方法
- jQuery插件echarts實(shí)現(xiàn)的單折線圖效果示例【附demo源碼下載】
- jQuery插件echarts實(shí)現(xiàn)的多折線圖效果示例【附demo源碼下載】
- jQuery插件echarts設(shè)置折線圖中折線線條顏色和折線點(diǎn)顏色的方法
- echarts實(shí)現(xiàn)折線圖的拖拽效果
相關(guān)文章
php使用file_get_contents(‘php://input‘)和$_POST的區(qū)別實(shí)例對比
這篇文章主要介紹了php使用file_get_contents(‘php://input‘)和$_POST的區(qū)別實(shí)例對比,這個(gè)知識(shí)點(diǎn)是比較常用的,有需要的可以參考下2021-03-03php序列化函數(shù)serialize() 和 unserialize() 與原生函數(shù)對比
這篇文章主要介紹了php序列化函數(shù)serialize() 和 unserialize() 與php原生序列化方法對比,有需要的小伙伴可以參考下。2015-05-05bindParam和bindValue的區(qū)別以及在Yii2中的使用詳解
下面小編就為大家分享一篇bindParam和bindValue的區(qū)別以及在Yii2中的使用詳解,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03