From caee877368b66aafea5c90b0678d3d8d2149190a Mon Sep 17 00:00:00 2001 From: Manahil Afzal Date: Thu, 22 Jan 2026 10:45:50 -0800 Subject: [PATCH] Adjust gauge car layout to prevent text collision --- public/examples/ts/gauge-car.ts | 76 ++++++++++++++++----------------- 1 file changed, 38 insertions(+), 38 deletions(-) diff --git a/public/examples/ts/gauge-car.ts b/public/examples/ts/gauge-car.ts index 2f3e153e..62c5f481 100644 --- a/public/examples/ts/gauge-car.ts +++ b/public/examples/ts/gauge-car.ts @@ -26,7 +26,7 @@ option = { startAngle: -30, endAngle: -315, splitNumber: 9, - radius: '35%', + radius: '43%', center: ['21%', '55%'], axisLine: { lineStyle: { @@ -54,7 +54,7 @@ option = { fontWeight: 800, fontFamily: 'Arial', color: '#fff', - offsetCenter: [0, '-60%'] + offsetCenter: [0, '30%'] }, progress: { show: true, @@ -78,7 +78,7 @@ option = { startAngle: -140, endAngle: -305, splitNumber: 5, - radius: '35%', + radius: '40%', center: ['21%', '55%'], axisLine: { lineStyle: { @@ -103,7 +103,7 @@ option = { }, axisLabel: { distance: 14, - fontSize: 18, + fontSize: 10, fontWeight: 800, fontFamily: 'Arial', color: '#fff' @@ -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)', @@ -123,7 +123,7 @@ option = { }, title: { color: '#fff', - fontSize: 14, + fontSize: 7, fontWeight: 800, fontFamily: 'Arial', offsetCenter: [0, 0] @@ -183,8 +183,8 @@ option = { } }, axisLabel: { - distance: 10, - fontSize: 35, + distance: 3, + fontSize: 15, fontWeight: 800, fontFamily: 'Arial', color: '#fff' @@ -192,9 +192,9 @@ option = { 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)', @@ -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' } ], @@ -250,11 +250,11 @@ 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', @@ -262,11 +262,11 @@ option = { 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] } } }, @@ -287,7 +287,7 @@ option = { startAngle: 135, endAngle: -150, splitNumber: 8, - radius: '35%', + radius: '40%', center: ['79%', '55%'], axisLine: { lineStyle: { @@ -309,7 +309,7 @@ option = { }, title: {}, detail: { - offsetCenter: ['-15%', 0], + offsetCenter: ['39%', 0], formatter: [ '{a| 00:00}', '{a|行驶时间 0:00}{b| h}', @@ -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' } @@ -386,8 +386,8 @@ option = { } }, axisLabel: { - distance: 12, - fontSize: 18, + distance: 11, + fontSize: 8, fontWeight: 800, fontFamily: 'Arial', color: '#fff', @@ -411,8 +411,8 @@ 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: { @@ -420,11 +420,11 @@ option = { }, 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' @@ -432,7 +432,7 @@ option = { b: { fontWeight: 600, fontFamily: 'Arial', - fontSize: 12, + fontSize: 10, color: '#fff' } } @@ -453,7 +453,7 @@ option = { endAngle: 310, clockwise: false, splitNumber: 2, - radius: '35%', + radius: '33%', center: ['79%', '55%'], axisLine: { lineStyle: { @@ -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', @@ -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' },