From f5534bb424e1b9191c598291fe7d8978a220e10e Mon Sep 17 00:00:00 2001 From: Steven Cobb Date: Tue, 27 May 2025 14:09:08 -0400 Subject: [PATCH 1/7] feat(line): triggerAreaEvent option for more control over mouse event --- src/chart/line/LineSeries.ts | 8 +++++++- src/chart/line/LineView.ts | 4 +++- test/polyline-gon-event.html | 12 ++++++++++++ 3 files changed, 22 insertions(+), 2 deletions(-) diff --git a/src/chart/line/LineSeries.ts b/src/chart/line/LineSeries.ts index 9faf5c5175..7fee00dfa5 100644 --- a/src/chart/line/LineSeries.ts +++ b/src/chart/line/LineSeries.ts @@ -120,6 +120,8 @@ export interface LineSeriesOption extends SeriesOption { @@ -213,7 +215,11 @@ class LineSeriesModel extends SeriesModel { divideShape: 'clone' }, - triggerLineEvent: false + triggerLineEvent: false, + + // When false, this option gives more control in case hovering on the shaded area should not trigger mouse events. + // Defaults to true for backwards compatibility and sense it only works when triggerLineEvent is true. + triggerAreaEvent: true }; getLegendIcon(opt: LegendIconParams): ECSymbol | Group { diff --git a/src/chart/line/LineView.ts b/src/chart/line/LineView.ts index deebe66e22..d4544e7efd 100644 --- a/src/chart/line/LineView.ts +++ b/src/chart/line/LineView.ts @@ -922,7 +922,9 @@ class LineView extends ChartView { if (seriesModel.get('triggerLineEvent')) { this.packEventData(seriesModel, polyline); - polygon && this.packEventData(seriesModel, polygon); + if (seriesModel.get('triggerAreaEvent')) { + polygon && this.packEventData(seriesModel, polygon); + } } } diff --git a/test/polyline-gon-event.html b/test/polyline-gon-event.html index 9b9410919f..baeef8f289 100644 --- a/test/polyline-gon-event.html +++ b/test/polyline-gon-event.html @@ -74,6 +74,18 @@ return d * 2; }) }, + { + name: 'line2', + type: 'line', + stack: 'a', + areaStyle: {}, + data: data.map(function (d) { + return d * 0.5; + }), + triggerLineEvent: true, + // Only trigger event when hovering over line, not area under curve. + triggerAreaEvent: false + }, ] }); From f95af4c54f2b326279521f3f79d6dc605af4f2c8 Mon Sep 17 00:00:00 2001 From: Steven Cobb Date: Fri, 13 Jun 2025 10:43:57 -0400 Subject: [PATCH 2/7] Rename option to triggerLineOnlyEvent --- src/chart/line/LineSeries.ts | 8 ++++---- src/chart/line/LineView.ts | 8 +++++--- test/polyline-gon-event.html | 3 +-- 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/chart/line/LineSeries.ts b/src/chart/line/LineSeries.ts index 7fee00dfa5..4d76bfe5f0 100644 --- a/src/chart/line/LineSeries.ts +++ b/src/chart/line/LineSeries.ts @@ -121,7 +121,7 @@ export interface LineSeriesOption extends SeriesOption { @@ -215,11 +215,11 @@ class LineSeriesModel extends SeriesModel { divideShape: 'clone' }, + // Whether to trigger event when hovering on either line or area. triggerLineEvent: false, - // When false, this option gives more control in case hovering on the shaded area should not trigger mouse events. - // Defaults to true for backwards compatibility and sense it only works when triggerLineEvent is true. - triggerAreaEvent: true + // Whether to trigger event when hovering only on line. + triggerLineOnlyEvent: false }; getLegendIcon(opt: LegendIconParams): ECSymbol | Group { diff --git a/src/chart/line/LineView.ts b/src/chart/line/LineView.ts index d4544e7efd..569cd90bc9 100644 --- a/src/chart/line/LineView.ts +++ b/src/chart/line/LineView.ts @@ -922,9 +922,11 @@ class LineView extends ChartView { if (seriesModel.get('triggerLineEvent')) { this.packEventData(seriesModel, polyline); - if (seriesModel.get('triggerAreaEvent')) { - polygon && this.packEventData(seriesModel, polygon); - } + polygon && this.packEventData(seriesModel, polygon); + } + + if (seriesModel.get('triggerLineOnlyEvent')) { + this.packEventData(seriesModel, polyline); } } diff --git a/test/polyline-gon-event.html b/test/polyline-gon-event.html index baeef8f289..736381d196 100644 --- a/test/polyline-gon-event.html +++ b/test/polyline-gon-event.html @@ -82,9 +82,8 @@ data: data.map(function (d) { return d * 0.5; }), - triggerLineEvent: true, // Only trigger event when hovering over line, not area under curve. - triggerAreaEvent: false + triggerLineOnlyEvent: true }, ] }); From dea397da2017a18115a25b087d0f6ff7a1785153 Mon Sep 17 00:00:00 2001 From: Steven Cobb Date: Thu, 26 Jun 2025 09:47:56 -0400 Subject: [PATCH 3/7] change line series option to triggerEvent, deprecate triggerLineEvent --- src/chart/line/LineSeries.ts | 16 ++++++++++++---- src/chart/line/LineView.ts | 14 +++++++------- test/polyline-gon-event.html | 5 ++++- 3 files changed, 23 insertions(+), 12 deletions(-) diff --git a/src/chart/line/LineSeries.ts b/src/chart/line/LineSeries.ts index 4d76bfe5f0..479cc6e18a 100644 --- a/src/chart/line/LineSeries.ts +++ b/src/chart/line/LineSeries.ts @@ -119,9 +119,16 @@ export interface LineSeriesOption extends SeriesOption { @@ -215,11 +222,12 @@ class LineSeriesModel extends SeriesModel { divideShape: 'clone' }, - // Whether to trigger event when hovering on either line or area. + /** + * @deprecated + */ triggerLineEvent: false, - // Whether to trigger event when hovering only on line. - triggerLineOnlyEvent: false + triggerEvent: false }; getLegendIcon(opt: LegendIconParams): ECSymbol | Group { diff --git a/src/chart/line/LineView.ts b/src/chart/line/LineView.ts index 569cd90bc9..8c06998374 100644 --- a/src/chart/line/LineView.ts +++ b/src/chart/line/LineView.ts @@ -920,14 +920,14 @@ class LineView extends ChartView { this._step = step; this._valueOrigin = valueOrigin; - if (seriesModel.get('triggerLineEvent')) { - this.packEventData(seriesModel, polyline); - polygon && this.packEventData(seriesModel, polygon); - } + const triggerEvent = seriesModel.get('triggerEvent'); + const triggerLineEvent = seriesModel.get('triggerLineEvent'); - if (seriesModel.get('triggerLineOnlyEvent')) { - this.packEventData(seriesModel, polyline); - } + const shouldTriggerLineEvent = triggerLineEvent === true || triggerEvent === true || triggerEvent === 'line'; + const shouldTriggerAreaEvent = triggerLineEvent === true || triggerEvent === true || triggerEvent === 'area'; + + shouldTriggerLineEvent && this.packEventData(seriesModel, polyline); + shouldTriggerAreaEvent && polygon && this.packEventData(seriesModel, polygon); } private packEventData(seriesModel: LineSeriesModel, el: Element) { diff --git a/test/polyline-gon-event.html b/test/polyline-gon-event.html index 736381d196..a40167df79 100644 --- a/test/polyline-gon-event.html +++ b/test/polyline-gon-event.html @@ -78,12 +78,15 @@ name: 'line2', type: 'line', stack: 'a', + lineStyle: { + width: 3 + }, areaStyle: {}, data: data.map(function (d) { return d * 0.5; }), // Only trigger event when hovering over line, not area under curve. - triggerLineOnlyEvent: true + triggerEvent: 'line' }, ] }); From 61afd73df469de680aba36724edd3e4b371630d3 Mon Sep 17 00:00:00 2001 From: plainheart Date: Sat, 15 Nov 2025 00:10:54 +0800 Subject: [PATCH 4/7] feat(line): 1) add `selfType` property into line/area trigger event for determining this event is triggered by area or line 2) allow disabling line/area event 3) update test case --- src/chart/line/LineView.ts | 17 +++-- test/polyline-gon-event.html | 116 ++++++++++++++++++++++++++--------- 2 files changed, 98 insertions(+), 35 deletions(-) diff --git a/src/chart/line/LineView.ts b/src/chart/line/LineView.ts index 8c06998374..4e03309ee7 100644 --- a/src/chart/line/LineView.ts +++ b/src/chart/line/LineView.ts @@ -926,19 +926,24 @@ class LineView extends ChartView { const shouldTriggerLineEvent = triggerLineEvent === true || triggerEvent === true || triggerEvent === 'line'; const shouldTriggerAreaEvent = triggerLineEvent === true || triggerEvent === true || triggerEvent === 'area'; - shouldTriggerLineEvent && this.packEventData(seriesModel, polyline); - shouldTriggerAreaEvent && polygon && this.packEventData(seriesModel, polygon); + this.packEventData(seriesModel, polyline, shouldTriggerLineEvent); + this.packEventData(seriesModel, polygon, shouldTriggerAreaEvent); } - private packEventData(seriesModel: LineSeriesModel, el: Element) { - getECData(el).eventData = { + private packEventData(seriesModel: LineSeriesModel, el: Element, enable: boolean) { + if (!el) { + return; + } + getECData(el).eventData = enable ? { componentType: 'series', componentSubType: 'line', componentIndex: seriesModel.componentIndex, seriesIndex: seriesModel.seriesIndex, seriesName: seriesModel.name, - seriesType: 'line' - }; + seriesType: 'line', + // for determining this event is triggered by area or line + selfType: el === this._polygon ? 'area' : 'line' + } : null; } highlight( diff --git a/test/polyline-gon-event.html b/test/polyline-gon-event.html index a40167df79..da0fde7d05 100644 --- a/test/polyline-gon-event.html +++ b/test/polyline-gon-event.html @@ -21,33 +21,22 @@ - - - + + + + - -
-
+
- \ No newline at end of file + From 27d3dbccbc903d1c99fb3946a093a49f1365b0c6 Mon Sep 17 00:00:00 2001 From: plainheart Date: Sat, 15 Nov 2025 00:30:11 +0800 Subject: [PATCH 5/7] test(line): add VRT test case --- test/polyline-gon-event.html | 28 ++++++++++++++++++++ test/runTest/actions/__meta__.json | 1 + test/runTest/actions/polyline-gon-event.json | 1 + 3 files changed, 30 insertions(+) create mode 100644 test/runTest/actions/polyline-gon-event.json diff --git a/test/polyline-gon-event.html b/test/polyline-gon-event.html index da0fde7d05..667f60923f 100644 --- a/test/polyline-gon-event.html +++ b/test/polyline-gon-event.html @@ -25,6 +25,22 @@ +
@@ -124,6 +140,7 @@ { text: 'Disable All Events', onClick: function () { + logDom.innerHTML = 'Disabled all events
There should be NO more logs below

'; chart.setOption({ series: [ { @@ -153,8 +170,19 @@ ] }); + var logDom = document.createElement('div'); + logDom.className = 'log-container'; + chart.getDom().appendChild(logDom); + chart.on('click', function (params) { console.log(params); + logDom.appendChild(document.createTextNode(JSON.stringify({ + seriesName: params.seriesName, + seriesIndex: params.seriesIndex, + selfType: params.selfType, + }))); + logDom.appendChild(document.createElement('br')); + logDom.scrollTop = logDom.scrollHeight; }); }); diff --git a/test/runTest/actions/__meta__.json b/test/runTest/actions/__meta__.json index 10f3d0937f..89af9cc126 100644 --- a/test/runTest/actions/__meta__.json +++ b/test/runTest/actions/__meta__.json @@ -178,6 +178,7 @@ "polar-rounded": 3, "polarLine": 1, "polarScatter": 1, + "polyline-gon-event": 1, "radar": 3, "radar2": 1, "radar3": 2, diff --git a/test/runTest/actions/polyline-gon-event.json b/test/runTest/actions/polyline-gon-event.json new file mode 100644 index 0000000000..f266767d64 --- /dev/null +++ b/test/runTest/actions/polyline-gon-event.json @@ -0,0 +1 @@ +[{"name":"Action 1","ops":[{"type":"mousemove","time":463,"x":619,"y":176},{"type":"mousemove","time":663,"x":583,"y":196},{"type":"mousemove","time":863,"x":536,"y":221},{"type":"mousemove","time":1063,"x":530,"y":233},{"type":"mousemove","time":1263,"x":538,"y":247},{"type":"mousemove","time":1468,"x":541,"y":249},{"type":"mousemove","time":1685,"x":542,"y":251},{"type":"mousedown","time":2074,"x":542,"y":251},{"type":"mouseup","time":2086,"x":542,"y":251},{"time":2087,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":2213,"x":542,"y":252},{"type":"mousemove","time":2418,"x":541,"y":253},{"type":"mousemove","time":2797,"x":541,"y":254},{"type":"mousedown","time":2838,"x":541,"y":254},{"type":"mouseup","time":2978,"x":541,"y":254},{"time":2979,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":3540,"x":541,"y":254},{"type":"mouseup","time":3692,"x":541,"y":254},{"time":3693,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":3699,"x":540,"y":255},{"type":"mousemove","time":4096,"x":540,"y":256},{"type":"mousedown","time":4294,"x":547,"y":281},{"type":"mousemove","time":4306,"x":547,"y":281},{"type":"mouseup","time":4426,"x":547,"y":281},{"time":4427,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":4763,"x":547,"y":287},{"type":"mousemove","time":4969,"x":545,"y":322},{"type":"mousemove","time":5171,"x":545,"y":321},{"type":"mousemove","time":5372,"x":544,"y":316},{"type":"mousemove","time":5589,"x":544,"y":315},{"type":"mousemove","time":5781,"x":545,"y":315},{"type":"mousemove","time":5988,"x":546,"y":317},{"type":"mousemove","time":6204,"x":546,"y":320},{"type":"mousemove","time":6420,"x":544,"y":318},{"type":"mousedown","time":6640,"x":542,"y":316},{"type":"mousemove","time":6653,"x":542,"y":316},{"type":"mouseup","time":6811,"x":542,"y":316},{"time":6812,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":6996,"x":542,"y":317},{"type":"mousemove","time":7212,"x":547,"y":329},{"type":"mousedown","time":7240,"x":547,"y":329},{"type":"mouseup","time":7358,"x":547,"y":329},{"time":7359,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":7496,"x":548,"y":329},{"type":"mousemove","time":7696,"x":548,"y":345},{"type":"mousemove","time":7902,"x":548,"y":347},{"type":"mousemove","time":8080,"x":549,"y":348},{"type":"mousemove","time":8289,"x":550,"y":348},{"type":"mousedown","time":8373,"x":551,"y":349},{"type":"mousemove","time":8503,"x":551,"y":349},{"type":"mouseup","time":8620,"x":551,"y":349},{"time":8621,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":8912,"x":551,"y":350},{"type":"mousedown","time":9106,"x":551,"y":364},{"type":"mousemove","time":9123,"x":551,"y":364},{"type":"mouseup","time":9238,"x":551,"y":364},{"time":9239,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":9513,"x":551,"y":365},{"type":"mousemove","time":9724,"x":551,"y":392},{"type":"mousemove","time":9937,"x":551,"y":397},{"type":"mousedown","time":10154,"x":551,"y":399},{"type":"mousemove","time":10169,"x":551,"y":399},{"type":"mouseup","time":10289,"x":551,"y":399},{"time":10290,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":10812,"x":551,"y":400},{"type":"mousemove","time":11020,"x":551,"y":403},{"type":"mousedown","time":11148,"x":551,"y":403},{"type":"mouseup","time":11295,"x":551,"y":403},{"time":11296,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":11562,"x":551,"y":405},{"type":"mousemove","time":11771,"x":551,"y":416},{"type":"mousemove","time":12014,"x":550,"y":416},{"type":"mousemove","time":12223,"x":548,"y":413},{"type":"mousedown","time":12405,"x":546,"y":412},{"type":"mousemove","time":12569,"x":546,"y":412},{"type":"mouseup","time":12587,"x":546,"y":412},{"time":12588,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":12881,"x":547,"y":414},{"type":"mousemove","time":13091,"x":548,"y":448},{"type":"mousedown","time":13109,"x":548,"y":449},{"type":"mouseup","time":13253,"x":548,"y":449},{"time":13254,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":13304,"x":548,"y":449},{"type":"mousemove","time":13762,"x":548,"y":448},{"type":"mousemove","time":13962,"x":535,"y":242},{"type":"mousemove","time":14162,"x":434,"y":159},{"type":"mousemove","time":14362,"x":172,"y":167},{"type":"mousemove","time":14568,"x":58,"y":171},{"type":"mousedown","time":14692,"x":57,"y":171},{"type":"mousemove","time":14803,"x":57,"y":171},{"type":"mouseup","time":14852,"x":57,"y":171},{"time":14853,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":15228,"x":58,"y":170},{"type":"mousemove","time":15428,"x":256,"y":197},{"type":"mousemove","time":15629,"x":280,"y":202},{"type":"mousemove","time":15834,"x":307,"y":249},{"type":"mousemove","time":16054,"x":312,"y":277},{"type":"mousedown","time":16138,"x":312,"y":277},{"type":"mouseup","time":16272,"x":312,"y":277},{"time":16273,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":16445,"x":312,"y":279},{"type":"mousemove","time":16653,"x":307,"y":329},{"type":"mousedown","time":16790,"x":306,"y":336},{"type":"mousemove","time":16887,"x":306,"y":336},{"type":"mouseup","time":16895,"x":306,"y":336},{"time":16896,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":17061,"x":306,"y":339},{"type":"mousemove","time":17274,"x":310,"y":359},{"type":"mousedown","time":17339,"x":310,"y":361},{"type":"mouseup","time":17470,"x":310,"y":361},{"time":17471,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":17487,"x":310,"y":361},{"type":"mousemove","time":17578,"x":310,"y":362},{"type":"mousemove","time":17786,"x":307,"y":393},{"type":"mousemove","time":18003,"x":306,"y":407},{"type":"mousedown","time":18094,"x":305,"y":408},{"type":"mouseup","time":18203,"x":305,"y":408},{"time":18204,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":18253,"x":305,"y":408},{"type":"mousemove","time":18345,"x":305,"y":409},{"type":"mousemove","time":18545,"x":307,"y":427},{"type":"mousedown","time":18575,"x":307,"y":428},{"type":"mouseup","time":18690,"x":307,"y":428},{"time":18691,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":18755,"x":307,"y":428},{"type":"mousemove","time":18811,"x":307,"y":427},{"type":"mousemove","time":19011,"x":306,"y":414},{"type":"mousedown","time":19160,"x":306,"y":413},{"type":"mousemove","time":19219,"x":306,"y":413},{"type":"mouseup","time":19320,"x":306,"y":413},{"time":19321,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":19462,"x":305,"y":412},{"type":"mousemove","time":19661,"x":303,"y":395},{"type":"mousedown","time":19804,"x":303,"y":394},{"type":"mousemove","time":19869,"x":303,"y":394},{"type":"mouseup","time":19939,"x":303,"y":394},{"time":19940,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":20095,"x":303,"y":393},{"type":"mousemove","time":20295,"x":303,"y":359},{"type":"mousemove","time":20504,"x":304,"y":348},{"type":"mousedown","time":20586,"x":304,"y":347},{"type":"mouseup","time":20710,"x":304,"y":347},{"time":20711,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":20726,"x":304,"y":347},{"type":"mousemove","time":20844,"x":304,"y":346},{"type":"mousemove","time":21045,"x":304,"y":316},{"type":"mousedown","time":21222,"x":304,"y":315},{"type":"mousemove","time":21254,"x":304,"y":315},{"type":"mouseup","time":21340,"x":304,"y":315},{"time":21341,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":21495,"x":304,"y":314},{"type":"mousemove","time":21695,"x":304,"y":255},{"type":"mousedown","time":21847,"x":304,"y":255},{"type":"mouseup","time":21969,"x":304,"y":255},{"time":21970,"delay":400,"type":"screenshot-auto"}],"scrollY":0,"scrollX":0,"timestamp":1763136984452}] \ No newline at end of file From 68a151a4a8ef3094452a2529ed22906503dccd3b Mon Sep 17 00:00:00 2001 From: plainheart Date: Sat, 15 Nov 2025 00:37:21 +0800 Subject: [PATCH 6/7] fix(line): tweak logic --- src/chart/line/LineView.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/chart/line/LineView.ts b/src/chart/line/LineView.ts index 46f4ceafb0..b7fad8400c 100644 --- a/src/chart/line/LineView.ts +++ b/src/chart/line/LineView.ts @@ -621,7 +621,7 @@ class LineView extends ChartView { _endLabel: graphic.Text; _polyline: ECPolyline; - _polygon: ECPolygon; + _polygon?: ECPolygon; _stackedOnPoints: ArrayLike; _points: ArrayLike; @@ -927,13 +927,10 @@ class LineView extends ChartView { const shouldTriggerAreaEvent = triggerLineEvent === true || triggerEvent === true || triggerEvent === 'area'; this.packEventData(seriesModel, polyline, shouldTriggerLineEvent); - this.packEventData(seriesModel, polygon, shouldTriggerAreaEvent); + polygon && this.packEventData(seriesModel, polygon, shouldTriggerAreaEvent); } private packEventData(seriesModel: LineSeriesModel, el: Element, enable: boolean) { - if (!el) { - return; - } getECData(el).eventData = enable ? { componentType: 'series', componentSubType: 'line', From 5a575c9dee0eac79018db30b8f6b9a0cf3e7dc11 Mon Sep 17 00:00:00 2001 From: plainheart Date: Sat, 15 Nov 2025 00:52:15 +0800 Subject: [PATCH 7/7] fix(line): tweak deprecation tip --- src/chart/line/LineSeries.ts | 6 ++++-- src/chart/line/LineView.ts | 6 +++++- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/chart/line/LineSeries.ts b/src/chart/line/LineSeries.ts index 6a8c864fcb..0cd0c9ef83 100644 --- a/src/chart/line/LineSeries.ts +++ b/src/chart/line/LineSeries.ts @@ -121,13 +121,15 @@ export interface LineSeriesOption extends SeriesOption