ECharts gauge制作钟表

 

option = {
    backgroundColor: '#1b1b1b',
    tooltip : {
        formatter: "{a} <br/>{c} {b}"
    },
    series : [
        {
            name:'小时',
            type:'gauge',
            min:0,
            max:12,
            splitNumber:12,
            radius: '60%',
            startAngle:90,
            endAngle:-269.999,
            animation: 0,
            axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: [[1, '#d73d32']],
                    width: 0,
                },
            },
            axisLabel: {
                show: false
            },
            axisTick: {            // 坐标轴小标记
                show: false
            },
            splitLine: {           // 分隔线
               show: false
            },
            pointer: {           // 分隔线
                shadowColor : '#fff', //默认透明
                shadowBlur: 10,
                length:'60%',
                width:16
            },
            detail : {
                show: false
            },
            data:[{value: 0, name: 'ROLEX'}]
        },
        {
            name:'分钟',
            type:'gauge',
            min:0,
            max:12,
            splitNumber:12,
            radius: '60%',
            startAngle:90,
            endAngle:-269.999,
            animation: 0,
            axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: [[1, '#f4b400']],
                    width: 0,
                },
            },
            axisLabel: {
                show: false
            },
            axisTick: {            // 坐标轴小标记
                show: false
            },
            splitLine: {           // 分隔线
               show: false
            },
            pointer: {           // 分隔线
                shadowColor : '#fff', //默认透明
                shadowBlur: 10,
                length:'70%',
                width:10
            },
            detail : {
                show: false
            },
            data:[{value: 0, name: 'ROLEX'}]
        },
        {
            name:'秒',
            type:'gauge',
            min:0,
            max:12,
            splitNumber:12,
            radius: '60%',
            startAngle:90,
            endAngle:-269.999,
            animation: 0,
            axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: [[1, '#1e90ff']],
                    width: 3,
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 10
                },
                
            },
            axisLabel: {            // 坐标轴小标记
                formatter: function(v) {
                              switch(v+''){
                                 case '0':return '';
                                 default: return v;
                           }
                },
                textStyle: {       // 属性lineStyle控制线条样式
                    fontWeight: 'bolder',
                    color: '#fff',
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            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: 10,
                length:'80%',
                width:5
            },
            title : {
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder',
                    fontSize: 20,
                    fontStyle: 'italic',
                    color: '#fff',
                    shadowColor : '#fff', //默认透明
                    shadowBlur: 10
                }
            },
            detail : {
                show: false
            },
            data:[{value: 0, name: 'ROLEX'}]
        }
    ]
};

setInterval(function (){
    var d = new Date();
    var h = d.getHours() >= 12 ? d.getHours() - 12 : d.getHours();
    var m = d.getMinutes() / 5;
    var s = d.getSeconds() / 5; 
    
    option.series[0].data[0].value = h;
    option.series[1].data[0].value = m.toFixed(1);;
    option.series[2].data[0].value = s.toFixed(1);
    myChart.setOption(option);
},1000);

效果图：