ホームページ > 記事 > バックエンド開発 > echartとphpはデータの動的取得を実装します

echartとphpはデータの動的取得を実装します

小云云オリジナル: 2018-03-02 09:30:183775ブラウズ

この記事では主に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はデータの動的取得を実装します

関連記事