option = {
title: {
text: 'This month',
textStyle: {
color: '#666666',
fontSize: 14
},
subtext: '0.95',
subtextStyle: {
color: '#161616',
fontSize:30,
fontWeight:700
},
itemGap: 15, // Main and subtitle distance
left: 'center',
top: '43%'
},
angleAxis: {
max: 100, // Full mark
clockwise: false, // Counterclockwise
// Hide the ticks
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
radiusAxis: {
type: 'category',
// Hide the ticks
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
polar: {
center: ['50%', '50%'],
radius: '100%' //Graphic size
},
series: [
{
type: 'bar',
data: [
{
name: 'Composition score',
value: 90,
itemStyle: {
normal: {
color: '#46B7A2'
}
}
}
],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 25,
barGap: '-100%', // Two rings overlap
z: 2
},
{
// Gray ring
type: 'bar',
data: [
{
value: 100,
itemStyle: {
color: '#DDE4F6',
shadowColor: 'rgba(0, 0, 0, 0.1)',
shadowBlur: 5,
shadowOffsetY: 2
}
}
],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 25,
barGap: '-100%', // Two rings overlap
z: 1
}
]
};
