feat(legend): legend supports `triggerEvent` option #18164

sz-p · 2023-01-11T08:38:30Z

Brief Information

This pull request is in the type of:

bug fixing
new feature
others

What does this PR do?

add legend event legendmouseover legendmouseout

Fixed issues

#18144

Details

Before: What was the problem?

Stop data carousel when mouse hover on legend must customizing legend elements with HTML

see demo:

https://codepen.io/plainheart/pen/xxJRdam

After: How does it behave after the fixing?

Stop data carousel with legend event legendmouseover legendmouseout

see demo:

https://stackblitz.com/edit/js-q9vzb5?file=index.js

Document Info

One of the following should be checked.

This PR doesn't relate to document changes
The document should be updated later
The document changes have been made in apache/echarts-doc#xxx

Misc

ZRender Changes

This PR depends on ZRender changes (ecomfe/zrender#xxx).

Related test cases or examples to use the new APIs

N.A.

Others

Merging options

Please squash the commits into a single one when merging.

Other information

echarts-bot · 2023-01-11T08:38:35Z

Thanks for your contribution!
The community will review it ASAP. In the meanwhile, please checkout the coding standard and Wiki about How to make a pull request.

Document changes are required in this PR. Please also make a PR to apache/echarts-doc for document changes and update the issue id in the PR description. When the doc PR is merged, the maintainers will remove the PR: awaiting doc label.

oom- · 2024-10-09T20:02:22Z

Hello, could someone go forward on this ?

Edit: I succeed to "bypass" my issue by subscribing to "highlight" and "downplay" events (kind of hard to guess).

sz-p · 2024-10-10T01:48:41Z

Waiting for review

Ovilia

Sorry for the late review. I think this PR is generally good. Please merge from the master to resolve the conflict and I'll have a quick review again. Please also add a test case.

Ovilia · 2024-11-06T07:53:08Z

src/component/legend/legendAction.ts

@@ -37,6 +37,9 @@ function legendSelectActionHandler(methodName, payload, ecModel) {
        else if (methodName === 'allSelect' || methodName === 'inverseSelect') {
            legendModel[methodName]();
        }
+        else if (methodName === 'legendMouseover' || methodName === 'legendMouseout') {
+            isSelected = legendModel.isSelected(payload.name);


This is perhaps no longer needed. You make merge the current master code and have a double check.

You should update the LegendSelectMethodNames after merging from master.

100pah · 2025-03-12T12:11:26Z

src/component/legend/LegendView.ts

@@ -223,8 +223,16 @@ class LegendView extends ComponentView {
                );

                itemGroup.on('click', curry(dispatchSelectAction, name, null, api, excludeSeriesId))


From users' perspective, if we use this API style, a complete set of events is supposed to be exposed to users ('click', 'mouseover', 'mouseout', 'mousedown', 'mouseup', 'mousemove', ...).
If we only expose mouseover and mouseout for legend, it may not be a good API design.
Whenever users require additional mouse events, we would need to introduce event names like legendmousexxx1, legendmousexxx2, legendmousexxx2. Furthermore, considering other components, the number of events we need to expose would grow significantly due to the orthogonal composition.

At present we already have setting like title.triggerEvent: true, xAxis.triggerEvent: true, radar.triggerEvent, etc. I think this pattern (xxxcomponent.triggerEvent: boolean) is better to resolve this requirement and could be a standard way.

option = { title: { text: "xxxxx", tiggerEvent: true, } } const chart = echarts.create(...); chart.on('mouseover', params => { if (params.componentType === 'title') { // do something. } });

So I think we should implement legend.triggerEvent like component title did.
(Incidentally, the implementation is simpler than the current way)

option = { legend: { tiggerEvent: true, // ... } } const chart = echarts.create(...); chart.on('mouseover', params => { if (params.componentType === 'legend') { // do something. } });

Some relevant details:

by default value should be false, for backward compatibility.

The event param should follow the convention.

componentType: 'legend'

componentIndex: number

dataIndex: number can be provided in the event param to representing different legend items. (follow the style of axis label event)

value: string can be provided in the event param to indicate the legend item value. (follow the style of axis label event)

Thank you for your comments and great suggestions.

I didn't consider the triggerEvent option, and event name need orthogonal composition.

It was my mistake.

I have modified the code, add legend.triggerEvent. please help me review it again.

github-actions · 2025-03-17T11:19:17Z

The changes brought by this PR can be previewed at: https://echarts.apache.org/examples/editor?version=PR-18164@87561ee

echarts-bot · 2025-03-27T10:59:15Z

Congratulations! Your PR has been merged. Thanks for your contribution! 👍

plainheart · 2025-04-01T02:56:10Z

src/component/legend/LegendView.ts

@@ -234,6 +236,11 @@ class LegendView extends ComponentView {
                        ecData.ssrType = 'legend';
                    });
                }
+                itemGroup.eachChild(child => {
+                    if (triggerEvent) {


I suggest adding the if check before the each function to avoid unnecessary invocation if triggerEvent is not enabled.

I will do this later

@plainheart

It's in #20907

Please help me to review.

Thanks.

echarts-bot bot added PR: awaiting doc Document changes is required for this PR. PR: awaiting review labels Jan 11, 2023

pull-request-size bot added the size/M label Jan 11, 2023

sz-p mentioned this pull request Mar 8, 2023

[Feature] 是否支持不同series的不同dataIndex高亮? #18343

Closed

Ovilia requested changes Nov 6, 2024

View reviewed changes

echarts-bot bot added PR: revision needed and removed PR: awaiting review labels Nov 6, 2024

sz-p force-pushed the add-legend-mouse-event branch from 4a0eebc to eb975b0 Compare November 7, 2024 13:33

echarts-bot bot added PR: awaiting review and removed PR: revision needed labels Nov 7, 2024

100pah requested changes Mar 12, 2025

View reviewed changes

echarts-bot bot added PR: revision needed and removed PR: awaiting review labels Mar 12, 2025

sz-p force-pushed the add-legend-mouse-event branch from eb975b0 to 694eb8f Compare March 17, 2025 11:12

echarts-bot bot added PR: awaiting review and removed PR: revision needed labels Mar 17, 2025

sz-p changed the title ~~feat(legend): add legendmouseover legendmouseout event (#18144)~~ feat(legend): legend support triggerEvent (#18144) Mar 17, 2025

feat(legend): legend support triggerEvent (apache#18144)

87561ee

sz-p force-pushed the add-legend-mouse-event branch from 694eb8f to 87561ee Compare March 17, 2025 11:28

100pah approved these changes Mar 27, 2025

View reviewed changes

echarts-bot bot removed the PR: awaiting review label Mar 27, 2025

100pah merged commit 2fab291 into apache:master Mar 27, 2025
2 checks passed

plainheart reviewed Apr 1, 2025

View reviewed changes

plainheart changed the title ~~feat(legend): legend support triggerEvent (#18144)~~ feat(legend): legend supports triggerEvent option Apr 1, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(legend): legend supports `triggerEvent` option #18164

feat(legend): legend supports `triggerEvent` option #18164

sz-p commented Jan 11, 2023

echarts-bot bot commented Jan 11, 2023

oom- commented Oct 9, 2024 •

edited

Loading

sz-p commented Oct 10, 2024 •

edited

Loading

Ovilia left a comment

Ovilia Nov 6, 2024

Ovilia Nov 6, 2024

100pah Mar 12, 2025

sz-p Mar 17, 2025

github-actions bot commented Mar 17, 2025 •

edited

Loading

echarts-bot bot commented Mar 27, 2025

plainheart Apr 1, 2025

sz-p Apr 3, 2025

sz-p Apr 9, 2025

		@@ -223,8 +223,16 @@ class LegendView extends ComponentView {
		);

		itemGroup.on('click', curry(dispatchSelectAction, name, null, api, excludeSeriesId))

feat(legend): legend supports triggerEvent option #18164

feat(legend): legend supports triggerEvent option #18164

Conversation

sz-p commented Jan 11, 2023

Brief Information

What does this PR do?

Fixed issues

Details

Before: What was the problem?

After: How does it behave after the fixing?

Document Info

Misc

ZRender Changes

Related test cases or examples to use the new APIs

Others

Merging options

Other information

echarts-bot bot commented Jan 11, 2023

oom- commented Oct 9, 2024 • edited Loading

sz-p commented Oct 10, 2024 • edited Loading

Ovilia left a comment

Choose a reason for hiding this comment

Ovilia Nov 6, 2024

Choose a reason for hiding this comment

Ovilia Nov 6, 2024

Choose a reason for hiding this comment

100pah Mar 12, 2025

Choose a reason for hiding this comment

sz-p Mar 17, 2025

Choose a reason for hiding this comment

github-actions bot commented Mar 17, 2025 • edited Loading

echarts-bot bot commented Mar 27, 2025

plainheart Apr 1, 2025

Choose a reason for hiding this comment

sz-p Apr 3, 2025

Choose a reason for hiding this comment

sz-p Apr 9, 2025

Choose a reason for hiding this comment

feat(legend): legend supports `triggerEvent` option #18164

feat(legend): legend supports `triggerEvent` option #18164

oom- commented Oct 9, 2024 •

edited

Loading

sz-p commented Oct 10, 2024 •

edited

Loading

github-actions bot commented Mar 17, 2025 •

edited

Loading