echart 動態獲生成圖形的核心是需要把請求到的數據重新設定setOption添加進去
如果你的顯示不出來圖形注意我的註釋部分 有提示
html代碼
<html>
<head>
<meta charset="utf-8" />
<title>bingtu.html</title>
<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>
<body>
<div id="main" style="border:1px solid red;height:300px;" ></div>
</body>
</html>
<script>js代碼
<script>
function reSetOption()
{
$.post('你要訪問數據的地址',function(info){
//查看info是否爲json對象 如果是不用JSON.parse
//如果是json字符串需要轉成json對象
info = JSON.parse(info);
console.log(info);
chart.setOption({
series:[{
data:info,
}],
})
});
}
var chart = echarts.init(document.getElementById('main'));
option = {
tooltip:{},
title:{
text:'餅圖',
},
series : [{
name: '銷售統計',
type: 'pie',
radius: '55%',
data:[],
}]
};
chart.setOption(option);
reSetOption();
</script>php代碼
<?php
/*如果你是想傳動態的數據 ， 如果你的數組鍵不是name value就顯示不出來圖形 所以你得把你的數據中要顯示的內容鍵改爲name、value*/
/*你可以用循環 把你需要的值取出來賦給一個鍵爲name value的新數組*/
$data = [['value'=>335, 'name'=>2],['value'=>400, 'name'=>8]];
return json_encode($data);
?>