统计图实现ajax 变换,echarts画圆环统计图并加载动态数据 （ajax获取数据）

最近，要用到echarts画饼图统计图，于是学习了会，附上echarts官网

http://echarts.baidu.com/doc/example.html

看到echarts有一些饼图实例，代码如下：

option = {

tooltip : {

trigger: 'item',

formatter: "{a}

{b} : {c} ({d}%)"

},

legend: {

orient : 'vertical',

x : 'left',

data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']

},

toolbox: {

show : true,

feature : {

mark : {show: true},

dataView : {show: true, readOnly: false},

magicType : {

show: true,

type: ['pie', 'funnel'],

option: {

funnel: {

x: '25%',

width: '50%',

funnelAlign: 'center',

max: 1548

}

}

},

restore : {show: true},

saveAsImage : {show: true}

}

},

calculable : true,

series : [

{

name:'访问来源',

type:'pie',

radius : ['50%', '70%'],

itemStyle : {

normal : {

label : {

show : false

},

labelLine : {

show : false

}

},

emphasis : {

label : {

show : true,

position : 'center',

textStyle : {

fontSize : '30',

fontWeight : 'bold'

}

}

}

},

data:[

{value:335, name:'直接访问'},

{value:310, name:'邮件营销'},

{value:234, name:'联盟广告'},

{value:135, name:'视频广告'},

{value:1548, name:'搜索引擎'}

]

}

]

};

这边数据是写死的，335,310等，那么如何动态加入数据，使之成为动态的统计图呢？

$(function() {

var jobChart, ageChart, progressChart;

function drawCharts(data) {

var jobOption = {

title: {

text: '员工在职情况',

x: 'center',

y: 10,

textStyle: {

fontSize: 16,

fontWeight: 'bolder',

color: '#4b4b4b'

}

},

legend: {

orient: 'horizontal',

x: 'center',

y: 'bottom',

itemWidth: 6,

itemHeight: 12,

selectedMode: false,

data: ['正式员工', '试用员工', '实习/兼职']

},

calculable: false,

series: [

{

name: '在职人数',

type: 'pie',

radius: ['40%', '50%'],

itemStyle: {

normal: {

label: {

position: 'center',

distance: 8,

textStyle: {

color: '#4b4b4b',

fontSize: '14'

},

formatter: function(){

return "在职人数" + "\n" + data.jobUserCount + "人"

}

},

labelLine: {

show: false

}

},

emphasis: {

label: {

show: true,

position: 'outer',

textStyle: {

align: 'center',

baseline: 'middle',

fontSize: '12'

},

formatter: function(params){

return params.name +'\n'+ params.value +' ('+ params.percent +'%)';

}

},

labelLine: {

show: false,

length: 16

}

}

},

data: [{

value: data.formalUserCount,

name: '正式员工',

itemStyle: {

normal: {

color: '#8bcfb8'

}

}

},{

value: data.tryoutUserCount,

name: '试用员工',

itemStyle: {

normal: {

color: '#efb43e'

}

}

},{

value: data.internshipUserCount,

name: '实习/兼职',

itemStyle: {

normal: {

color: '#64bdec'

}

}

}]

}

]

};

jobChart.setOption(jobOption);

};

require.config({

paths: {

echarts: '/static/lib/echarts'

}

});

require(

[

'echarts',

'echarts/chart/pie'

],

function (ec) {

jobChart = ec.init(document.getElementById('pieJob'));

ageChart = ec.init(document.getElementById('pieAge'));

progressChart = ec.init(document.getElementById('pieProgress'));

$.ajax({

type: 'POST',

url: '/count/statistics.json',  //ajax请求的url链接

dataType: 'json', //数据格式

success: function (json) {

if (json.code == 1) {

drawCharts(json.data);//当ajax获取数据成功，加载画图方法

}

}

});

}

)；

});