先放一张效果图,外圈颜色表示各个时段某项指标的状态,可自定义设置
本质是利用guage和pie实现,废话不多说,直接放代码
drawClockChart() {
var datetime = new Date();
var h = datetime.getHours();
var m = datetime.getMinutes();
var s = datetime.getSeconds();
var minutes = m + s / 60;
var hours_24 = h + m / 60;
var hours_12;
if (hours_24 > 12) {
hours_12 = hours_24 - 12;
} else {
hours_12 = hours_24;
}
var gethour = (hours_12).toFixed(2);
var getminutes = (minutes).toFixed(2);
this.rainbowLine = this.$echarts.init(document.getElementById('clockBox'));
var dataType = []
for (let i = 0; i < 48; i++) { // 虚拟数据
var color
if (i > 44) {
color = "#072a70"
} else if (i == 10) {
color = "#f8dd1d"
} else if (i == 16) {
color = "#ffa901"
} else if (i == 15) {
color = "#ab0000"
} else {
color = '#64c127'
}
dataType.push({
name: i,
value: 1,
trueValue: i,
itemStyle: {
normal: {
color: color
}
},
})
}
var option = {
series: [{ // 时钟外圈颜色状态
type: "pie",
name: 'pie',
radius: ["70%", "85%"],
center: ["50%", "50%"],
hoverAnimation: true,
z: 10,
itemStyle: {
normal: {
borderWidth: 1,
borderColor: "#003359"
}
},
label: {
show: false
},
data: dataType,
labelLine: {
show: false
}
},
{ ///大表盘时针
name: '小时',
type: 'gauge',
radius: '70%', //仪表盘半径
min: 0,
max: 12,
startAngle: 90,
endAngle: -269.9999,
splitNumber: 12,
animation: 0,
pointer: { //仪表盘指针
length: '50%',
width: '5%'
},
itemStyle: { //仪表盘指针样式
normal: {
color: '#fff',
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10,
shadowOffsetX: 2,
shadowOffsetY: 2
}
},
axisLine: { //仪表盘轴线样式
lineStyle: {
width: 1,
}
},
axisTick: { //仪表盘刻度样式
distance: 0,
length: '3%',
splitNumber: 5, //分隔线之间分割的刻度数
lineStyle: {
color: '#fff',
width: 2
}
},
splitLine: { //分割线样式
distance: 0,
length: '5%',
lineStyle: {
color: '#fff',
width: 5
}
},
axisLabel: {
show: true,
formatter: function(param) {
if (param !== 0) {
return param
} else {
return null
}
},
color: '#fff',
fontSize: 10,
distance: 5,
},
title: {
show: 0
}, //仪表盘标题
detail: {
show: 0
}, //仪表盘显示数据
data: [{
value: gethour
}]
}, { ///大表盘分针
name: '分钟',
type: 'gauge',
radius: '65%', //仪表盘半径
min: 0,
max: 60,
startAngle: 90,
endAngle: -269.9999,
splitNumber: 12,
animation: 0,
pointer: { //仪表盘指针
length: '85%',
width: '3%'
},
itemStyle: { //仪表盘指针样式
normal: {
color: '#fff',
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10,
shadowOffsetX: 2,
shadowOffsetY: 2
}
},
axisLine: { //仪表盘轴线样式
lineStyle: {
width: 1,
}
},
splitLine: { //分割线样式
show: false,
},
axisTick: { //仪表盘刻度样式
show: false,
},
axisLabel: {
show: false,
}, //刻度标签
title: {
show: 0
}, //仪表盘标题
detail: {
show: 0
}, //仪表盘显示数据
data: [{
value: getminutes
}]
},
{ //指针内环
type: 'pie',
hoverAnimation: false,
legendHoverLink: false,
radius: ['0%', '5%'],
z: 10,
label: {
normal: {
show: false
}
},
labelLine: {
normal: {
show: false
}
},
data: [{
value: 10,
itemStyle: {
normal: {
color: "#FFFFFF"
}
}
}]
}
]
};
this.clockChart.setOption(option);