標籤：function ajax 柱狀圖
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="echarts.min.js"></script>
<script src="jquery.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:"echart.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].sort);
}
}
}
})
return arr1,arr2;
}
arrTest();
var option = {
tooltip: {
show: true
},
legend: {
data:[‘sort‘]
},
xAxis : [
{
type : ‘category‘,
data : arr1
}
],
yAxis : [
{
type : ‘value‘
}
],
series : [
{
"name":"sort",
"type":"bar",
"data":arr2
}
]
};
// 為echarts對象載入資料
myChart.setOption(option);
// }
</script>
</body>
<?php
$mysql_server_name=‘localhost‘; //改成自己的mysql資料庫伺服器
$mysql_username=‘root‘; //改成自己的mysql資料庫使用者名稱
$mysql_password=‘‘; //改成自己的mysql資料庫密碼,初始預設密碼為空白
$mysql_database=‘11111‘; //改成自己的mysql資料庫名
$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 brand");
$data="";
$array= array();
class User{
public $name;
public $sort;
}
while($row = mysql_fetch_array($result,MYSQL_ASSOC)){
$user=new User();
$user->name = $row[‘name‘];
$user->sort = $row[‘sort‘];
$array[]=$user;
}
$data=json_encode($array);
// echo "{".‘"user"‘.":".$data."}";
echo $data;
PHP+ECharts系列 - 柱狀圖（橫條圖）執行個體一
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
