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);
?>