집 > 기사 > 백엔드 개발 > echart 및 php는 데이터의 동적 수집을 구현합니다.

echart 및 php는 데이터의 동적 수집을 구현합니다.

小云云원래의: 2018-03-02 09:30:183810검색

이 글에서는 주로 echart와 php를 통해 동적으로 데이터를 얻는 구현 방법을 공유합니다. 다음 코드가 실행되지 않으면 댓글 섹션을 참조하세요.

html 코드 부분

<html>
  <head>
      <title>bingtu.html</title>
      <meta charset="utf-8" />
      <script src="https://cdn.bootcss.com/echarts/4.0.2/echarts-en.js"></script>
      <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
  </head>
  </head>
  <body>
      <p id="main" style="border:1px solid red;height:400px;"></p>
  </body></html>

js 코드 부분

<script>   var chart = echarts.init(document.getElementById('main'));
   chart.setOption({
     title:{
       text : '异步加载',
     },
     tooltip: {},
     legend:{
       data:['销量'],
     },
     xAxis:{
       data:[],
     },
     yAxis:{},
     series:[{
       name:'销量',
       type:'bar',
       data:[]
     }]
   });   var categories = [] , data = [];    /*注意一下 {:url()} 这一块填写你要请求的地址  你可以是http://.....com  也可以是你项目中某块文件 Index/index*/
   $.post("{:url('ticket/getSellRecord',['type'=>'week'])}").done(function (info) {
    // 填入数据
    /*特别注意这里 如果info是json对象就不用JSON.parse了 如果是json字符串就要转成对象*/
    console.log(info); 
    info = JSON.parse(info);    for(var i = 0 ; i < info.length ; i++)
    {
      categories.push(info[i]['seller_id']);
      data.push(info[i]['amount']);
    }
    chart.setOption({
        xAxis: {
            data: categories
        },
        series: [{            // 根据名字对应到相应的系列
            name: '销量',
            data: data
        }]
    });
});</script>

php 코드 부분

<?php
    /*你可以设个定值去测试 ， 动态的就是你从数据库去获取  这部分主要的是格式*/
    /*返回的数据格式为json 在js中打印一下传过去的数据是json字符串还是json对象 如果是json字符串一定要转成json对象  可用JSON.parse */
    $data = [["seller_id"=>2,"amount"=>"2000"],["seller_id"=>8,"amount"=>"501"]];    return json_encode($data);?>

echart 및 php는 데이터의 동적 수집을 구현합니다.

관련 기사