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

1,923次阅读

直接上代码

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>

正文完