首页 / PHP / echart和php实现动态获取数据

echart和php实现动态获取数据

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了echart和php实现动态获取数据，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1676字，纯文字阅读大概需要3分钟。

内容图文

本文主要和大家分享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);?>

相关推荐：

echarts动态获取数据实例

以上就是echart和php实现动态获取数据的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的echart和php实现动态获取数据全部内容，希望文章能够帮你解决echart和php实现动态获取数据所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/139413.html

来源：【匿名】