echarts 仪表图-实例
一：效果图
二：option
option = {
tooltip : {
formatter: "{a}
{b} : {c}%"
},
toolbox: {
feature: {
restore: {},
saveAsImage: {}
}
},
series: [
{
name: '业务指标',
type: 'gauge',
radius:'60%',
endAngle:90,
startAngle:225,
detail: {formatter:'{value}%'},
axisLine:{//仪表圈
show:true,
lineStyle:{
color:[[1, '#fff']],//F0F0F0
width:10
}
},
splitLine:{//分割线
show:false,
length:10
},
axisTick:{//刻度线
show:true,
splitNumber:5,
length:10,
lineStyle:{
color:'#F00',
width:2
}
},
axisLabel:{//刻度标签
show:false
},
pointer:{//指针
show:false
},
title:{
show:true,
offsetCenter:[0, '-20%'],
textStyle:{
color:'#000',
fontSize:20
}
},
detail:{
formatter: '{value}分',
offsetCenter: [0, '0%'],
textStyle:{
color:'#f00',
fontSize:32
}
},
data: [{value: 50, name: '安全综合评分'}]
},
{
name: '业务指标',
type: 'gauge',
radius:'60%',
endAngle:-45,
startAngle:91,
detail: {formatter:'{value}%'},
axisLine:{//仪表圈
show:true,
lineStyle:{
color:[[1, '#fff']],//F0F0F0
width:10
}
},
splitLine:{//分割线
show:false,
length:10
},
axisTick:{//刻度线
show:true,
splitNumber:5,
length:10,
lineStyle:{
width:2
}
},
axisLabel:{//刻度标签
show:false
},
pointer:{//指针
show:false
},
title:{
show:false
},
detail:{
show:false
},
data: []
},
{//空仪表,中间白色空白
name: '',
type: 'gauge',
radius:'63%',
detail: {formatter:'{value}%'},
axisLine:{//仪表圈
show:true,
lineStyle:{
color:[[1, '#fff']],
width:10
}
},
splitLine:{//分割线
show:false
},
axisTick:{//刻度线
show:false
},
axisLabel:{//刻度标签
show:false
},
pointer:{//指针
show:false
},
detail:{
show:false
},
data: []
},
{//空仪表,最外层边框
name: '',
type: 'gauge',
radius:'64%',
detail: {formatter:'{value}%'},
axisLine:{//仪表圈
show:true,
lineStyle:{
color:[[1, '#E9E9E9']],
width:4
}
},
splitLine:{//分割线
show:false
},
axisTick:{//刻度线
show:false
},
axisLabel:{//刻度标签
show:false
},
pointer:{//指针
show:false
},
detail:{
show:false
},
data: []
}
]
};