通过PHP和echarts交互实现折现图
2017-03-29 本文已影响62人
liamu
直接上代码
- 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>
