How to make a single ring chart with Apache eCharts? - echarts

Question

I'm trying to make a chart in Apache eCharts that is a single ring with a large number in the middle. I want to use it to display a website score.
This is the closest image example I can find online of what I am trying to achieve:
And I have found these polar bar charts in the Apache eCharts docs which look great:
But I don't know how to only have one large ring with a number displayed in the middle.
Do you know how I can achieve that?
Here is my current code, taken from the docs:
option = {
angleAxis: {
show: false,
max: 10
},
radiusAxis: {
show: false,
type: 'category',
data: ['AAA', 'BBB', 'CCC', 'DDD']
},
polar: {},
series: [
{
type: 'bar',
data: [3, 4, 5, 6],
colorBy: 'data',
roundCap: true,
label: {
show: true,
position: 'start',
formatter: '{b}'
},
coordinateSystem: 'polar'
}
]
};

Answer 1

You probably want a variant of the Gauge chart.
here is a series that would create something very close to your first image example.
series: [
{
type: 'gauge',
startAngle: 90,
endAngle: 270,
min: 0,
max: 100,
progress: {
show: true,
width: 18
},
pointer: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
},
title: {
show: false
},
itemStyle: {
color: 'blue'
},
detail: {
formatter: '{value}',
color: 'auto',
offsetCenter: [0, '-0%'],
valueAnimation: true,
},
}
]
Here is a link to an example that is similar to your second image