效果图:
实例代码:
function getHalfPro ( value, color ) {
return {
title: {
text: '完成率',
left: 'center',
bottom: '20%',
textStyle: {
fontSize: '200%',
fontWeight: 'bold',
}
},
grid: {
top: '1%',
left: '1%',
right: '1%',
bottom: '1%',
containLabel: true
},
color: ["rgba(255,255,255,0)", color, "#b6b5b5"],
series: [
{
name: '完成率',
type: 'pie',
startAngle: 315,
radius: ['70%', '95%'],
legendHoverLink: false,
hoverAnimation: false,
avoidLabelOverlap: false,
labelLine: {
normal: {
show: false
}
},
data: [
{
value: 33,
name: value + '%',
label:{
position:'center',
color:"#535353",
fontSize: '300%'
}
},
{
value: value
},
{
value: 100 - value
}
]
}
]
}
}
var option = getHalfPro(85, "#5fa4f4");
注释:
该图表是以echarts中饼图为原型,将处于底部的一段圆环背景颜色设置为透明,只需要保持底部隐藏部分数值占整体33/133的比例,就可以使其位置始终保持不变。因此设置底部数值为33,完成和未完成部分数值相加需要等于100即可。
getHalfPro(value, color)接收两个参数,value为完成的百分比数值,color为完成部分展示的颜色,若颜色不变可在函数中写固定的值。