Echarts仪表盘样式设置,美化
效果如下图:
image.png
option = {
series: [
{
name:"业务指标",
type: "gauge",
center: ["50%", "45%"],
radius: "70%", //仪表大小
// startAngle: 200, //开始角度
// endAngle: -20, //结束角度
min:0,
max:1000,
data:[{value:950,name:"业务指标"}],
axisLine: {
show: false,
lineStyle: { // 属性lineStyle控制线条样式
color: [
[0.5, '#FF6F90'],
[0.8, '#FFB36F'],
[1, '#27D9C8'],
],
shadowColor:"#ccc",
shadowBlur:25,
width: 20
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
pointer: { //指针样式
length: '60%',
color:"#4A90E2"
},
title:{
show:true,
offsetCenter: [0, '60%'],
color:'#333',
fontSize:12,
backgroundColor:"#D8d8d8",
borderRadius:21,
padding:5
},
detail: {
formatter : "{score|{value}}",
offsetCenter: [0, 0],
backgroundColor: '#FFF',
shadowColor:"#C3Cfff",
shadowBlur:14,
borderRadius:40,
width:38,
rich : {
score : {
color : "#333",
fontSize : 17,
padding:14
}
}
},
},
]
};
网友评论