From d69383c6a8c38c83b325e3124cba6de9c7197f88 Mon Sep 17 00:00:00 2001 From: Marco Sieben Date: Mon, 25 Aug 2025 11:11:51 +0200 Subject: [PATCH 1/2] fix(gauge): apply correct color to progress when set to 'auto' --- src/chart/gauge/GaugeView.ts | 5 ++++ test/gauge-progress.html | 52 ++++++++++++++++++++++++++++++++++++ 2 files changed, 57 insertions(+) diff --git a/src/chart/gauge/GaugeView.ts b/src/chart/gauge/GaugeView.ts index edf0edaf26..238410ea14 100644 --- a/src/chart/gauge/GaugeView.ts +++ b/src/chart/gauge/GaugeView.ts @@ -564,6 +564,11 @@ class GaugeView extends ChartView { const progress = progressList[idx]; progress.useStyle(data.getItemVisual(idx, 'style')); progress.setStyle(itemModel.getModel(['progress', 'itemStyle']).getItemStyle()); + if (progress.style.fill === 'auto') { + progress.setStyle('fill', getColor( + linearMap(data.get(valueDim, idx) as number, valueExtent, [0, 1], true) + )); + } (progress as ECElement).z2EmphasisLift = 0; setStatesStylesFromModel(progress, itemModel); toggleHoverEmphasis(progress, focus, blurScope, emphasisDisabled); diff --git a/test/gauge-progress.html b/test/gauge-progress.html index 82239497cf..97de79129e 100644 --- a/test/gauge-progress.html +++ b/test/gauge-progress.html @@ -346,6 +346,58 @@ chart5.setOption(option5, true); }}] }); + var option6 = { + tooltip: { + formatter: '{a}
{b} : {c}%' + }, + toolbox: { + feature: { + restore: {}, + saveAsImage: {} + } + }, + series: [ + { + name: '业务指标', + type: 'gauge', + axisLine: { + lineStyle: { + width: 5, + color: [ + [0.3, '#67e0e3'], + [0.7, '#37a2da'], + [1, '#fd666d'] + ] + } + }, + progress:{ + show:true, + overlap:true, + width:-10, + itemStyle: { + color: 'auto' + } + }, + pointer: { + show: false, + }, + data: [ + {value: 50, name: '本月跑步'} + ], + } + ] + }; + var chart6 = testHelper.create(echarts, 'main6', { + title: [ + 'progress.itemStyle.color: \'auto\'' + ], + renderer: 'svg', + option: option6 + }); + setInterval(function () { + option6.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0; + chart6.setOption(option6, true); + }, 2000); }); From 0b06d7f82ea45d0c148547789b8a26af45719c93 Mon Sep 17 00:00:00 2001 From: Marco Sieben Date: Tue, 2 Sep 2025 11:06:56 +0200 Subject: [PATCH 2/2] feat(gauge): extract duplication to variable --- src/chart/gauge/GaugeView.ts | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/chart/gauge/GaugeView.ts b/src/chart/gauge/GaugeView.ts index 238410ea14..1df6458a14 100644 --- a/src/chart/gauge/GaugeView.ts +++ b/src/chart/gauge/GaugeView.ts @@ -529,6 +529,7 @@ class GaugeView extends ChartView { const focus = emphasisModel.get('focus'); const blurScope = emphasisModel.get('blurScope'); const emphasisDisabled = emphasisModel.get('disabled'); + const autoColor = getColor(linearMap(data.get(valueDim, idx) as number, valueExtent, [0, 1], true)); if (showPointer) { const pointer = data.getItemGraphicEl(idx) as ECSymbol; const symbolStyle = data.getItemVisual(idx, 'style'); @@ -550,9 +551,7 @@ class GaugeView extends ChartView { if (pointer.style.fill === 'auto') { - pointer.setStyle('fill', getColor( - linearMap(data.get(valueDim, idx) as number, valueExtent, [0, 1], true) - )); + pointer.setStyle('fill', autoColor); } (pointer as ECElement).z2EmphasisLift = 0; @@ -565,9 +564,7 @@ class GaugeView extends ChartView { progress.useStyle(data.getItemVisual(idx, 'style')); progress.setStyle(itemModel.getModel(['progress', 'itemStyle']).getItemStyle()); if (progress.style.fill === 'auto') { - progress.setStyle('fill', getColor( - linearMap(data.get(valueDim, idx) as number, valueExtent, [0, 1], true) - )); + progress.setStyle('fill', autoColor); } (progress as ECElement).z2EmphasisLift = 0; setStatesStylesFromModel(progress, itemModel);