let maxRadius = 100;
let angle = ['-80', '-45', '-70', '-25'];
let dataList = [1, 2, 3, 4];
let colorList = [
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: '#C848B9',
},
{
offset: 1,
color: '#C848B9',
},
]),
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: '#F962A7',
},
{
offset: 1,
color: '#F962A7',
},
]),
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: '#FD836E',
},
{
offset: 1,
color: '#FD836E',
},
]),
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: '#FEBA69',
},
{
offset: 1,
color: '#FEBA69',
},
]),
];
let series = [];
for (let i = 0; i < dataList.length; i++) {
series.push({
type: 'gauge',
radius: `${maxRadius - (i + 1) * 11}%`,
center: ['50%', '50%'],
clockwise: false,
startAngle: '90',
endAngle: angle[i],
borderColor: 'rgba(0,0,0,0)',
detail: {
show: false,
},
pointer: {
show: false,
},
textStyle: {
shadowColor: '#000', //默认透明
shadowBlur: 0,
},
axisLine: {
show: true,
lineStyle: {
color: [
[0, '#A1D2EE'],
[0.0001, colorList[i]],
[1, '#08080F'],
],
shadowColor: '#000', //默认透明
shadowBlur: 0,
width:30
},
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
});
}
option = {
backgroundColor: '#0D4B71',
title: [
{
text: "主标题",
subtext: "次标题",
textStyle: {
color: "#ffffff",
align: "center",
fontSize: 40,
},
subtextStyle: {
fontSize: 20,
align: "center",
color: "#ffffff",
},
textAlign: "center",
x: "50%",
y: "45%",
}
],
series: series,
};