快捷導(dǎo)航

使用laravel和ECharts實(shí)現(xiàn)折線圖效果的例子

更新時(shí)間：2019年10月09日 15:42:37 作者：snow_small

今天小編就為大家分享一篇使用laravel和ECharts實(shí)現(xiàn)折線圖效果的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

1、首先引入echart.js

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

2、html頁(yè)面，要有一個(gè)布局容器，用來(lái)顯示圖像，一定要設(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開(kāi)始
      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)訪問(wèn)/首頁(yè)時(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è)變量用來(lái)存變量
  var ttls = [];
  var time = Date.parse(new Date()).toString().substr(0, 10); // 獲取當(dāng)前時(shí)間，精確到秒，但因?yàn)槭呛撩爰?jí)的，會(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: '鍵名過(guò)期時(shí)間變化圖'
    },
    tooltip : {
     trigger: 'axis'
    },
    legend: {
     data:['過(guò)期剩余時(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:'過(guò)期剩余時(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)將圖畫好了，圖上就沒(méi)有數(shù)據(jù)，所以這里我延遲了1s，
 
 </script>

（5）大功告成！！

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

您可能感興趣的文章: