echart+php 动态获取数据（条形图）

最新推荐文章于 2024-08-24 09:46:19 发布

帅帅索大

最新推荐文章于 2024-08-24 09:46:19 发布

阅读量3.4k

点赞数 4

分类专栏： PHP echart

本文链接：https://blog.csdn.net/OnePiece_only/article/details/79409686

版权

PHP 同时被 2 个专栏收录

44 篇文章 1 订阅

订阅专栏

echart

2 篇文章 0 订阅

订阅专栏

echart + php动态获取数据 [要是下面的代码运行不出来看一下我注释的部分有提示出不来可能是数据类型问题可以加我qq：2721423445 记得备注哦! 共同讨论 ]
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>
      <div id="main" style="border:1px solid red;height:400px;"></div>
  </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);
?>