效果预览:
实现原理:
通过设置圆环的起始角度、图形的颜色来实现半环、四分之一环效果。
关键代码://圆环起始角度
startAngle:-180,
//圆环图形颜色设置
itemStyle:{
color:"#fff"
}
实例完整代码:
a {
font-weight: bold;
}
var BarBOX1 = echarts.init(document.getElementById("test"));
option = {
tooltip: {
trigger: 'item',
formatter: "{a}
{b}: {c} ({d}%)"
},
series: [{
name: '访问来源',
type: 'pie',
radius: ['60%', '80%'],
startAngle: -180,
minShowLabelAngle: 180,
label: {
normal: {
position: 'inner'
}
},
labelLine: {
normal: {
show: false
}
},
data: [{
value: 335,
name: '直达'
},
{
value: 660,
name: '营销广告'
},
{
value: 1000,
itemStyle: {
color: "#fff"
}
// name: '搜索引擎',
}
]
}, ]
};
BarBOX1.setOption(option);
代码部分解析:
该图例的起始角度是startAngle:-180,因为背景色是白色所以一般不做展示的数据设置成了和背景色一致的颜色。
注:需要注意value值的设置。