clockecharts gauge配置项内容和展示
配置项如下
var date = new Date();
var second = date.getSeconds();
var minute = date.getMinutes() + second / 60;
var hour = date.getHours() % 12 + minute / 60;
option = {
series: [{
name: 'hour',
type: 'gauge',
startAngle: 90,
endAngle: -270,
min: 0,
max: 12,
splitNumber: 12,
axisLine: {
lineStyle: {
width: 15,
color: [
[1, 'rgba(0,0,0,0.7)']
],
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 15
}
},
splitLine: {
lineStyle: {
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 3,
shadowOffsetX: 1,
shadowOffsetY: 2
}
},
axisLabel: {
fontSize: 50,
distance: 25,
formatter: function(value) {
if (value === 0) {
return '';
}
return value;
}
},
anchor: {
show: true,
icon: 'path://M532.8,70.8C532.8,70.8,532.8,70.8,532.8,70.8L532.8,70.8C532.7,70.8,532.8,70.8,532.8,70.8z M456.1,49.6c-2.2-6.2-8.1-10.6-15-10.6h-37.5v10.6h37.5l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3v0h-22.5c-1.5,0.1-3,0.4-4.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.8c-0.6,1.7-0.9,3.4-0.9,5.3v16h10.6v-16l0,0l0,0c0-2.7,2.1-5,4.7-5.3h10.3l10.4,21.2h11.8l-10.4-21.2h0c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3C457,53,456.7,51.2,456.1,49.6z M388.9,92.1h11.3L381,39h-3.6h-11.3L346.8,92v0h11.3l3.9-10.7h7.3h7.7l3.9-10.6h-7.7h-7.3l7.7-21.2v0L388.9,92.1z M301,38.9h-10.6v53.1H301V70.8h28.4l3.7-10.6H301V38.9zM333.2,38.9v10.6v10.7v31.9h10.6V38.9H333.2z M249.5,81.4L249.5,81.4L249.5,81.4c-2.9,0-5.3-2.4-5.3-5.3h0V54.9h0l0,0c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.9-10.6h-37.5c-1.9,0-3.6,0.3-5.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.7c-0.6,1.7-0.9,3.5-0.9,5.3l0,0v21.3c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.5,0.9,5.3,0.9h33.6l3.9-10.6H249.5z M176.8,38.9v10.6h49.6l3.9-10.6H176.8z M192.7,81.4L192.7,81.4L192.7,81.4c-2.9,0-5.3-2.4-5.3-5.3l0,0v-5.3h38.9l3.9-10.6h-53.4v10.6v5.3l0,0c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.4,0.9,5.3,0.9h23.4h10.2l3.9-10.6l0,0H192.7z M460.1,38.9v10.6h21.4v42.5h10.6V49.6h17.5l3.8-10.6H460.1z M541.6,68.2c-0.2,0.1-0.4,0.3-0.7,0.4C541.1,68.4,541.4,68.3,541.6,68.2L541.6,68.2z M554.3,60.2h-21.6v0l0,0c-2.9,0-5.3-2.4-5.3-5.3c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.8-10.6h-37.5l0,0c-6.9,0-12.8,4.4-15,10.6c-0.6,1.7-0.9,3.5-0.9,5.3c0,1.9,0.3,3.7,0.9,5.3c2.2,6.2,8.1,10.6,15,10.6h21.6l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3l0,0h-37.5v10.6h37.5c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3c0-1.9-0.3-3.7-0.9-5.3C567.2,64.6,561.3,60.2,554.3,60.2z',
showAbove: false,
offsetCenter: [0, '-35%'],
size: 120,
keepAspect: true,
itemStyle: {
color: '#707177'
}
},
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: 12,
length: '55%',
offsetCenter: [0, '8%'],
itemStyle: {
color: '#C0911F',
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 8,
shadowOffsetX: 2,
shadowOffsetY: 4
}
},
detail: {
show: false
},
title: {
offsetCenter: [0, '30%']
},
data: [{
value: hour
}]
},
{
name: 'minute',
type: 'gauge',
startAngle: 90,
endAngle: -270,
min: 0,
max: 60,
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: 8,
length: '70%',
offsetCenter: [0, '8%'],
itemStyle: {
color: '#C0911F',
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 8,
shadowOffsetX: 2,
shadowOffsetY: 4
}
},
anchor: {
show: true,
size: 20,
showAbove: false,
itemStyle: {
borderWidth: 15,
borderColor: '#C0911F',
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 8,
shadowOffsetX: 2,
shadowOffsetY: 4
}
},
detail: {
show: false
},
title: {
offsetCenter: ['0%', '-40%']
},
data: [{
value: minute
}]
},
{
name: 'second',
type: 'gauge',
startAngle: 90,
endAngle: -270,
min: 0,
max: 60,
animationEasingUpdate: 'bounceOut',
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: '85%',
offsetCenter: [0, '8%'],
itemStyle: {
color: '#C0911F',
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 8,
shadowOffsetX: 2,
shadowOffsetY: 4
}
},
anchor: {
show: true,
size: 15,
showAbove: true,
itemStyle: {
color: '#C0911F',
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 8,
shadowOffsetX: 2,
shadowOffsetY: 4
}
},
detail: {
show: false
},
title: {
offsetCenter: ['0%', '-40%']
},
data: [{
value: second
}]
}
]
};
option = {
"animationDurationUpdate": 300,
"darkMode": "auto",
"color": ["#5470c6", "#91cc75", "#fac858", "#ee6666", "#73c0de", "#3ba272", "#fc8452", "#9a60b4", "#ea7ccc"],
"gradientColor": ["#f6efa6", "#d88273", "#bf444c"],
"aria": {
"decal": {
"decals": [{
"color": "rgba(0, 0, 0, 0.2)",
"dashArrayX": [1, 0],
"dashArrayY": [2, 5],
"symbolSize": 1,
"rotation": 0.5235987755982988
}, {
"color": "rgba(0, 0, 0, 0.2)",
"symbol": "circle",
"dashArrayX": [
[8, 8],
[0, 8, 8, 0]
],
"dashArrayY": [6, 0],
"symbolSize": 0.8
}, {
"color": "rgba(0, 0, 0, 0.2)",
"dashArrayX": [1, 0],
"dashArrayY": [4, 3],
"rotation": -0.7853981633974483
}, {
"color": "rgba(0, 0, 0, 0.2)",
"dashArrayX": [
[6, 6],
[0, 6, 6, 0]
],
"dashArrayY": [6, 0]
}, {
"color": "rgba(0, 0, 0, 0.2)",
"dashArrayX": [
[1, 0],
[1, 6]
],
"dashArrayY": [1, 0, 6, 0],
"rotation": 0.7853981633974483
}, {
"color": "rgba(0, 0, 0, 0.2)",
"symbol": "triangle",
"dashArrayX": [
[9, 9],
[0, 9, 9, 0]
],
"dashArrayY": [7, 2],
"symbolSize": 0.75
}]
}
},
"textStyle": {
"fontFamily": "sans-serif",
"fontSize": 12,
"fontStyle": "normal",
"fontWeight": "normal"
},
"stateAnimation": {
"duration": 300,
"easing": "cubicOut"
},
"animation": "auto",
"animationDuration": 1000,
"animationEasing": "cubicInOut",
"animationEasingUpdate": "cubicInOut",
"animationThreshold": 2000,
"progressiveThreshold": 3000,
"progressive": 400,
"hoverLayerThreshold": 3000,
"useUTC": false,
"axisPointer": [{
"show": "auto",
"zlevel": 0,
"z": 50,
"type": "line",
"snap": false,
"triggerTooltip": true,
"value": null,
"status": null,
"link": [],
"animation": null,
"animationDurationUpdate": 200,
"lineStyle": {
"color": "#B9BEC9",
"width": 1,
"type": "dashed"
},
"shadowStyle": {
"color": "rgba(210,219,238,0.2)"
},
"label": {
"show": true,
"formatter": null,
"precision": "auto",
"margin": 3,
"color": "#fff",
"padding": [5, 7, 5, 7],
"backgroundColor": "auto",
"borderColor": null,
"borderWidth": 0,
"borderRadius": 3
},
"handle": {
"show": false,
"icon": "M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z",
"size": 45,
"margin": 50,
"color": "#333",
"shadowBlur": 3,
"shadowColor": "#aaa",
"shadowOffsetX": 0,
"shadowOffsetY": 2,
"throttle": 40
}
}],
"tooltip": [],
"series": [{
"name": "hour",
"type": "gauge",
"startAngle": 90,
"endAngle": -270,
"min": 0,
"max": 12,
"splitNumber": 12,
"axisLine": {
"lineStyle": {
"width": 15,
"color": [
[1, "rgba(0,0,0,0.7)"]
],
"shadowColor": "rgba(0, 0, 0, 0.5)",
"shadowBlur": 15
},
"show": true,
"roundCap": false
},
"splitLine": {
"lineStyle": {
"shadowColor": "rgba(0, 0, 0, 0.3)",
"shadowBlur": 3,
"shadowOffsetX": 1,
"shadowOffsetY": 2,
"color": "#63677A",
"width": 3,
"type": "solid"
},
"show": true,
"length": 10,
"distance": 10
},
"axisLabel": {
"fontSize": 50,
"distance": 25,
"show": true,
"color": "#464646"
},
"anchor": {
"show": true,
"icon": "path://M532.8,70.8C532.8,70.8,532.8,70.8,532.8,70.8L532.8,70.8C532.7,70.8,532.8,70.8,532.8,70.8z M456.1,49.6c-2.2-6.2-8.1-10.6-15-10.6h-37.5v10.6h37.5l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3v0h-22.5c-1.5,0.1-3,0.4-4.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.8c-0.6,1.7-0.9,3.4-0.9,5.3v16h10.6v-16l0,0l0,0c0-2.7,2.1-5,4.7-5.3h10.3l10.4,21.2h11.8l-10.4-21.2h0c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3C457,53,456.7,51.2,456.1,49.6z M388.9,92.1h11.3L381,39h-3.6h-11.3L346.8,92v0h11.3l3.9-10.7h7.3h7.7l3.9-10.6h-7.7h-7.3l7.7-21.2v0L388.9,92.1z M301,38.9h-10.6v53.1H301V70.8h28.4l3.7-10.6H301V38.9zM333.2,38.9v10.6v10.7v31.9h10.6V38.9H333.2z M249.5,81.4L249.5,81.4L249.5,81.4c-2.9,0-5.3-2.4-5.3-5.3h0V54.9h0l0,0c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.9-10.6h-37.5c-1.9,0-3.6,0.3-5.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.7c-0.6,1.7-0.9,3.5-0.9,5.3l0,0v21.3c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.5,0.9,5.3,0.9h33.6l3.9-10.6H249.5z M176.8,38.9v10.6h49.6l3.9-10.6H176.8z M192.7,81.4L192.7,81.4L192.7,81.4c-2.9,0-5.3-2.4-5.3-5.3l0,0v-5.3h38.9l3.9-10.6h-53.4v10.6v5.3l0,0c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.4,0.9,5.3,0.9h23.4h10.2l3.9-10.6l0,0H192.7z M460.1,38.9v10.6h21.4v42.5h10.6V49.6h17.5l3.8-10.6H460.1z M541.6,68.2c-0.2,0.1-0.4,0.3-0.7,0.4C541.1,68.4,541.4,68.3,541.6,68.2L541.6,68.2z M554.3,60.2h-21.6v0l0,0c-2.9,0-5.3-2.4-5.3-5.3c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.8-10.6h-37.5l0,0c-6.9,0-12.8,4.4-15,10.6c-0.6,1.7-0.9,3.5-0.9,5.3c0,1.9,0.3,3.7,0.9,5.3c2.2,6.2,8.1,10.6,15,10.6h21.6l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3l0,0h-37.5v10.6h37.5c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3c0-1.9-0.3-3.7-0.9-5.3C567.2,64.6,561.3,60.2,554.3,60.2z",
"showAbove": false,
"offsetCenter": [0, "-35%"],
"size": 120,
"keepAspect": true,
"itemStyle": {
"color": "#707177",
"borderWidth": 0,
"borderColor": "#5470c6"
}
},
"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": 12,
"length": "55%",
"offsetCenter": [0, "8%"],
"itemStyle": {
"color": "#C0911F",
"shadowColor": "rgba(0, 0, 0, 0.3)",
"shadowBlur": 8,
"shadowOffsetX": 2,
"shadowOffsetY": 4
},
"show": true,
"keepAspect": false
},
"detail": {
"show": false,
"backgroundColor": "rgba(0,0,0,0)",
"borderWidth": 0,
"borderColor": "#ccc",
"width": 100,
"height": null,
"padding": [5, 10],
"offsetCenter": [0, "40%"],
"color": "#464646",
"fontSize": 30,
"fontWeight": "bold",
"lineHeight": 30,
"valueAnimation": false
},
"title": {
"offsetCenter": [0, "30%"],
"show": true,
"color": "#464646",
"fontSize": 16,
"valueAnimation": false
},
"data": [{
"value": 10.595277777777778
}],
"clockwise": true,
"zlevel": 0,
"z": 2,
"center": ["50%", "50%"],
"legendHoverLink": true,
"radius": "75%",
"progress": {
"show": false,
"overlap": true,
"width": 10,
"roundCap": false,
"clip": true
},
"axisTick": {
"show": true,
"splitNumber": 5,
"length": 6,
"distance": 10,
"lineStyle": {
"color": "#63677A",
"width": 1,
"type": "solid"
}
},
"label": {},
"emphasis": {
"label": {}
}
}, {
"name": "minute",
"type": "gauge",
"startAngle": 90,
"endAngle": -270,
"min": 0,
"max": 60,
"axisLine": {
"show": false,
"roundCap": false,
"lineStyle": {
"color": [
[1, "#E6EBF8"]
],
"width": 10
}
},
"splitLine": {
"show": false,
"length": 10,
"distance": 10,
"lineStyle": {
"color": "#63677A",
"width": 3,
"type": "solid"
}
},
"axisTick": {
"show": false,
"splitNumber": 5,
"length": 6,
"distance": 10,
"lineStyle": {
"color": "#63677A",
"width": 1,
"type": "solid"
}
},
"axisLabel": {
"show": false,
"distance": 15,
"color": "#464646",
"fontSize": 12
},
"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": 8,
"length": "70%",
"offsetCenter": [0, "8%"],
"itemStyle": {
"color": "#C0911F",
"shadowColor": "rgba(0, 0, 0, 0.3)",
"shadowBlur": 8,
"shadowOffsetX": 2,
"shadowOffsetY": 4
},
"show": true,
"keepAspect": false
},
"anchor": {
"show": true,
"size": 20,
"showAbove": false,
"itemStyle": {
"borderWidth": 15,
"borderColor": "#C0911F",
"shadowColor": "rgba(0, 0, 0, 0.3)",
"shadowBlur": 8,
"shadowOffsetX": 2,
"shadowOffsetY": 4,
"color": "#fff"
},
"icon": "circle",
"offsetCenter": [0, 0],
"keepAspect": false
},
"detail": {
"show": false,
"backgroundColor": "rgba(0,0,0,0)",
"borderWidth": 0,
"borderColor": "#ccc",
"width": 100,
"height": null,
"padding": [5, 10],
"offsetCenter": [0, "40%"],
"color": "#464646",
"fontSize": 30,
"fontWeight": "bold",
"lineHeight": 30,
"valueAnimation": false
},
"title": {
"offsetCenter": ["0%", "-40%"],
"show": true,
"color": "#464646",
"fontSize": 16,
"valueAnimation": false
},
"data": [{
"value": 35.71666666666667
}],
"clockwise": true,
"zlevel": 0,
"z": 2,
"center": ["50%", "50%"],
"legendHoverLink": true,
"radius": "75%",
"splitNumber": 10,
"progress": {
"show": false,
"overlap": true,
"width": 10,
"roundCap": false,
"clip": true
},
"label": {},
"emphasis": {
"label": {}
}
}, {
"name": "second",
"type": "gauge",
"startAngle": 90,
"endAngle": -270,
"min": 0,
"max": 60,
"animationEasingUpdate": "bounceOut",
"axisLine": {
"show": false,
"roundCap": false,
"lineStyle": {
"color": [
[1, "#E6EBF8"]
],
"width": 10
}
},
"splitLine": {
"show": false,
"length": 10,
"distance": 10,
"lineStyle": {
"color": "#63677A",
"width": 3,
"type": "solid"
}
},
"axisTick": {
"show": false,
"splitNumber": 5,
"length": 6,
"distance": 10,
"lineStyle": {
"color": "#63677A",
"width": 1,
"type": "solid"
}
},
"axisLabel": {
"show": false,
"distance": 15,
"color": "#464646",
"fontSize": 12
},
"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": "85%",
"offsetCenter": [0, "8%"],
"itemStyle": {
"color": "#C0911F",
"shadowColor": "rgba(0, 0, 0, 0.3)",
"shadowBlur": 8,
"shadowOffsetX": 2,
"shadowOffsetY": 4
},
"show": true,
"keepAspect": false
},
"anchor": {
"show": true,
"size": 15,
"showAbove": true,
"itemStyle": {
"color": "#C0911F",
"shadowColor": "rgba(0, 0, 0, 0.3)",
"shadowBlur": 8,
"shadowOffsetX": 2,
"shadowOffsetY": 4,
"borderWidth": 0,
"borderColor": "#5470c6"
},
"icon": "circle",
"offsetCenter": [0, 0],
"keepAspect": false
},
"detail": {
"show": false,
"backgroundColor": "rgba(0,0,0,0)",
"borderWidth": 0,
"borderColor": "#ccc",
"width": 100,
"height": null,
"padding": [5, 10],
"offsetCenter": [0, "40%"],
"color": "#464646",
"fontSize": 30,
"fontWeight": "bold",
"lineHeight": 30,
"valueAnimation": false
},
"title": {
"offsetCenter": ["0%", "-40%"],
"show": true,
"color": "#464646",
"fontSize": 16,
"valueAnimation": false
},
"data": [{
"value": 43
}],
"clockwise": true,
"zlevel": 0,
"z": 2,
"center": ["50%", "50%"],
"legendHoverLink": true,
"radius": "75%",
"splitNumber": 10,
"progress": {
"show": false,
"overlap": true,
"width": 10,
"roundCap": false,
"clip": true
},
"label": {},
"emphasis": {
"label": {}
}
}],
"visualMap": [],
"legend": [],
"markArea": [{
"zlevel": 0,
"z": 1,
"tooltip": {
"trigger": "item"
},
"animation": false,
"label": {
"show": true,
"position": "top"
},
"itemStyle": {
"borderWidth": 0
},
"emphasis": {
"label": {
"show": true,
"position": "top"
}
}
}],
"markLine": [{
"zlevel": 0,
"z": 5,
"symbol": ["circle", "arrow"],
"symbolSize": [8, 16],
"precision": 2,
"tooltip": {
"trigger": "item"
},
"label": {
"show": true,
"position": "end",
"distance": 5
},
"lineStyle": {
"type": "dashed"
},
"emphasis": {
"label": {
"show": true
},
"lineStyle": {
"width": 3
}
},
"animationEasing": "linear"
}],
"markPoint": [{
"zlevel": 0,
"z": 5,
"symbol": "pin",
"symbolSize": 50,
"tooltip": {
"trigger": "item"
},
"label": {
"show": true,
"position": "inside"
},
"itemStyle": {
"borderWidth": 2
},
"emphasis": {
"label": {
"show": true
}
}
}],
"brush": [],
"dataZoom": []
}
var timeUpdatedStatus = {
second: false,
minute: false,
hour: false
};
function updateSeries(time, series, type) {
var isCritical = (Math.floor(time) === 0) || (type === 'second' && time === 1);
if (isCritical && timeUpdatedStatus[type] === true) {
timeUpdatedStatus[type] = false;
series.data[0].value = 0;
series.clockwise = true;
option.animationDurationUpdate = 0;
myChart.setOption(option, true);
}
series.data[0].value = time;
series.clockwise = true;
if (time === 0) {
timeUpdatedStatus[type] = true;
series.clockwise = false;
}
}
setInterval(function() {
var date = new Date();
var second = date.getSeconds();
var minute = date.getMinutes() + second / 60;
var hour = date.getHours() % 12 + minute / 60;
updateSeries(second, option.series[2], 'second');
updateSeries(minute, option.series[1], 'minute');
updateSeries(hour, option.series[0], 'hour');
option.animationDurationUpdate = 300;
myChart.setOption(option, true);
date = null;
}, 1000);
截图如下
