echarts创建饼状图
第一步,使用echarts对div进行初始化。
var hydrangeaClick = echarts.init(document.getElementById('hydrangeaClick'));
第二步,设置标题,图例
hydrangeaClick.setOption({
title:{
text:'点击抛绣球次数'//标题
},
tooltip:{trigger:'item',
formatter:'{a}<br/>{b}:{c}({d}%)'},//鼠标放在一个扇区上的数据浮框显示方式
legend:{ x : 'center',//图例-水平方向(或x轴方向)水平,其他参数:left,right
y : 'bottom',//图例-垂直方向(或y轴方向)水平,其他参数:middle,up
data:['版本A','版本B']},//图例数据
series:[{
name:'点击抛绣球次数',
type:'pie',
radius:['55%','70%'],//饼状图内圈大小,外圈大小
avoidLabelOverlap: true,
label:{
normal: {show: false,
position: 'center' },
emphasis: {
show: true,//中间显示鼠标选中时的图例
textStyle: {
fontSize: '30',
fontWeight: 'bold'}
}
},
labelLine:{
normal:{
show:false
}
},
data:[]
}]
});
第三步,数据异步加载
$.get('abhydrangeaClick?startDate=${startDate}&endDate=${endDate}').done(function(data){
var obj = JSON.parse(data);
hydrangeaClick.setOption({
series:[{
type:'pie',
name:'点击抛绣球次数',//要和第二步中的series中的name一致,否则无法显示。
data:[{
name:obj[0].label,
value:obj[0].data
},{
name:obj[1].label,
value:obj[1].data
}]
}]
});
});
$.get('url',function(data){
});