上圖
源代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>pie--靜態和動態，包括原始餅圖，環形餅圖，鐘錶餅圖</title>
<script src="../js/esl.js"></script>
<script src="../js/jquery-1.7.1.js"></script>
<script type="text/javascript">
require.config({
packages:[
{
name:'echarts',
location:'../echarts-master/src',
main:'echarts'
},
{
name:'zrender',
location:'../zrender-master/src',
main:'zrender'
}
]
});
var option1 = {
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:['qq','msn','pps','ie','360']
},
calculable : true,
series : [
{
name:'訪問來源',
type:'pie',
radius : [80, 120],//半徑，默認爲Min(width, height) / 2 - 50, 傳數組實現環形圖，[內半徑，外半徑]
itemStyle : {
normal : {//默認樣式
label : {
show : true
},
labelLine : {
show : false
}
},
emphasis : {//強調樣式（懸浮時樣式
label : {
show : true,
position : 'center',
textStyle : {
fontSize : '30',
fontWeight : 'bold'
}
}
}
},
data:[
{value:335, name:'qq'},
{value:310, name:'msn'},
{value:234, name:'pps'},
{value:135, name:'ie'},
{value:1548, name:'360'}
]
}
]
};
var option2 = {
title : {
text: '動態數據',
subtext: '純屬虛構'
},
tooltip : {
trigger: 'item'
},
legend: {
data:['隨機數據1','隨機數據2','隨機數據3','隨機數據4','隨機數據5']
},
calculable : false,
series : [
{
name:'pie',
type:'pie',
radius : [0, 110],
center: [250, 225],
data: (function(){
var res = [];
var len = 0;
while (len++ < 5) {
res.push({
name: '隨機數據' + len,
value: Math.round(Math.random()*10)
});
}
return res;
})()
}
]
};
var myChart1;
var myChart2;
require(
[
'echarts',
'echarts/chart/pie'
],
function(ec){
myChart1=ec.init(document.getElementById('main1'));
myChart1.setOption(option1);
myChart2=ec.init(document.getElementById('main2'));
myChart2.setOption(option2);
var timeTicket2;
//var lastIndex = 5;
clearInterval(timeTicket2);
timeTicket2 = setInterval(function(){
//ajax請求一個數據。插入數組後面。每時間間隔請求一個
RandPie(ec);
}, 2000);
}
)
//全局定義
var lastIndex = 5;
function RandPie(ec){
$.ajax({
url:"../control/AjaxService.php?method=RandANum",
dataType:"text",
success:function(data)
{
Rdata=eval(data);
// alert(Rdata);
lastIndex += 1;
// 動態數據接口 addData
myChart2.addData([
[
0, // 系列索引
{ // 新增數據
name: '隨機數據' + lastIndex,
value: Rdata
},
false, // 新增數據是否從隊列頭部插入
false, // 是否增加隊列長度，false則自定刪除原有數據，隊頭插入刪隊尾，隊尾插入刪隊頭
'隨機數據' + lastIndex
]
]);
}
});
}
</script>
</head>
<body>
<div id="main1" style="height:350px;width:700px; border:1px solid #ccc; padding:10px;"></div>
<div id="main2" style="height:350px;width:700px; border:1px solid #ccc; padding:10px;"></div>
<div id="main3" style="height:350px;width:640px; border:1px solid #ccc; padding:10px;right:10px;top:9px;position:absolute;"></div>
<div id="main4" style="height:350px;width:640px; border:1px solid #ccc; padding:10px;right:10px;top:380px;position:absolute;"></div>
</body>
</html>