废话不多说直接上代码
<div id="timer" style="width: 195px; height: 195px;"></div>
export default {
name: "Time",
components: {},
data() {
return {
option:{
series: [
{
name: 'hour',
type: 'gauge',
radius:'100%',
startAngle: 90,
endAngle: -270,
min: 0,
max: 12,
splitNumber: 12,
clockwise: true,
axisLine: {
lineStyle: {
width: 0,
}
},
splitLine: {
lineStyle: {
color:'#41E6F0',
width:2
}
},
axisLabel: {
show:false //控制是否显示数字刻度标签
},
anchor: {
show: true,
showAbove: false,
size: 15,
keepAspect: true,
itemStyle: {
color: '#fff',
}
},
pointer: {
icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
width: 5,
length: '55%',
offsetCenter: [0, '8%'],
itemStyle: {
color: '#fff'
}
},
detail: {
show: false
},
title: {
offsetCenter: [0, '-40%'],
color:"#BFFBFF"
},
data: [
{
value: 0,
name:''
}
]
},
{
name: 'minute',
type: 'gauge',
startAngle: 90,
endAngle: -270,
min: 0,
max: 60,
clockwise: true,
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
pointer: {
icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
width: 4,
length: '100%',
offsetCenter: [0, '8%'],
itemStyle: {
color: '#fff',
}
},
anchor: {
show: true,
size: 10,
showAbove: true,
itemStyle: {
color:'#E89F35'
}
},
detail: {
show: false
},
title: {
show:true,
offsetCenter: ['0%', '-40%']
},
data: [
{
value: 0
}
]
},
{
name: 'second',
type: 'gauge',
startAngle: 90,
endAngle: -270,
min: 0,
max: 60,
animationEasingUpdate: 'bounceOut',
clockwise: true,
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
pointer: {
icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
width: 2,
length: '120%',
offsetCenter: [0, '8%'],
itemStyle: {
color: '#C0911F'
}
},
anchor: {
show: true,
size: 5,
showAbove: true,
itemStyle: {
color: '#000'
}
},
detail: {
show: false
},
title: {
offsetCenter: ['0%', '-40%']
},
data: [
{
value: 0
}
]
}
]
},
timer:null,
year: '',
month:'',
day:'',
hour:'',
minute:'',
second:''
};
},
computed: {},
watch: {},
mounted() {
this.initData()
},
methods: {
initData () {
const myChart = this.$echarts.init(document.getElementById('timer'));
let width = document.getElementById('timer').clientWidth;
let height = document.getElementById('timer').clientHeight;
myChart.resize({
width,
height
})
this.getDate(myChart)
},
getDate(dom) {
if(this.timer) clearInterval(this.timer);
this.timer = setInterval(()=> {
let date = new Date();
this.year = this.$moment().format("YYYY");
this.month = this.$moment().format("MM");
this.day = this.$moment().format("DD");
this.hour = this.$moment().hour() < 10 ? '0' + this.$moment().hour() : this.$moment().hour();
this.minute = this.$moment().minute() < 10 ? '0' + this.$moment().minute() : this.$moment().minute();
this.second = this.$moment().second() < 10 ? '0' + this.$moment().second() : this.$moment().second();
var weekDay = date.getDay();
const weekList = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六']
if(this.second == 0) {
this.option.animationDurationUpdate = 0;
} else {
this.option.animationDurationUpdate = 300;
}
this.option.series[0].data[0].value = this.hour;
this.option.series[0].data[0].name = weekList[weekDay];
this.option.series[1].data[0].value = this.minute;
this.option.series[2].data[0].value = this.second;
dom.setOption(this.option);
},1000)
}
},
};
这样一个用echarts制作的简易时钟就做好了，具体的样式参数可以根据需求进行调整
