bd_group
/
gnss-tool-kit
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改时钟的样式

master
叶志超 2021-11-24 14:33:37 +08:00
parent c22e126c5c
commit d6afa63135
1 changed files with 135 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

196
src/render/components/Clock.vue
View File

@ -27,104 +27,178 @@ const option = reactive({
{
name: 'hour',
type: 'gauge',
radius: '65%',
min : 0,
max : 12,
splitNumber: 12,
startAngle: 90,
endAngle:-270,
axisTick:{
endAngle: -270,
min: 0,
max: 12,
splitNumber: 12,
clockwise: true,
axisLine: {
lineStyle: {
color: '#eee'
},
// width: 15,
// color: [[1, 'rgba(0,0,0,0.7)']],
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 15
}
},
splitLine: {
length :15,
lineStyle: {
color: '#eee'
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 3,
shadowOffsetX: 1,
shadowOffsetY: 2
}
},
axisLabel:{
formatter: function(v: Number){
switch(v){
case 0:return '';
default: return v;
axisLabel: {
fontSize: 12,
distance: 15,
formatter: function (value) {
if (value === 0) {
return '';
}
return value + '';
}
},
pointer:{
length :'40%',
width :8,
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: 'rgb(0,0,255)'
color: '#C0911F',
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 8,
shadowOffsetX: 2,
shadowOffsetY: 4
}
},
detail: {
show:false
},
data: [{ value: 0 }]
}, {
detail: {
show: false
},
title: {
offsetCenter: [0, '30%']
},
data: [
{
value: 0
}
]
},
{
name: 'minute',
type: 'gauge',
min : 0,
max : 60,
splitNumber: 60,
startAngle: 90,
endAngle:-270,
endAngle: -270,
min: 0,
max: 60,
clockwise: true,
axisLine: {
show: false
},
axisTick:{
show: false
},
splitLine: {
show: false
},
axisLabel:{
axisTick: {
show: false
},
pointer:{
length :'50%',
width :5,
itemStyle: {
color: 'rgb(0,255,0)'
}
},
detail: {
show:false
axisLabel: {
show: false
},
data: [{ value: 0}]
}, {
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: 0
}
]
},
{
name: 'second',
type: 'gauge',
min : 0,
max : 60,
splitNumber: 60,
startAngle: 90,
endAngle :-270,
endAngle: -270,
min: 0,
max: 60,
animationEasingUpdate: 'bounceOut',
clockwise: true,
axisLine: {
show: false
},
axisTick:{
show: false
},
splitLine: {
show: false
},
axisLabel:{
axisTick: {
show: false
},
pointer:{
length :'75%',
width :3,
itemStyle: {
color: 'rgb(255,0,0)'
}
},
detail: {
show:false
axisLabel: {
show: false
},
data: [{ value: 0 }]
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: 0
}
]
}
]
});