Skip to content

Rebalance layout and scale elements in Gauge Car #143

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Manahil-Afzal wants to merge 1 commit into
base: gh-pages
Choose a base branch
from
Open

Rebalance layout and scale elements in Gauge Car #143

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 38 additions & 38 deletions public/examples/ts/gauge-car.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ option = {
startAngle: -30,
endAngle: -315,
splitNumber: 9,
radius: '35%',
radius: '43%',
center: ['21%', '55%'],
axisLine: {
lineStyle: {
Expand Down Expand Up @@ -54,7 +54,7 @@ option = {
fontWeight: 800,
fontFamily: 'Arial',
color: '#fff',
offsetCenter: [0, '-60%']
offsetCenter: [0, '30%']
},
progress: {
show: true,
Expand All @@ -78,7 +78,7 @@ option = {
startAngle: -140,
endAngle: -305,
splitNumber: 5,
radius: '35%',
radius: '40%',
center: ['21%', '55%'],
axisLine: {
lineStyle: {
Expand All @@ -103,7 +103,7 @@ option = {
},
axisLabel: {
distance: 14,
fontSize: 18,
fontSize: 10,
fontWeight: 800,
fontFamily: 'Arial',
color: '#fff'
Expand All @@ -112,8 +112,8 @@ option = {
pointer: {
icon: 'path://M-36.5,23.9L-41,4.4c-0.1-0.4-0.4-0.7-0.7-0.7c-0.5-0.1-1.1,0.2-1.2,0.7l-4.5,19.5c0,0.1,0,0.1,0,0.2v92.3c0,0.6,0.4,1,1,1h9c0.6,0,1-0.4,1-1V24.1C-36.5,24-36.5,23.9-36.5,23.9z M-39.5,114.6h-5v-85h5V114.6z',
width: 5,
length: '40%',
offsetCenter: [0, '-58%'],
length: '70%',
offsetCenter: [0, '5%'],
itemStyle: {
color: '#f00',
shadowColor: 'rgba(255, 0, 0)',
Expand All @@ -123,7 +123,7 @@ option = {
},
title: {
color: '#fff',
fontSize: 14,
fontSize: 7,
fontWeight: 800,
fontFamily: 'Arial',
offsetCenter: [0, 0]
Expand Down Expand Up @@ -183,18 +183,18 @@ option = {
}
},
axisLabel: {
distance: 10,
fontSize: 35,
distance: 3,
fontSize: 15,
fontWeight: 800,
fontFamily: 'Arial',
color: '#fff'
},
anchor: {},
pointer: {
icon: 'path://M-36.5,23.9L-41,4.4c-0.1-0.4-0.4-0.7-0.7-0.7c-0.5-0.1-1.1,0.2-1.2,0.7l-4.5,19.5c0,0.1,0,0.1,0,0.2v92.3c0,0.6,0.4,1,1,1h9c0.6,0,1-0.4,1-1V24.1C-36.5,24-36.5,23.9-36.5,23.9z M-39.5,114.6h-5v-85h5V114.6z',
width: 10,
offsetCenter: [0, '-10%'],
length: '75%',
width: 6,
offsetCenter: [-1, '10%'],
length: '65%',
itemStyle: {
color: '#f00',
shadowColor: 'rgba(255, 0, 0)',
Expand All @@ -204,14 +204,14 @@ option = {
},
title: {
color: '#fff',
fontSize: 12,
fontSize: 8,
fontWeight: 800,
fontFamily: 'Arial',
offsetCenter: [0, '-50%']
offsetCenter: [0, '0']
},
data: [
{
value: 0.6,
value: 0,
name: '1/min x 1000'
}
],
Expand Down Expand Up @@ -250,23 +250,23 @@ option = {
show: false
},
detail: {
offsetCenter: ['25%', '50%'],
offsetCenter: ['2%', '-12%'],
formatter: '{a|{value}}{b|km/h}',
rich: {
a: {
fontSize: 60,
fontSize: 14,
fontWeight: 800,
fontFamily: 'Arial',
color: '#fff',
align: 'center',
padding: [0, 5, 0, 0]
},
b: {
fontSize: 14,
fontSize: 9,
fontWeight: 800,
fontFamily: 'Arial',
color: '#fff',
padding: [0, 0, 20, 0]
padding: [0, 0, 2, 0]
}
}
},
Expand All @@ -287,7 +287,7 @@ option = {
startAngle: 135,
endAngle: -150,
splitNumber: 8,
radius: '35%',
radius: '40%',
center: ['79%', '55%'],
axisLine: {
lineStyle: {
Expand All @@ -309,7 +309,7 @@ option = {
},
title: {},
detail: {
offsetCenter: ['-15%', 0],
offsetCenter: ['39%', 0],
formatter: [
'{a| 00:00}',
'{a|行驶时间 0:00}{b| h}',
Expand All @@ -319,18 +319,18 @@ option = {
].join('\n'),
rich: {
a: {
fontSize: 14,
fontSize: 6,
fontWeight: 800,
fontFamily: 'Arial',
lineHeight: 22,
lineHeight: 8,
color: '#fff',
align: 'left'
},
b: {
fontWeight: 600,
fontWeight: 800,
fontFamily: 'Arial',
fontSize: 12,
lineHeight: 22,
fontSize: 6,
lineHeight: 12,
color: '#fff',
align: 'left'
}
Expand Down Expand Up @@ -386,8 +386,8 @@ option = {
}
},
axisLabel: {
distance: 12,
fontSize: 18,
distance: 11,
fontSize: 8,
fontWeight: 800,
fontFamily: 'Arial',
color: '#fff',
Expand All @@ -411,28 +411,28 @@ option = {
anchor: {
show: true,
itemStyle: {},
offsetCenter: ['-22%', '-57%'],
size: 18,
offsetCenter: ['-2%', '-35%'],
size: 10,
icon: 'path://M1.11979167,1.11111112 C1.11979167,0.497461393 1.61725306,0 2.23090279,0 L12.2309028,0 C12.8445525,1.43824153e-08 13.3420139,0.497461403 13.3420139,1.11111112 L13.3420139,10 L15.5642361,10 C16.7915356,10 17.7864583,10.9949228 17.7864583,12.2222222 L17.7864583,16.6666667 C17.7865523,17.28025 18.2839861,17.7776077 18.8975694,17.7776077 C19.5111527,17.7776077 20.0085866,17.28025 20.0086805,16.6666667 L20.0086805,8.88888888 L17.7864583,8.88888888 C17.1728086,8.88888888 16.6753472,8.3914275 16.6753472,7.77777779 L16.6753472,3.79333333 L15.6197917,2.73777777 C15.1859413,2.30392741 15.1859413,1.60051702 15.6197917,1.16666667 L15.6197917,1.16666667 C16.053642,0.732816318 16.7570524,0.732816318 17.1909028,1.16666667 L21.9053472,5.88111112 C22.1140468,6.08922811 22.2312072,6.37193273 22.2309028,6.66666667 L22.2309028,16.6666667 C22.2309028,18.5076158 20.7385186,20 18.8975695,20 C17.0566203,20 15.5642361,18.5076158 15.5642361,16.6666667 L15.5642361,12.2222222 L13.3420139,12.2222222 L13.3420139,17.7777778 L13.3420139,17.7777778 C13.9556636,17.7777778 14.453125,18.2752392 14.453125,18.8888889 L14.453125,18.8888889 C14.453125,19.5025386 13.9556636,20 13.3420139,20 L1.11979165,20 C0.506141934,20 0.00868054688,19.5025386 0.00868054687,18.8888889 L0.00868054687,18.8888889 C0.00868054688,18.2752392 0.506141934,17.7777778 1.11979165,17.7777778 L1.11979167,17.7777778 L1.11979167,1.11111112 Z M3.34201388,2.22222221 L3.34201388,8.88888888 L11.1197917,8.88888888 L11.1197917,2.22222221 L3.34201388,2.22222221 Z'
},
pointer: {
show: false
},
title: {},
detail: {
offsetCenter: ['10%', '-56%'],
offsetCenter: ['-51%', '14%'],
formatter: '{a|831}{b| km}',
rich: {
a: {
fontSize: 15,
fontSize: 7,
fontWeight: 800,
fontFamily: 'Arial',
color: '#fff'
},
b: {
fontWeight: 600,
fontFamily: 'Arial',
fontSize: 12,
fontSize: 10,
color: '#fff'
}
}
Expand All @@ -453,7 +453,7 @@ option = {
endAngle: 310,
clockwise: false,
splitNumber: 2,
radius: '35%',
radius: '33%',
center: ['79%', '55%'],
axisLine: {
lineStyle: {
Expand All @@ -474,15 +474,15 @@ option = {
axisTick: {
splitNumber: 3,
length: 8,
distance: -8,
distance: -9,
lineStyle: {
color: '#fff',
width: 2
}
},
axisLabel: {
distance: 14,
fontSize: 18,
distance: 12,
fontSize: 7,
fontWeight: 800,
fontFamily: 'Arial',
color: '#fff',
Expand All @@ -493,7 +493,7 @@ option = {
anchor: {
show: true,
itemStyle: {},
offsetCenter: [0, '55%'],
offsetCenter: [-41, '-10%'],
size: 20,
icon: 'path://M-34.1-1.1L-34.1-1.1c0-0.3-0.3-0.6-0.6-0.6h-3.6v-1.5c0-0.5-0.2-0.9-0.6-1.1s-0.9-0.2-1.3,0c-0.4,0.2-0.6,0.7-0.6,1.1V7.9c0,0,0,0.1,0,0.1c-0.8,0.5-1.2,1.5-0.9,2.5c0.3,0.9,1.1,1.6,2.1,1.6c1,0,1.8-0.6,2.1-1.5c0.3-0.9,0-1.9-0.8-2.5V6.3h3.5c0.4,0,0.7-0.3,0.7-0.7l0,0c0-0.4-0.3-0.7-0.7-0.7h-3.5V2.9h3.5c0.4,0,0.7-0.3,0.7-0.7l0,0c0-0.4-0.3-0.7-0.7-0.7h-3.5v-2.1h3.6C-34.4-0.5-34.1-0.8-34.1-1.1z M-44.9,11.6c-0.7,0-1.4-0.2-2-0.6c-0.4-0.3-0.9-0.4-1.4-0.4c-0.4,0-0.9,0.2-1.2,0.4c-0.4,0.2-1.4-0.9-0.9-1.3c0.6-0.4,1.3-0.6,2-0.7c0.8,0,1.5,0.2,2.2,0.5c0.4,0.3,0.9,0.4,1.3,0.4c0.6,0,1.1-0.2,1.5-0.6s1.6,0.7,0.9,1.3S-44,11.6-44.9,11.6L-44.9,11.6z M-34.3,11.6c-0.7,0-1.4-0.3-2-0.7c-0.6-0.4,0.5-1.6,0.9-1.3s0.8,0.4,1.2,0.4c0.5,0,1-0.1,1.4-0.4c0.6-0.3,1.3-0.5,2-0.6h0c0.9,0,1.7,0.3,2.4,0.9c0.7,0.5-0.5,1.6-0.9,1.3c-0.4-0.3-1-0.6-1.5-0.6h0c-0.5,0-0.9,0.2-1.3,0.4c-0.6,0.3-1.3,0.5-2,0.6H-34.3z M-33.5,16.3c-0.7,0-1.4-0.3-1.9-0.8c-0.4-0.3-0.6-0.5-1-0.5c-0.4,0-0.7,0.2-1,0.4c-0.6,0.5-1.3,0.7-2,0.7c-0.7,0-1.4-0.3-1.9-0.8c-0.2-0.3-0.6-0.4-0.9-0.4c-0.4,0-0.7,0.1-1.1,0.5c-0.6,0.5-1.3,0.7-2.1,0.7c-0.7-0.1-1.4-0.4-1.9-0.9c-0.4-0.3-0.6-0.5-1-0.5c-0.3,0-0.6,0.2-0.9,0.4s-1.6-0.7-1.1-1.2c0.5-0.5,1.2-0.8,1.9-0.9c1-0.1,1.6,0.4,2.1,0.8c0.3,0.3,0.6,0.5,1,0.5c0.4,0,0.6-0.1,1-0.4c0.6-0.5,1.4-0.8,2.1-0.8c0.7,0,1.4,0.3,1.9,0.8c0.2,0.2,0.6,0.4,0.9,0.4c0.4,0,0.6-0.1,1-0.4c0.6-0.5,1.3-0.7,2-0.7c0.8,0,1.5,0.3,2,0.9c0.4,0.3,0.6,0.4,0.9,0.4c0.3,0,0.7-0.2,1.1-0.5c0.5-0.4,1.2-0.9,2.3-0.8c0.7,0,1.4,0.3,1.9,0.7c0.5,0.4-0.7,1.5-1,1.3s-0.6-0.4-1-0.4c-0.4,0-0.7,0.2-1.2,0.5C-32,15.9-32.7,16.2-33.5,16.3L-33.5,16.3z'
},
Expand Down