From c8ea8c0dcf1f6e298fc97b7ac856457e823294e3 Mon Sep 17 00:00:00 2001 From: hujie Date: Fri, 18 Jul 2025 11:29:15 +0800 Subject: [PATCH 1/3] fix: add symbolPath opacity. close #21074 --- src/chart/radar/RadarView.ts | 115 ++++++++++++++++++++++------------- test/radar.html | 20 ++++++ 2 files changed, 93 insertions(+), 42 deletions(-) diff --git a/src/chart/radar/RadarView.ts b/src/chart/radar/RadarView.ts index e51130d4bb..c28542a40c 100644 --- a/src/chart/radar/RadarView.ts +++ b/src/chart/radar/RadarView.ts @@ -184,7 +184,7 @@ class RadarView extends ChartView { const symbolGroup = itemGroup.childAt(2) as graphic.Group; // Radar uses the visual encoded from itemStyle. const itemStyle = data.getItemVisual(idx, 'style'); - const color = itemStyle.fill; + const color = itemStyle.fill as ColorString; group.add(itemGroup); @@ -215,53 +215,84 @@ class RadarView extends ChartView { polygon.useStyle( zrUtil.defaults( - areaStyleModel.getAreaStyle(), - { - fill: color, - opacity: 0.7, - decal: itemStyle.decal + itemModel.getModel('areaStyle').getAreaStyle(), + { + fill: color, + decal: itemStyle.decal } ) ); - const emphasisModel = itemModel.getModel('emphasis'); - const itemHoverStyle = emphasisModel.getModel('itemStyle').getItemStyle(); - symbolGroup.eachChild(function (symbolPath: RadarSymbol) { + + symbolGroup.eachChild((symbolPath: RadarSymbol) => { if (symbolPath instanceof ZRImage) { - const pathStyle = symbolPath.style; - symbolPath.useStyle(zrUtil.extend({ - // TODO other properties like x, y ? - image: pathStyle.image, - x: pathStyle.x, y: pathStyle.y, - width: pathStyle.width, height: pathStyle.height - }, itemStyle)); + const ps = symbolPath.style + + symbolPath.useStyle( + zrUtil.extend( + { + image: ps.image, + x: ps.x, + y: ps.y, + width: ps.width, + height: ps.height, + }, + itemStyle, + ), + ) + } else { + symbolPath.useStyle(itemStyle) + symbolPath.setColor(color) + symbolPath.style.strokeNoScale = true } - else { - symbolPath.useStyle(itemStyle); - symbolPath.setColor(color); - symbolPath.style.strokeNoScale = true; + + const emphasisModel = itemModel.getModel('emphasis') + + const hoverStyle = emphasisModel.getModel('itemStyle').getItemStyle() + + symbolPath.ensureState('emphasis').style = zrUtil.clone(hoverStyle) + + let txt = data.getStore().get(data.getDimensionIndex(symbolPath.__dimIdx), idx) + + if (txt == null || isNaN(txt as number)) { + txt = '' } - - const pathEmphasisState = symbolPath.ensureState('emphasis'); - pathEmphasisState.style = zrUtil.clone(itemHoverStyle); - let defaultText = data.getStore().get(data.getDimensionIndex(symbolPath.__dimIdx), idx); - (defaultText == null || isNaN(defaultText as number)) && (defaultText = ''); - - setLabelStyle( - symbolPath, getLabelStatesModels(itemModel), - { - labelFetcher: data.hostModel, - labelDataIndex: idx, - labelDimIndex: symbolPath.__dimIdx, - defaultText: defaultText as string, - inheritColor: color as ColorString, - defaultOpacity: itemStyle.opacity - } - ); - }); - - toggleHoverEmphasis( - itemGroup, emphasisModel.get('focus'), emphasisModel.get('blurScope'), emphasisModel.get('disabled') - ); + + setLabelStyle(symbolPath, getLabelStatesModels(itemModel), { + labelFetcher: data.hostModel, + labelDataIndex: idx, + labelDimIndex: symbolPath.__dimIdx, + defaultText: txt as string, + inheritColor: color, + defaultOpacity: itemStyle.opacity, + }) + }) + + function applyStateOpacity(state: 'emphasis' | 'select' | 'blur') { + const ls = itemModel.getModel([state, 'lineStyle']).getLineStyle() + + const as_ = itemModel.getModel([state, 'areaStyle']).getAreaStyle() + + const is_ = itemModel.getModel([state, 'itemStyle']).getItemStyle() + + polyline.ensureState(state).style = ls + polygon.ensureState(state).style = as_ + symbolGroup.eachChild((symbolPath: RadarSymbol) => { + symbolPath.ensureState(state).style = zrUtil.clone(is_) + }) + } + + applyStateOpacity('emphasis') + applyStateOpacity('select') + applyStateOpacity('blur') + + const emphasisModel = itemModel.getModel('emphasis') + + toggleHoverEmphasis( + itemGroup, + emphasisModel.get('focus'), + emphasisModel.get('blurScope'), + emphasisModel.get('disabled'), + ) }); this._data = data; diff --git a/test/radar.html b/test/radar.html index 64e4e31bf7..540afaee55 100644 --- a/test/radar.html +++ b/test/radar.html @@ -95,6 +95,26 @@ name: '第一个元素是 null' } ], + emphasis: { + focus: 'self', + lineStyle: { + width: 4, + }, + itemStyle: { + borderColor: null, + borderWidth: 2, + opacity: 0.4, + }, + }, + blur: { + lineStyle: { + opacity: 0.3, + }, + itemStyle: { + opacity: 0.2, + shadowBlur: 5, + }, + }, symbol: 'triangle', symbolSize: 20, symbolRotate: function(value, params) { From 855843d5f73cd7d394893e9b1c93bc11416bee02 Mon Sep 17 00:00:00 2001 From: hujie Date: Mon, 21 Jul 2025 14:33:54 +0800 Subject: [PATCH 2/3] fix: Formatting and naming --- src/chart/radar/RadarView.ts | 61 +++++++++++++++++------------------- 1 file changed, 28 insertions(+), 33 deletions(-) diff --git a/src/chart/radar/RadarView.ts b/src/chart/radar/RadarView.ts index c28542a40c..44516b1010 100644 --- a/src/chart/radar/RadarView.ts +++ b/src/chart/radar/RadarView.ts @@ -216,18 +216,16 @@ class RadarView extends ChartView { polygon.useStyle( zrUtil.defaults( itemModel.getModel('areaStyle').getAreaStyle(), - { - fill: color, - decal: itemStyle.decal + { + fill: color, + decal: itemStyle.decal } ) ); - - symbolGroup.eachChild((symbolPath: RadarSymbol) => { + symbolGroup.eachChild(function(symbolPath: RadarSymbol) { if (symbolPath instanceof ZRImage) { - const ps = symbolPath.style - - symbolPath.useStyle( + const ps = symbolPath.style + symbolPath.useStyle( zrUtil.extend( { image: ps.image, @@ -244,30 +242,27 @@ class RadarView extends ChartView { symbolPath.setColor(color) symbolPath.style.strokeNoScale = true } - const emphasisModel = itemModel.getModel('emphasis') - const hoverStyle = emphasisModel.getModel('itemStyle').getItemStyle() - symbolPath.ensureState('emphasis').style = zrUtil.clone(hoverStyle) - let txt = data.getStore().get(data.getDimensionIndex(symbolPath.__dimIdx), idx) - if (txt == null || isNaN(txt as number)) { txt = '' } - - setLabelStyle(symbolPath, getLabelStatesModels(itemModel), { - labelFetcher: data.hostModel, - labelDataIndex: idx, - labelDimIndex: symbolPath.__dimIdx, - defaultText: txt as string, - inheritColor: color, - defaultOpacity: itemStyle.opacity, - }) + setLabelStyle( + symbolPath, getLabelStatesModels(itemModel), + { + labelFetcher: data.hostModel, + labelDataIndex: idx, + labelDimIndex: symbolPath.__dimIdx, + defaultText: txt as string, + inheritColor: color, + defaultOpacity: itemStyle.opacity, + } + ) }) - - function applyStateOpacity(state: 'emphasis' | 'select' | 'blur') { + + function bindStateStyles(state: 'emphasis' | 'select' | 'blur') { const ls = itemModel.getModel([state, 'lineStyle']).getLineStyle() const as_ = itemModel.getModel([state, 'areaStyle']).getAreaStyle() @@ -276,18 +271,18 @@ class RadarView extends ChartView { polyline.ensureState(state).style = ls polygon.ensureState(state).style = as_ - symbolGroup.eachChild((symbolPath: RadarSymbol) => { + symbolGroup.eachChild(function(symbolPath: RadarSymbol) { symbolPath.ensureState(state).style = zrUtil.clone(is_) }) } - - applyStateOpacity('emphasis') - applyStateOpacity('select') - applyStateOpacity('blur') - - const emphasisModel = itemModel.getModel('emphasis') - - toggleHoverEmphasis( + + bindStateStyles('emphasis') + bindStateStyles('select') + bindStateStyles('blur') + + const emphasisModel = itemModel.getModel('emphasis') + + toggleHoverEmphasis( itemGroup, emphasisModel.get('focus'), emphasisModel.get('blurScope'), From edc939e5edc1ebc8c608688d0f25f25fbc0120fe Mon Sep 17 00:00:00 2001 From: hujie Date: Mon, 21 Jul 2025 18:16:29 +0800 Subject: [PATCH 3/3] fix: Code simplicity --- src/chart/radar/RadarView.ts | 92 +++++++++++++++--------------------- 1 file changed, 37 insertions(+), 55 deletions(-) diff --git a/src/chart/radar/RadarView.ts b/src/chart/radar/RadarView.ts index 44516b1010..0cd0991f7a 100644 --- a/src/chart/radar/RadarView.ts +++ b/src/chart/radar/RadarView.ts @@ -184,7 +184,7 @@ class RadarView extends ChartView { const symbolGroup = itemGroup.childAt(2) as graphic.Group; // Radar uses the visual encoded from itemStyle. const itemStyle = data.getItemVisual(idx, 'style'); - const color = itemStyle.fill as ColorString; + const color = itemStyle.fill; group.add(itemGroup); @@ -211,6 +211,14 @@ class RadarView extends ChartView { const stateIgnore = stateModel.isEmpty() && stateModel.parentModel.isEmpty(); // Won't be ignore if normal state is not ignore. polygon.ensureState(stateName).ignore = stateIgnore && polygonIgnore; + const lineStyle = itemModel.getModel([stateName, 'lineStyle']).getLineStyle(); + polyline.ensureState(stateName).style = lineStyle; + const areaStyle = stateModel.getAreaStyle(); + polygon.ensureState(stateName).style = areaStyle; + const itemStateStyle = itemModel.getModel([stateName, 'itemStyle']).getItemStyle(); + symbolGroup.eachChild(function (symbolPath: RadarSymbol) { + symbolPath.ensureState(stateName).style = zrUtil.clone(itemStateStyle); + }); }); polygon.useStyle( @@ -218,76 +226,50 @@ class RadarView extends ChartView { itemModel.getModel('areaStyle').getAreaStyle(), { fill: color, + opacity: 0.7, decal: itemStyle.decal } ) ); - symbolGroup.eachChild(function(symbolPath: RadarSymbol) { + const emphasisModel = itemModel.getModel('emphasis'); + const itemHoverStyle = emphasisModel.getModel('itemStyle').getItemStyle(); + symbolGroup.eachChild(function (symbolPath: RadarSymbol) { if (symbolPath instanceof ZRImage) { - const ps = symbolPath.style - symbolPath.useStyle( - zrUtil.extend( - { - image: ps.image, - x: ps.x, - y: ps.y, - width: ps.width, - height: ps.height, - }, - itemStyle, - ), - ) - } else { - symbolPath.useStyle(itemStyle) - symbolPath.setColor(color) - symbolPath.style.strokeNoScale = true + const pathStyle = symbolPath.style; + symbolPath.useStyle(zrUtil.extend({ + // TODO other properties like x, y ? + image: pathStyle.image, + x: pathStyle.x, y: pathStyle.y, + width: pathStyle.width, height: pathStyle.height + }, itemStyle)); } - const emphasisModel = itemModel.getModel('emphasis') - const hoverStyle = emphasisModel.getModel('itemStyle').getItemStyle() - symbolPath.ensureState('emphasis').style = zrUtil.clone(hoverStyle) - let txt = data.getStore().get(data.getDimensionIndex(symbolPath.__dimIdx), idx) - if (txt == null || isNaN(txt as number)) { - txt = '' + else { + symbolPath.useStyle(itemStyle); + symbolPath.setColor(color); + symbolPath.style.strokeNoScale = true; } + + const pathEmphasisState = symbolPath.ensureState('emphasis'); + pathEmphasisState.style = zrUtil.clone(itemHoverStyle); + let defaultText = data.getStore().get(data.getDimensionIndex(symbolPath.__dimIdx), idx); + (defaultText == null || isNaN(defaultText as number)) && (defaultText = ''); + setLabelStyle( symbolPath, getLabelStatesModels(itemModel), { labelFetcher: data.hostModel, labelDataIndex: idx, labelDimIndex: symbolPath.__dimIdx, - defaultText: txt as string, - inheritColor: color, - defaultOpacity: itemStyle.opacity, + defaultText: defaultText as string, + inheritColor: color as ColorString, + defaultOpacity: itemStyle.opacity } - ) - }) - - function bindStateStyles(state: 'emphasis' | 'select' | 'blur') { - const ls = itemModel.getModel([state, 'lineStyle']).getLineStyle() - - const as_ = itemModel.getModel([state, 'areaStyle']).getAreaStyle() - - const is_ = itemModel.getModel([state, 'itemStyle']).getItemStyle() - - polyline.ensureState(state).style = ls - polygon.ensureState(state).style = as_ - symbolGroup.eachChild(function(symbolPath: RadarSymbol) { - symbolPath.ensureState(state).style = zrUtil.clone(is_) - }) - } - - bindStateStyles('emphasis') - bindStateStyles('select') - bindStateStyles('blur') + ); + }); - const emphasisModel = itemModel.getModel('emphasis') - toggleHoverEmphasis( - itemGroup, - emphasisModel.get('focus'), - emphasisModel.get('blurScope'), - emphasisModel.get('disabled'), - ) + itemGroup, emphasisModel.get('focus'), emphasisModel.get('blurScope'), emphasisModel.get('disabled') + ); }); this._data = data;