echarts 4分之一的 饼图如何做成?
var data=[{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:548, name:'搜索引擎'}];
var a=0;
for(var i=0; i<data.length; i++)
{
a+=data[i].value;
}
data.push({value:3*a, name:'__other', itemStyle:{normal:{color:'red'}}});
console.log(data);
option = {
title : {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
},
series : [
{
name: '访问来源',
type: 'pie',
startAngle:-180,
radius : '55%',
center: ['50%', '60%'],
data:data,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
原理是:额外设置一个扇区将正式扇区挤开,同时不影响正式扇区的百分比。将额外的扇区的颜色和背景色设为一样,即可实现“4分之一”饼图的效果
最终效果图:
data.push({value:3*a, name:'__other', itemStyle:{normal:{color:'rgba(0,0,0,0)'}}});
最终效果: