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

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

div class="contain" style="width: 84%;" id="contain">/div>

var myChart = echarts.init(document.getElementById("contain"));
 
   option = {
    title : {
     text: '時(shí)間變化圖' // 標(biāo)題
    },
    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, // 是否啟動拖拽重計(jì)算屬性，默認(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:'時(shí)間', 
      type:'line',
      smooth: 0.3, // 線有弧度
      data: [] // y軸數(shù)據(jù)
     }
    ]
   };
   // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
   myChart.setOption(option); 

Route::get('/', 'UserController@index');
Route::post('/axis', 'UserController@axis');

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;
 }

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)槭呛撩爰壍?，會?個(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>