var myChart = document.getElementById('pie');
var option = {
title: {
text: '- CPU状态',
textStyle: {
color: 'rgba(255,255,255,.65)',
fontSize: 16,
fontWeight: 100,
fontFamily: 'Gotham-Book'
}
},
series: [{
type: 'gauge',
progress: {
show: true,
width: 18
},
itemStyle: { //渐变颜色
color: new echarts.graphic.LinearGradient(1, 1, 0, 1, [{
offset: 1,
color: '#0f122e'
}, {
offset: 0,
color: '#a30052'
}])
},
axisLine: {
lineStyle: {
width: 18,
color: [
[1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0.1,
color: "#242a5d"
},
{
offset: 1,
color: "#242a5d"
}
])]
]
},
},
axisTick: showFalse,
splitLine: {
distance: 5,
length: 3,
lineStyle: {
width: 3,
color: '#242a5d'
},
},
axisLabel: { //是否显示数字
show: false
},
pointer: {
show: false
},
detail: {
valueAnimation: true,
fontSize: 35,
offsetCenter: [0, '10%'],
color: '#fff'
},
title: {
offsetCenter: [0, '100%'],
fontSize: 13,
color: 'rgba(255,255,255,.65)'
},
data: [{
value: 70,
name: 'CPU使用率(%)'
}]
}]
};
cpuData = echarts.init(myChart);
cpuData.setOption(option);
window.addEventListener("resize", function() {
cpuData.resize();
})