@@ -137,7 +137,7 @@ export function getEchartsConfig(
137137 theme ?: any ,
138138) : EChartsOptionWithMap {
139139
140- const styleWrapper = ( styleContainer : any , themeContainer : any , defaultFontSize = 18 , defaultFontColor = '#000000' ) => {
140+ const styleWrapper = ( styleContainer : any , themeContainer : any , defaultFontSize = 18 , defaultFontColor = '#000000' , detailBorderWidth = 0 , defaultBackgroundColor = "" ) => {
141141
142142 return {
143143 "fontFamily" : styleContainer ?. chartFontFamily || themeContainer ?. fontFamily || 'Arial, sans-serif' ,
@@ -148,7 +148,14 @@ export function getEchartsConfig(
148148 "textShadowColor" : styleContainer ?. chartShadowColor || themeContainer ?. shadowColor ,
149149 "textShadowBlur" : styleContainer ?. chartBoxShadow ?. split ( 'px' ) [ 0 ] || themeContainer ?. boxShadow ?. split ( 'px' ) [ 0 ] ,
150150 "textShadowOffsetX" : styleContainer ?. chartBoxShadow ?. split ( 'px' ) [ 1 ] || themeContainer ?. boxShadow ?. split ( 'px' ) [ 1 ] ,
151- "textShadowOffsetY" : styleContainer ?. chartBoxShadow ?. split ( 'px' ) [ 2 ] || themeContainer ?. boxShadow ?. split ( 'px' ) [ 2 ]
151+ "textShadowOffsetY" : styleContainer ?. chartBoxShadow ?. split ( 'px' ) [ 2 ] || themeContainer ?. boxShadow ?. split ( 'px' ) [ 2 ] ,
152+ "borderColor" : styleContainer ?. chartBorderColor || themeContainer ?. borderColor || 'inherit' ,
153+ "borderWidth" : styleContainer ?. chartBorderWidth || themeContainer ?. borderWidth || detailBorderWidth ,
154+ "borderType" : styleContainer ?. chartBorderStyle || themeContainer ?. borderType ,
155+ "borderRadius" : styleContainer ?. chartBorderRadius || themeContainer ?. borderRadius ,
156+ "backgroundColor" : styleContainer ?. chartBackgroundColor || themeContainer ?. backgroundColor || defaultBackgroundColor ,
157+ "width" : styleContainer ?. detailSize ?. split ( 'px' ) [ 0 ] || themeContainer ?. detailSize . split ( 'px' ) [ 0 ] || 24 ,
158+ "height" : styleContainer ?. detailSize ?. split ( 'px' ) [ 1 ] || themeContainer ?. detailSize . split ( 'px' ) [ 1 ] || 12 ,
152159 }
153160
154161 }
@@ -304,6 +311,7 @@ export function getEchartsConfig(
304311 ]
305312 }
306313
314+ console . log ( props ?. legendStyle )
307315 let gradeGaugeOpt = {
308316 ...basicStyle ,
309317 series : [
@@ -367,34 +375,36 @@ export function getEchartsConfig(
367375 ]
368376 }
369377
378+ console . log ( props ?. barometerGaugeOption ?. data )
379+
370380 let multiGaugeOpt = {
371381 ...basicStyle ,
372382 series : [
373383 {
374384 ...basicSeries ,
375385 type : 'gauge' ,
376- pointer : {
377- ...basicSeries . pointer ,
378- icon : props . pointerIcon || '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' ,
379- offsetCenter : [ 0 , '8%' ]
386+ anchor : {
387+ show : true ,
388+ showAbove : true ,
389+ size : 10 ,
390+ itemStyle : {
391+ color : props ?. multiTitleGaugeOption ?. data [ 0 ] [ "value" ] . slice ( - 1 ) [ 0 ]
392+ }
380393 } ,
381394 progress : {
382- show : true ,
383395 overlap : true ,
384- roundCap : true
385- } ,
386- axisLine : {
387- roundCap : true
396+ ...progress
388397 } ,
389398
390- data : props . multiTitleGaugeOption . data [ 0 ] . value . map ( item => ( {
399+ data : props ? .multiTitleGaugeOption ? .data && props ?. multiTitleGaugeOption ?. data [ 0 ] ? .value ? .map ( item => ( {
391400 value : item . value ,
392401 name : item . title ,
393402 title : {
394403 offsetCenter : item . titlePosition
395404 } ,
396405 detail : {
397- offsetCenter : item . valuePosition
406+ offsetCenter : item . valuePosition ,
407+
398408 } ,
399409 itemStyle : {
400410 color : item . color
@@ -410,10 +420,7 @@ export function getEchartsConfig(
410420 ...styleWrapper ( props ?. labelStyle , theme ?. labelStyle , 16 ) ,
411421 } ,
412422 detail : {
413- width : 30 ,
414- height : 12 ,
415- ...styleWrapper ( props ?. legendStyle , theme ?. legendStyle , 16 , '#ffffff' ) ,
416- backgroundColor : 'inherit' ,
423+ ...styleWrapper ( props ?. legendStyle , theme ?. legendStyle , 16 , '#ffffff' , 0 , 'inherit' ) ,
417424 formatter : props ?. multiTitleGaugeOption ?. data ?. map ( data => data . formatter ) [ 0 ] ,
418425 }
419426 }
@@ -458,7 +465,7 @@ export function getEchartsConfig(
458465 }
459466 } ,
460467 axisLabel : {
461- distance : Number ( props ?. temperatureProgressBarWidth ) - Number ( props . temperatureAxisLabelDistance ) + Number ( props . axisTickLength ) * 2 ,
468+ distance : Number ( props ?. temperatureProgressBarWidth ) - Number ( props . temperatureAxisLabelDistance ) ,
462469 ...styleWrapper ( props ?. axisLabelStyle , theme ?. axisLabelStyle , 20 , "#999" ) ,
463470 } ,
464471 detail : {
@@ -528,20 +535,17 @@ export function getEchartsConfig(
528535 show : false
529536 } ,
530537 progress : {
538+ "roundCap" : props . roundCap ,
531539 show : true ,
540+ width : props ?. progressBarWidth ,
532541 overlap : false ,
533- roundCap : true ,
534542 clip : false ,
535- itemStyle : {
536- borderWidth : 1 ,
537- borderColor : 'inherit'
538- }
539- } ,
540- axisLine : {
541- lineStyle : {
542- width : 20 // Reduced from 40
543- }
544543 } ,
544+ // axisLine: {
545+ // lineStyle: {
546+ // width: 20 // Reduced from 40
547+ // }
548+ // },
545549 splitLine : {
546550 show : false
547551 } ,
@@ -551,7 +555,7 @@ export function getEchartsConfig(
551555 axisLabel : {
552556 show : false
553557 } ,
554- data : props . ringGaugeOption . data [ 0 ] . value . map ( item => ( {
558+ data : props ? .ringGaugeOption ? .data && props ?. ringGaugeOption ?. data [ 0 ] ? .value . map ( item => ( {
555559 value : item . value ,
556560 name : item . title ,
557561 title : {
@@ -573,12 +577,7 @@ export function getEchartsConfig(
573577 ...styleWrapper ( props ?. labelStyle , theme ?. labelStyle , 16 ) ,
574578 } ,
575579 detail : {
576- width : 40 ,
577- height : 12 ,
578- borderRadius : 20 ,
579- borderWidth : 1 ,
580- ...styleWrapper ( props ?. legendStyle , theme ?. legendStyle , 16 , 'inherit' ) ,
581- borderColor : 'inherit' ,
580+ ...styleWrapper ( props ?. legendStyle , theme ?. legendStyle , 16 , 'inherit' , 1 , '' ) ,
582581 formatter : props ?. multiTitleGaugeOption ?. data ?. map ( data => data . formatter ) [ 0 ] ,
583582 }
584583 }
@@ -587,7 +586,7 @@ export function getEchartsConfig(
587586
588587 let barometerGaugeOpt = {
589588 ...basic ,
590- series : [
589+ series : props ?. barometerGaugeOption ?. data && [
591590 {
592591 ...basicSeries ,
593592 type : 'gauge' ,
@@ -603,32 +602,43 @@ export function getEchartsConfig(
603602 }
604603 } ,
605604 splitLine : {
606- distance : - 12 , // Reduced from -18
607- length : Number ( props ?. barometerGaugeOption ?. data [ 0 ] ?. outline ?. axisTickLength ) * 2 ,
605+ distance : - Number ( props ?. barometerGaugeOption ?. data [ 0 ] ?. outline ?. progressBarWidth ) ,
606+ length : - Number ( props ?. barometerGaugeOption ?. data [ 0 ] ?. outline ?. axisTickLength ) * 2 ,
608607 lineStyle : {
609608 color : props ?. barometerGaugeOption ?. data [ 0 ] ?. outline ?. color ,
610609 width : Number ( props ?. barometerGaugeOption ?. data [ 0 ] ?. outline ?. axisTickWidth ) * 1.5
611610 }
612611 } ,
613612 axisTick : {
614- distance : - 8 , // Reduced from -12
615- length : props ?. barometerGaugeOption ?. data [ 0 ] ?. outline ?. axisTickLength ,
613+ distance : - Number ( props ?. barometerGaugeOption ?. data [ 0 ] ?. outline ?. progressBarWidth ) ,
614+ length : - Number ( props ?. barometerGaugeOption ?. data [ 0 ] ?. outline ?. axisTickLength ) ,
616615 lineStyle : {
617616 color : props ?. barometerGaugeOption ?. data [ 0 ] ?. outline ?. color ,
618617 width : props ?. barometerGaugeOption ?. data [ 0 ] ?. outline ?. axisTickWidth
619618 }
620619 } ,
621620 axisLabel : {
622- distance : - 30 , // Reduced from -50 to bring labels closer
623- ...styleWrapper ( props ?. axisLabelStyle , theme ?. axisLabelStyle , 14 , '#f00 ' )
621+ distance : Number ( props ?. barometerGaugeOption ?. data [ 0 ] ?. outline ?. progressBarWidth ) - 20 ,
622+ ...styleWrapper ( props ?. axisLabelStyle , theme ?. axisLabelStyle , 13 , '#c80707 ' )
624623 } ,
625624 pointer : {
626625 ...basicSeries . pointer ,
627626 icon : props ?. barometerPointerIcon ,
627+ length : `${ props ?. barometerPointerLength } ,
628+ width : props ?. barometerPointerWidth ,
629+ offsetCenter : [ 0 , `${ - Number ( props . barometerPointer_Y ) } ] ,
628630 itemStyle : {
629631 color : props ?. barometerGaugeOption ?. data [ 0 ] ?. inline ?. color
630632 }
631633 } ,
634+ anchor : {
635+ show : true ,
636+ size : 10 ,
637+ itemStyle : {
638+ borderColor : '#000' ,
639+ borderWidth : 1
640+ }
641+ } ,
632642 detail : {
633643 valueAnimation : true ,
634644 precision : 2 , // Increase precision or keep as is
@@ -637,7 +647,7 @@ export function getEchartsConfig(
637647 } ,
638648 title : {
639649 offsetCenter : [ 0 , '-40%' ] , // Adjust title placement for smaller chart
640- ...styleWrapper ( props ?. labelStyle , theme ?. labelStyle , 14 )
650+ ...styleWrapper ( props ?. labelStyle , theme ?. labelStyle , 13 )
641651 } ,
642652 data : [
643653 {
@@ -654,6 +664,13 @@ export function getEchartsConfig(
654664 center : [ `${ props ?. position_x } , `${ props ?. position_y } ] ,
655665 splitNumber : props ?. barometerGaugeOption ?. data [ 0 ] ?. inline ?. splitNumber ,
656666 radius : props ?. barometerGaugeOption ?. data [ 0 ] ?. inline ?. radius ,
667+ anchor : {
668+ show : true ,
669+ size : 6 ,
670+ itemStyle : {
671+ color : '#000'
672+ }
673+ } ,
657674 axisLine : {
658675 lineStyle : {
659676 color : [ [ 1 , props ?. barometerGaugeOption ?. data [ 0 ] ?. inline ?. color ] ] ,
@@ -677,8 +694,8 @@ export function getEchartsConfig(
677694 }
678695 } ,
679696 axisLabel : {
680- distance : 6 ,
681- ...styleWrapper ( props ?. axisLabelStyleOutline , theme ?. axisLabelStyleOutline , 14 , '#000' ) ,
697+ distance : Number ( props ?. barometerGaugeOption ?. data [ 0 ] ?. inline ?. progressBarWidth ) + 6 ,
698+ ...styleWrapper ( props ?. axisLabelStyleOutline , theme ?. axisLabelStyleOutline , 13 , '#000' ) ,
682699 } ,
683700 pointer : {
684701 show : false
0 commit comments