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){
                         return v.toFixed(0);
                    },
                    },
                    axisTick: {            // 坐标轴小标记
                        length :15,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto',
                            shadowColor : '#fff', //默认透明
                            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);

猜你喜欢

转载自blog.csdn.net/k912120/article/details/81507966