這篇文章給大家介紹使用laravel和ECharts怎么實現(xiàn)一個折線圖效果，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

創(chuàng)新互聯(lián)專注于企業(yè)全網(wǎng)營銷推廣、網(wǎng)站重做改版、德江網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5建站、商城開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為德江等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

1、首先引入echart.js

<script type="text/javascript" src="{{ asset('/public/js/echarts.js') }}"></script>

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

<div class="contain"  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"  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>

關(guān)于使用laravel和ECharts怎么實現(xiàn)一個折線圖效果就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

本文名稱：使用laravel和ECharts怎么實現(xiàn)一個折線圖效果-創(chuàng)新互聯(lián)
網(wǎng)址分享：http://www.chinadenli.net/article18/dodigp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計公司、ChatGPT、動態(tài)網(wǎng)站、網(wǎng)站收錄、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)