html代碼：
<div id="app" style="width:700px;height:700px;"></div>
js代碼（要先導入echarts插件）：
var myChart =echarts.init(document.getElementById('app'));
option = {
backgroundColor: '',
title: {
show: true,
x: "center",
y: "62%",
text: '', //幸運值取代碼置于值于此處
//subtext: '幸運指數(shù)',
textStyle: {
fontSize: 26,
fontWeight: 'normal',
fontStyle: 'normal',
color: "#4B68CD"
}
},
tooltip: {
show: true,
formatter: "{a}：{c}",
backgroundColor: '#6eba44',
borderColor: '#6eba44',
borderWidth: '1px',
textStyle: {
color: 'white'
}
},
series: [
{
name: '小時',
type: 'gauge',
min:0,
max: 12,
startAngle: 90,
endAngle: -269.9999,
splitNumber: 12, //刻度數(shù)量
radius: '90%', //圖表尺寸
animation: 0,
pointer: { //儀表盤指針
length: '55%',
width: 10,
},
itemStyle: { //儀表盤指針樣式
normal: {
color: '#4b68cd',
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10,
shadowOffsetX: 2,
shadowOffsetY: 2
}
},
axisLine: {//儀表盤軸線樣式
show: 0,
lineStyle: {
color: [
[1, '#4158B0']
],
width: 50,
shadowColor: 'rgba(75,104,205,0.6)',
shadowBlur: 12,
shadowOffsetX: 3,
shadowOffsetY: 3
}
},
splitLine: { //分割線樣式
length: 50,
lineStyle: {
width: 3,
color: ['#ffffff']
}
},
axisTick: { //儀表盤刻度樣式
show: true,
splitNumber: 5, //分隔線之間分割的刻度數(shù)
length: 15, //刻度線長
lineStyle: {
color: ['#ffffff']
}
},
/*axisTick: {
show: true,
lineStyle: {
color: "#6eba44",
width: 1
},
length: 10,
splitNumber: 2
},*/
/* splitLine: {
show: true,
length: 20,
lineStyle: {
color: '#6eba44'
}
},*/
axisLabel: {//刻度標簽
distance: 0,
textStyle: {
color: "#4b68cd",
fontSize: "24",
padding:10,
},
formatter: function(e) {
switch (e + "") {
case '0':
return '12';
default:
return e;
}
}
},
detail: { //指針評價
show:false,
},
title: {//儀表盤標題
show: 0,
textStyle: {
fontSize: 30,
fontWeight: 'bolder',
fontStyle: 'normal',
color: "#6eba44"
},
offsetCenter: [0, 15]
},
data: [{
name: "",
value:12,
}]
}, {
name: '分鐘',
type: 'gauge',
min:0,
max:60,
startAngle: 90,
endAngle: -269.9999,
splitNumber: 12, //刻度數(shù)量
radius: '90%', //圖表尺寸
animation: 0,
pointer: { //儀表盤指針
length: '83%',
width: 6,
},
itemStyle: { //儀表盤指針樣式
normal: {
color: '#EE6A50',
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10,
shadowOffsetX: 2,
shadowOffsetY: 2
}
},
axisLine: {//儀表盤軸線樣式
show: 0,
lineStyle: {
color: [
[1, '#4158B0']
],
width: 50,
shadowColor: 'rgba(75,104,205,0.6)',
shadowBlur: 12,
shadowOffsetX: 3,
shadowOffsetY: 3
}
},
splitLine: { //分割線樣式
length: 50,
lineStyle: {
width: 3,
color: ['#ffffff']
}
},
axisTick: { //儀表盤刻度樣式
show: true,
splitNumber: 5, //分隔線之間分割的刻度數(shù)
length: 15,//刻度線長
lineStyle: {
color: ['#ffffff']
}
},
/*axisTick: {
show: true,
lineStyle: {
color: "#6eba44",
width: 1
},
length: 10,
splitNumber: 2
},*/
/* splitLine: {
show: true,
length: 20,
lineStyle: {
color: '#6eba44'
}
},*/
axisLabel: {//刻度標簽
show:0,
distance: 0,
textStyle: {
color: "#4B68CD",
fontSize: "24",
padding:10,
},
formatter: function(e) {
switch (e + "") {
case '0':
return '12';
default:
return e;
}
}
},
detail: { //指針評價
show:false,
},
title: {//儀表盤標題
show: 0,
textStyle: {
fontSize: 30,
fontWeight: 'bolder',
fontStyle: 'normal',
color: "#4B68CD"
},
offsetCenter: [0, 15]
},
data: [{
name: "",
value:5,
}]
},{
name: '秒',
type: 'gauge',
min:0,
max:60,
startAngle: 90,
endAngle: -269.9999,
splitNumber: 12, //刻度數(shù)量
radius: '90%', //圖表尺寸
animation: 0,
pointer: { //儀表盤指針
length: '97%',
width: 4,
},
itemStyle: { //儀表盤指針樣式
normal: {
color: '#36BF44',
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10,
shadowOffsetX: 2,
shadowOffsetY: 2
}
},
axisLine: {//儀表盤軸線樣式
show: 0,
lineStyle: {
color: [
[1, '#4158B0']
],
width: 50,
shadowColor: 'rgba(75,104,205,0.6)',
shadowBlur: 12,
shadowOffsetX: 3,
shadowOffsetY: 3
}
},
splitLine: { //分割線樣式
length: 50,
lineStyle: {
width: 3,
color: ['#ffffff']
}
},
axisTick: { //儀表盤刻度樣式
show: true,
splitNumber: 5, //分隔線之間分割的刻度數(shù)
length: 15, //刻度線長
lineStyle: {
color: ['#ffffff']
}
},
/*axisTick: {
show: true,
lineStyle: {
color: "#6eba44",
width: 1
},
length: 10,
splitNumber: 2
},*/
/* splitLine: {
show: true,
length: 20,
lineStyle: {
color: '#6eba44'
}
},*/
axisLabel: {//刻度標簽
show:0,
distance: 0,
textStyle: {
color: "#4B68CD",
fontSize: "24",
padding:10,
},
formatter: function(e) {
switch (e + "") {
case '0':
return '12';
default:
return e;
}
}
},
detail: { //指針評價
show:false,
},
title: {//儀表盤標題
show: 0,
textStyle: {
fontSize: 30,
fontWeight: 'bolder',
fontStyle: 'normal',
color: "#4B68CD"
},
offsetCenter: [0, 15]
},
data: [{
name: "",
value:10,
}]
}
]
};
clearInterval(timeTicket);
var timeTicket = setInterval(function() {
var datetime = new Date();
var h = datetime.getHours();
var m = datetime.getMinutes();
var s = datetime.getSeconds();
var ms = datetime.getMilliseconds();
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 seconds = s + ms / 1000;
option.series[0].data[0].value = (hours_12).toFixed(2);
option.series[1].data[0].value = (minutes).toFixed(2);
option.series[2].data[0].value = (seconds).toFixed(2);
myChart.setOption(option);
}, 100);
效果圖如下：
圖片.png
