echart 仪表盘gauge 参数详解
/*仪表盘*/
var gaugeChart = echarts.init(document.getElementById('gaugeChart'));
let inputValue = parseInt(Math.random() * 100);
gaugeChart.setOption({
tooltip: {
formatter: "{a}
{b} : {c}%"
},
series: [{
name: '1刻度',
type: 'gauge',
radius: '35%',
center: ['50%', '50%'],
startAngle: 220,
endAngle: -40,
axisLine: {
lineStyle: {
width:2,
color:[[1,'#8c929d']]
}
},
splitLine: {
length: 0,
lineStyle:{
color:'#8c929d',
width:2
}
},
axisLabel: {
show:false
},
axisTick:{
show:false
},
detail:{
show:false
},
pointer:{
show:false
}
},{
name: '2刻度',
type: 'gauge',
radius: '45%',
center: ['50%', '50%'],
startAngle: 212,
endAngle: -32,
axisLine: {
lineStyle: {
width:2,
color:[[1,'#8c929d']]
},
},
splitLine: {
length: 0,
lineStyle:{
color:'#8c929d',
width:2
}
},
axisLabel: {
show:false
},
axisTick:{
show:false
},
detail:{
show:false
},
pointer:{
show:false
}
},{
name: '3刻度',
type: 'gauge',//仪表盘
radius: '55%',//仪表盘半径
center: ['50%', '50%'],//仪表盘位置
startAngle:208,//起始角度
endAngle: -28,//结束角度
data: [{value: inputValue, name: ''}],
axisLine: {
lineStyle: {//仪表盘轴线相关配置。
width:2,
color:[[1,'#8c929d']]
}
},
splitLine: {//分隔线样式相关
length: 40,//分割线的长度
lineStyle: {
width:1,
color:'#b0b3b8'
}
},
axisLabel: {//大刻度标签。
distance: -70,//数字刻度距离
textStyle: {//数字刻度样式
color: '#fff',
fontSize:18,
},
data: [{value: inputValue, name: ''}],
formatter:function(param){
if ((param % 10)==0) {
return param
}
}
},
axisTick:{//小刻度相关
show:false
},
detail: {//仪表盘详情数据相关
textStyle: {
color: '#5bdbff',
fontSize:46,
offsetCenter: [0,'80%']
}
},
itemStyle:{//指针样式
normal:{
color:'#1ed133'
}
},
pointer:{//指针长度与宽度
width:8,
length:'85%'
},
data: [{
value:inputValue
}]
},{
name: '4线',
type: 'gauge',
radius: '100%',
center: ['50%', '50%'],
startAngle: 190,
endAngle: -10,
axisLine: {
lineStyle: {
width:2,
color:[[1,'#3d80f5']]
},
},
splitLine: {
length: -6,
lineStyle:{
opacity:0
}
},
axisLabel: {
show:false
},
axisTick:{
splitNumber:1,
lineStyle:{
opacity:0,
}
},
detail:{
show:false
},
pointer:{
show:false
}
}]
})