由于饼图的数据过多,文字比较密集所以决定对数量超过10的数据隐藏其视觉引导线。直接上代码
var arr1=[{value: "10", name: "资金运用"},
{value: "12", name: "资金管理"},
{value: "12", name: "资金余额"}
]
option = {
backgroundColor: '#fff',
color:["#86891F",
"#95794B",
"#760A34"],
title: {
text: 'Customized Pie',
left: 'center',
top: 20,
textStyle: {
color: '#ccc'
}
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
series : [
{
name:'访问来源',
type:'pie',
radius : '55%',
center: ['50%', '50%'],
data:genData(arr1)
}
]
};
function genData(arr){
arr.forEach(item=>{
item.label={
show: function () {
if (item.value <= 10) {
return false;
} else {
return true;
}
}(),
formatter:function(v){
var text=''
if(v.name.length>5){
text=v.name.substring(0,5)+'...'
}else{
text=v.name
}
return text
},
position: function () {
if (item.value <= 10) {
return 'inside';
} else {
return 'outside';
}
}(),
};
item.labelLine={
show: function () {
if (item.value <= 10) {
return false;
} else {
return true;
}
}(),
};
})
return arr
}
echarts饼图的示例,复制以上代码替换
效果图如下: