echarts仪表盘的刻度值为整数,且指针动态效果也为整数因⼯作需要,将仪表板修改为⾃⼰所需样式
修改的如图:
特点:
1.更改原来的部分样式
2.指针动态变幻时为整数效果
代码如下:
option = {
backgroundColor: '#f',
tooltip : {
formatter: "{a} <br/>{b} : {c}%"
},
toolbox: {
feature: {
restore: {},
saveAsImage: {}
}
},
series: [
{
name: '安全隐患',
type: 'gauge',
min:1,
max:30,
detail: {formatter:'{value}处'},
axisLine: {            // 坐标轴线
lineStyle: {      // 属性lineStyle控制线条样式
color: [[0.2, 'lime'],[0.80, '#1e90ff'],[4, '#ff4500']],
width: 3,
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
axisLabel: {            // 坐标轴⼩标记
distance: 8,
fontSize: 12,
formatter: function(v){
Fixed(0);
},
},
axisTick: {            // 坐标轴⼩标记
font weight bolder
length :15,        // 属性length控制线长
lineStyle: {      // 属性lineStyle控制线条样式
color: 'auto',
shadowColor : '#fff', //默认透明
shadowBlur: 10
shadowBlur: 10
}
},
splitLine: {          // 分隔线
length :25,        // 属性length控制线长
lineStyle: {      // 属性lineStyle(详见lineStyle)控制线条样式
width:3,
color: '#fff',
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
pointer: {          // 分隔线
shadowColor : '#fff', //默认透明
shadowBlur: 5
},
title : {
textStyle: {      // 其余属性默认使⽤全局⽂本样式,详见TEXTSTYLE                            fontWeight: 'bolder',
fontSize: 20,
fontStyle: 'italic',
color: '#fff',
shadowColor : '#fff', //默认透明
shadowBlur: 10
}
},
data: [{value: 6, name: '安全隐患'}]
}
]
};
setInterval(function () {
option.series[0].data[0].value = (Math.random() * 6).toFixed(0);
myChart.setOption(option, true);
},4000);

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。