echart and php implement dynamic acquisition of data-PHP Tutorial-php.cn

echart and php implement dynamic acquisition of data

小云云

Release： 2023-03-20 16:48:01

Original

3830 people have browsed it

This article mainly shares with you the implementation method of dynamically obtaining data with echart and php. If the following code cannot be executed, please refer to the comments section. I hope it can help you.

html part of the code

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

Copy after login

js part of the code

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

Copy after login

php part of the code

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

Copy after login

Related recommendations:

echarts dynamically obtains data instances

The above is the detailed content of echart and php implement dynamic acquisition of data. For more information, please follow other related articles on the PHP Chinese website!