echarts2 饼图实例一则 自定义数据标签
最近有网友想通过echarts2实现如下效果
该图的难点在于 图例和数据标签不一致，拿到这个需求之后我第一时间想的是转换成如下的效果
但是网友表示不能接受，所以我只要在去查阅echarts2的帮助文档，终于让我找到了方法，就是利于自定义itemStyle.label.formatter来实现，
效果如下：
代码:
注：可以直接将代码添加到如下链接中查看效果
http://echarts.baidu.com/echarts2/doc/example/pie4.html#
option = {
title : {
text: '各学段师生比'
},
tooltip : {
trigger: 'item',
formatter: "{a}{b} : {c} ({d}%)"
},
legend: {
x : 'center',
y : 'bottom',
data:['教师','学生']
},option = {
title : {
text: '各学段师生比'
},
tooltip : {
trigger: 'item',
formatter: "{a}{b} : {c} ({d}%)"
},
legend: {
x : 'center',
y : 'bottom',
data:['教师','学生']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'小学',
type:'pie',
radius : [10, 50],
center : ['25%', 200],
roseType : 'radius',
itemStyle: {
normal: {
label:{
show: true,
position:'outer',
formatter: "{a}{b} "
}
}
},
data:[
{value:10, name:'教师'},
{value:5, name:'学生'}
]
},
{
name:'初中',
type:'pie',
radius : [10, 50],
center : ['50%', 200],
roseType : 'radius',
itemStyle: {
normal: {
label:{
show: true,
position:'outer',
formatter: "{a}{b}"
}
}
},
data:[
{value:10, name:'教师'},
{value:5, name:'学生'}
]
},
{
name:'高中',
type:'pie',
radius : [10, 50],
center : ['75%', 200],
roseType : 'radius',
itemStyle: {
normal: {
label:{
show: true,
position:'outer',
formatter: "{a}{b}"
}
}
},
data:[
{value:10, name:'教师'},
{value:5, name:'学生'}
]
}
]
};
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'小学',
type:'pie',
radius : [10, 50],
center : ['25%', 200],
roseType : 'radius',
itemStyle: {
normal: {
label:{
show: true,
position:'outer',
formatter: "{a}{b} "
}
}
},
data:[
{value:10, name:'教师'},
{value:5, name:'学生'}
]
},
{
name:'初中',
type:'pie',
radius : [10, 50],
center : ['50%', 200],
roseType : 'radius',
itemStyle: {
normal: {
label:{
show: true,
position:'outer',
formatter: "{a}{b}"
}
}
},
data:[
{value:10, name:'教师'},
{value:5, name:'学生'}
]
},
{
name:'高中',
type:'pie',
radius : [10, 50],
center : ['75%', 200],
roseType : 'radius',
itemStyle: {
normal: {
label:{
show: true,
position:'outer',
formatter: "{a}{b}"
}
}
},
data:[
{value:10, name:'教师'},
{value:5, name:'学生'}
]
}
]
};