option = {
tooltip: {
formatter: '{a}
{b} : {c}%'
},
toolbox: {
feature: {
restore: {},
saveAsImage: {}
}
},
series: [
// name: '业务指标',
// type: 'gauge',
// detail: {formatter: '{value}%'},
// data: [{value: 50, name: '完成率'}],
{
radius: '85%',
type: 'gauge',
detail: {show:false},
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [ [1, '#bef701']],
width: 13,
shadowColor: '#fff', //默认透明
shadowBlur: 10
}
},
axisLabel:{
show:false
},
splitLine:{
show:false
},
axisTick:{
show:false
}
},{
type: 'gauge',
radius: '67%',
min: 0,
max: 100,
splitNumber: 4,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
color: [[1, '#acad7f']],
width: 0,
// shadowColor: '#2bb71f',
// shadowBlur: 10
}
},
axisLabel: { // 坐标轴小标记
textStyle: { // 属性lineStyle控制线条样式
// fontWeight: 'bolder',
color: '#acad7f',
shadowColor: '#acad7f', //默认透明
shadowBlur: 10,
fontSize:10
}
},
splitLine: { // 分隔线
length: 20, // 属性length控制线长
lineStyle: { // 属性lineStyle(详见lineStyle)控制线条样式
width: 1,
color: '#acad7f',
shadowColor: '#acad7f', //默认透明
shadowBlur: 10
}
},
axisTick: { // 坐标轴小标记
length: 12, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto',
shadowColor: '#acad7f', //默认透明
shadowBlur: 10,
},
splitNumber: 15
},
pointer: { // 分隔线
shadowColor: '#acad7f', //默认透明
shadowBlur: 5,
width:2,
length: '70%'
},
itemStyle:{
color:'#9289da'
},
detail: {
offsetCenter: [0, '84%'], // x, y,单位px
formatter: function (value) {
return value.toFixed(2) + '%';
},
textStyle: { // 其余属性默认使用全局文本样式,详见TEXTSTYLE
// fontWeight: 'normal',
color: '#CCFF00',
fontFamily: 'lcdd',
fontSize: 34
}
},
title:{
show: false
},
data: [{value: 50,}]
}
]
};
setInterval(function () {
option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
myChart.setOption(option, true);
},2000);