最新消息:欢迎访问刘磊博客

通过PHP和echarts交互实现折现图

PHP编程 飞翔的mouse 97浏览

直接上代码

  • php部分

<?php 
require('db_config.php');
$conn = mysql_connect($mysql_server_name,$mysql_username,$mysql_password) or die('error connecting');
mysql_query('set names utf8');
mysql_select_db($mysql_database);
$result = mysql_query('select * from study');
$data = '';
$array = [];
class User{
    public $name;
    public $age;
    public $tim2;
}
while ($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
    $user = new User();
    $user->name = $row['name'];
    $user->age = $row['age'];
    $array[] = $user;
}
$data = json_encode($array);
echo $data;
 ?>

  • html部分

<!DOCTYPE html>
<html>
<head>
    <title>echarts</title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="height:400px"></div>
    <script type="text/javascript">
              var  myChart = echarts.init(document.getElementById('main'));
              var arr1=[],arr2=[];
              function arrTest(){
                $.ajax({
                  type:"post",
                  async:false,
                  url:"index.php",
                  data:{},
                  dataType:"json",
                  success:function(result){
                    if (result) {
                      for (var i = 0; i < result.length; i++) {
                          arr1.push(result[i].name);
                          arr2.push(result[i].age);
                      }
                    }
                  }
                })
                return arr1,arr2;
              }
              arrTest();
              console.info(arr1);
              var option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                       data:['age']
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : arr1
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            "name":"age",
                            "type":"line",
                            "data":arr2
                        }
                    ]
                };
                // 为echarts对象加载数据
                myChart.setOption(option);
            // }
    </script>
</body>
</html>

转载请注明:刘磊博客 » 通过PHP和echarts交互实现折现图