laravel 과 ECharts 를 사용 하여 접 는 그림 효 과 를 실현 하 는 예

1.우선 echart.js 도입

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

2.html 페이지 에 레이아웃 용기 가 있어 야 합 니 다.그림 을 표시 하려 면 너비 와 높이 를 설정 해 야 합 니 다.

<div class="contain" style="width: 84%;" 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" style="width: 84%;" 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>

(5)큰 성 과 를 거두다!!
이상 의 이 편 은 laravel 과 ECharts 를 사용 하여 접 는 그림 효 과 를 실현 하 는 예 는 바로 소 편 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 가 되 고 저희 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.