时钟echarts 饼配置项内容和展示

纯属乐趣

      			var option = {
			    title: {
			        text: '饼图时钟',
			        x: 'center'
			    },
			    legend: {
			        show: false,
			        data: ['n', 'l']
			    },
			    series: [{
			        name: '秒',
			        type: 'pie',
			        center: ['50%', '30%'],
			        radius: ['40%', '30%'],
			        hoverAnimation: false,
			        label: {
			            normal: {
			                show: true,
			                position: 'inside',
			                formatter: function(v) {
			                    if (v.name == 'n') {
			                        v = v.value + '秒';
			                    } else {
			                        v = '';
			                    }
			                    return v;
			                }
			            }
			        },
			        labelLine: {
			            show: false
			        },
			        data: [{
			            name: 'n',
			            value: 0,
			            itemStyle: {
			                normal: {
			                    color: '#92C8C3',
			                    shadowBlur: 10,
			                    shadowColor: 'gray'
			                }
			            }
			        }, {
			            name: 'l',
			            value: 60,
			            itemStyle: {
			                normal: {
			                    color: 'rgba(0,0,0,0)'
			                }
			            }
			        }]
			    }, {
			        name: '分',
			        type: 'pie',
			        center: ['50%', '30%'],
			        radius: ['30%', '20%'],
			        hoverAnimation: false,
			        label: {
			            normal: {
			                show: true,
			                position: 'inside',
			                formatter: function(v) {
			                    if (v.name == 'n') {
			                        v = v.value + '分';
			                    } else {
			                        v = '';
			                    }
			                    return v;
			                }
			            }
			        },
			        labelLine: {
			            show: false
			        },
			        data: [{
			            name: 'n',
			            value: 0,
			            itemStyle: {
			                normal: {
			                    color: '#674B84',
			                    shadowBlur: 10,
			                    shadowColor: 'gray'
			                }
			            }
			        }, {
			            name: 'l',
			            value: 60,
			            itemStyle: {
			                normal: {
			                    color: 'rgba(0,0,0,0)'
			                }
			            }
			        }]
			    }, {
			        name: '时',
			        type: 'pie',
			        center: ['50%', '30%'],
			        radius: ['20%', '10%'],
			        hoverAnimation: false,
			        label: {
			            normal: {
			                show: true,
			                position: 'inside',
			                formatter: function(v) {
			                    if (v.name == 'n') {
			                        v = v.value + '点';
			                    } else {
			                        v = '';
			                    }
			                    return v;
			                }
			            }
			        },
			        labelLine: {
			            show: false
			        },
			        data: [{
			            name: 'n',
			            value: 0,
			            itemStyle: {
			                normal: {
			                    color: '#C75C7B',
			                    shadowBlur: 10,
			                    shadowColor: 'gray'
			                }
			            }
			        }, {
			            name: 'l',
			            value: 12,
			            itemStyle: {
			                normal: {
			                    color: 'rgba(0,0,0,0)'
			                }
			            }
			        }]
			    }]
			};
			myChart.setOption(option);

			//定时执行
			clearInterval(timeTicket);
			var timeTicket = setInterval(function() {
			    var h = option.series[2].data[0].value;
			    var m = option.series[1].data[0].value;
			    var s = option.series[0].data[0].value;
			    var date = new Date();
			    if (date.getHours() < 12) {
			        option.series[2].data[0].value = date.getHours();
			        option.series[1].data[0].value = date.getMinutes();
			        option.series[0].data[0].value = date.getSeconds();
			        option.series[2].data[1].value = 12 - date.getHours();
			        option.series[1].data[1].value = 60 - date.getMinutes();
			        option.series[0].data[1].value = 60 - date.getSeconds();
			    } else {
			        option.series[2].data[0].value = date.getHours() - 12;
			        option.series[1].data[0].value = date.getMinutes();
			        option.series[0].data[0].value = date.getSeconds();
			        option.series[2].data[1].value = 12 - (date.getHours() - 12);
			        option.series[1].data[1].value = 60 - date.getMinutes();
			        option.series[0].data[1].value = 60 - date.getSeconds();
			    }
			    myChart.setOption(option, true);
			}, 1000)