echarts设置内环颜色,在内环添加文字
效果如下:
1、通过两个叠加的圆达到内外环不同颜色的效果
series: [
{
color:['#0c2968'], //内圆颜色
type: 'pie',
radius: '60%',
center:['50%','50%'], //设置圆的位置,两个圆的位置必须一致
data: [
{value: 100, name: ''}, //只设置一个值占整圆
],
emphasis: {
scale: false, //鼠标悬停到内圆时,取消放大效果
},
label:{
show:false, //关闭牵引线
}
},
{
type: 'pie',
radius: ['60%', '95%'], //第一个值必须与内圆的radius一致
center:['50%','50%'],
avoidLabelOverlap: false,
label: { //设置牵引线的文字
show: true,
fontSize:12,
formatter: `{b}: {c}`
},
//设置牵引线长度
labelLine: {
show: true,
length: 35,
length2: 10,
},
data: [
{value: 535, name: '在途超时工单'},
{value: 1048, name: '在途工单'},
]
}
]
2、内环中间添加文字
graphic:[
{
type:'text',
left:'center',
top:'42%',
z:10,
style:{
fill:'#fff', //填充色,即文字颜色
fontSize:13, //文字大小
text:'在途超时占比'
}
},
{
type:'text',
left:'center',
top:'56%',
z:10,
style:{
fill:'#fff',
text:'51.04%',
fontSize:15,
font: '30px Microsoft YaHei'
}
}
],
3、完整代码
let option = {
color:['#ffcc33','#ff6633'], //外环颜色数组
graphic:[
{
type:'text',
left:'center',
top:'42%',
z:10,
style:{
fill:'#fff',
fontSize:13,
text:'在途超时占比'
}
},
{
type:'text',
left:'center',
top:'56%',
z:10,
style:{
fill:'#fff',
text:'51.04%',
fontSize:15,
font: '30px Microsoft YaHei'
}
}
],
series: [
{
color:['#0c2968'],
type: 'pie',
radius: '60%',
center:['50%','50%'],
data: [
{value: 100, name: ''},
],
emphasis: {
scale: false
},
label:{
show:false
}
},
{
type: 'pie',
radius: ['60%', '95%'],
center:['50%','50%'],
avoidLabelOverlap: false,
label: {
show: true,
fontSize:12,
formatter: `{b}: {c}`
},
labelLine: {
show: true,
length: 35,
length2: 10,
},
data: [
{value: 535, name: '在途超时工单'},
{value: 1048, name: '在途工单'},
]
}
]
}