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获取数据成功，加载画图方法
}
}
});
}
)；
});
