var labelData = [];
var labelData1 = [];
for (var i = 0; i < 150; ++i) {
labelData.push({
value: 1,
name: i,
itemStyle: {
normal: {
color: 'rgba(0,209,228,0)',
}
}
});
}
for (var i = 0; i < labelData.length; ++i) {
if (labelData[i].name < 50) {
labelData[i].itemStyle = {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#0ff'
},
{
offset: 1,
color: '#5467df'
}
]
)
},
}
}
}
for (var i = 0; i < 150; ++i) {
labelData1.push({
value: 1,
name: i,
itemStyle: {
normal: {
color: 'rgba(0,209,228,0)',
}
}
});
}
for (var i = 0; i < labelData1.length; ++i) {
if (labelData1[i].name < 150) {
labelData1[i].itemStyle = {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[{
offset: 0,
color: '#251f45'
},
{
offset: 1,
color: '#251f45'
}
]
)
},
}
}
}
option = {
backgroundColor: '#180f2a',
title: [{
text: '118',
x: '50%',
y: '37%',
textAlign: 'center',
textStyle: {
fontSize: '70',
fontWeight: '100',
color: '#0FF',
textAlign: 'center',
},
}, {
text: 'DESIGN ELEMENTS',
left: '50%',
top: '52%',
textAlign: 'center',
textStyle: {
fontSize: '18',
fontWeight: '400',
color: '#8d8793',
textAlign: 'center',
},
}, {
text: 'DONUT CHART',
left: '50%',
top: '57%',
textAlign: 'center',
textStyle: {
fontSize: '14',
fontWeight: '400',
color: 'rgba(65,63,112,1)',
textAlign: 'center',
},
}, ],
polar: {
radius: ['56%', '52%'],
center: ['50%', '50%'],
},
angleAxis: {
max: 100,
show: false,
},
radiusAxis: {
type: 'category',
show: true,
axisLabel: {
show: false,
},
axisLine: {
show: false,
},
axisTick: {
show: false
},
},
series: [{
name: '',
type: 'bar',
roundCap: true,
barWidth: 60,
showBackground: true,
backgroundStyle: {
color: '#2e2856',
},
data: [80],
coordinateSystem: 'polar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#585fe1'
}, {
offset: 1,
color: '#0ff'
}]),
}
}
},
{
hoverAnimation: false,
type: 'pie',
z: 2,
data: labelData,
radius: ['43%', '50%'],
zlevel: -2,
itemStyle: {
normal: {
borderColor: '#180f2a',
borderWidth: 2,
}
},
label: {
normal: {
position: 'inside',
show: false,
}
},
},
{
hoverAnimation: false,
type: 'pie',
z: 1,
data: labelData1,
radius: ['43%', '50%'],
zlevel: -2,
itemStyle: {
normal: {
borderColor: '#180f2a',
borderWidth: 2,
}
},
label: {
normal: {
position: 'inside',
show: false,
}
},
},
]
};