使用laravel和ECharts怎么實現一個折線圖效果

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

1、首先引入echart.js

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

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

<div class="contain"  id="contain"></div>

3、echarts折線圖的使用

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, // 是否啟動拖拽重計算屬性，默認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）方法

public function index()
 {
  return view('user.index');
 }
// 是ajax所用的的方法，得到要顯示的數據，返回數組
public function axis()
 {
  $key = Key::all('name', 'ttl', 'created_time');
  return $key;
 }

（3）當訪問/首頁時，到index.blade.php

（4）index.blade.php的內容

<div class="contain"  id="contain"></div>
 
 <script type="text/javascript">
 
  var names = []; // 設置兩個變量用來存變量
  var ttls = [];
  var time = Date.parse(new Date()).toString().substr(0, 10); // 獲取當前時間，精確到秒，但因為是毫秒級的，會多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(); // 一定不能忘了，調用
 
  // 實現畫圖的功能
  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的數據，為上個方法中得到的names
     }
    ],
    yAxis : [
     {
      type : 'value',
      axisLabel : {
       formatter: '{value} 秒'
      },
      axisLine: {
       lineStyle: { color: '#333' }
      }
     }
    ],
    series : [
     {
      name:'過期剩余時間',
      type:'line',
      smooth: 0.3,
      data: ttls // y軸的數據，由上個方法中得到的ttls 
     } 
    ]
   };
   // 使用剛指定的配置項和數據顯示圖表。
   myChart.setOption(option);
  }
 
  setTimeout('chart()', 1000); // 為什么加定時器？因為上面是一起執行的，可能還未取得數據，便已經將圖畫好了，圖上就沒有數據，所以這里我延遲了1s，
 
 </script>

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