option = {
tooltip: {
show: false,
trigger: 'item'
},
title: {
text: '150',
textStyle: {
color: 'rgba(32, 120, 245, 1)',
fontSize: 60
},
itemGap: 10,
left: 'center',
top: '44%',
subtext: '（满分180）',
subtextStyle: {
color: 'rgba(153, 153, 153, 1)',
fontSize: 24,
fontWeight:'normal'
}
},
grid:{
top: '10%'
},
series: [
// 蓝色进度条
{
z: 1,
name: 'Access From',
type: 'pie',
silent: true,
radius: ['40%', '50%'],
// center: ['50%', '70%'],
// adjust the start angle
startAngle: 90,
itemStyle: {
borderRadius: '50%',
borderColor: 'none',
borderWidth: 1,
},
label: {
show: false,
formatter(param) {
// correct the percentage
return param.name + ' (' + param.percent * 2 + '%)';
}
},
data: [
{
value: 900,
name: 'Search Engine',
itemStyle: {
normal: {
color: { // 完成的圆环的颜色
colorStops: [{
offset: 0,
color: 'rgba(67, 176, 251, 1)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(32, 120, 245, 1)' // 100% 处的颜色
}]
},
label: {
show: false
},
labelLine: {
show: false
}
}
}
},
{
// make an record to fill the bottom 50%
value: 100,
itemStyle: {
// stop the chart from rendering this piece
color: 'rgba(255,255,255,0)',
decal: {
symbol: 'none'
}
},
label: {
show: false
}
}
],
},
// 白色小圆
{
z:2,
name: 'cricle',
type: 'pie',
radius: ['41.5%', '48.5%'],
silent: true,
startAngle: 101 + (0.1 * 360),
itemStyle: {
borderRadius: '50%',
borderColor: 'none',
borderWidth: 1,
},
label: {
show: false
},
data: [
{
value: 2.5,
name: 'Search Engine',
itemStyle: {
color: '#fff'
}
},
{
// make an record to fill the bottom 50%
value: 100,
itemStyle: {
// stop the chart from rendering this piece
color: 'none',
decal: {
symbol: 'none'
}
},
label: {
show: false
}
}
]
},
// 背景
{
z:0,
type: 'pie',
name: '内层细圆环',
radius: ['40%', '50%'],
startAngle: 90,
hoverAnimation: false,
clockWise: true,
silent: true,
itemStyle: {
normal: {
color: '#f3f3f7',
shadowBlur: 0,
shadowColor: '#66666a',
}
},
tooltip: {
show: false,
},
label: {
show: false
},
data: [100]
}
]
};