echarts饼图选中一块_echarts数据自我定制（五）--各种各样的饼图

上图

源代码：

pie--静态和动态，包括原始饼图，环形饼图，钟表饼图

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}
{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

]

]);

}

});

}