fix(matrix): trigger click event on matrix cells #21390

natsuokawai · 2025-11-26T08:48:30Z

Brief Information

This pull request is in the type of:

bug fixing
new feature
others

What does this PR do?

Fixes an issue where click events were not triggered on matrix component cells.

Fixed issues

[Bug] Matrix component click event is not triggered even when silent is false #21389

Details

Before: What was the problem?

Even when matrix.body.silent was set to false (and the cell was made hit-testable, e.g., by setting itemStyle.color to 'transparent'), click events on matrix cells were not being emitted by the ECharts instance. This was because the underlying graphic elements (rects and texts) created in MatrixView lacked the necessary eventData (ECData) to identify them as part of the matrix component.

After: How does it behave after the fixing?

Click events are now correctly triggered when clicking on matrix cells. The event parameters include componentType: 'matrix', componentIndex, and the cell's name.

This is achieved by:

Importing getECData in src/component/matrix/MatrixView.ts.
Attaching eventData to the cell's text elements during creation in createMatrixCell.

events-on-matrix-cell-text.mov

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

Security Checking

This PR uses security-sensitive Web APIs.

ZRender Changes

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

Related test cases or examples to use the new APIs

Added a new test case in test/ut/spec/component/matrix/event.test.ts to verify the fix.

Merging options

Please squash the commits into a single one when merging.

Other information

echarts-bot · 2025-11-26T08:48:38Z

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.

Please DO NOT commit the files in dist, i18n, and ssr/client/dist folders in a non-release pull request. These folders are for release use only.

Ovilia

Matrix is a layout so its text in the header or body should not trigger 'click' event by default. If you need this information, you need to add a new option matrix.triggerEvent (default false) like https://echarts.apache.org/en/option.html#yAxis.triggerEvent.

natsuokawai · 2025-11-30T05:14:20Z

@Ovilia
Thank you for your review and the helpful feedback!

I've updated the implementation to add the triggerEvent option (default: false) following the same pattern as yAxis.triggerEvent.

I would appreciate it if you could take another look.

Ovilia

Please also add test cases in test/matrix.html.

Ovilia · 2025-12-03T08:21:53Z

src/component/matrix/MatrixView.ts

+            name: textValue != null ? textValue + '' : null,
+            coord: xyLocator.slice()
+        };
+        getECData(cellRect).eventData = eventData;


It seems that events only trigger when there is text, correct me if I'm wrong. So what's the meaning of setting eventData of cellRect here?

@Ovilia
Sorry, you're right. I've removed the eventData from cellRect. Fixed in 1a12a50

Copilot

Pull request overview

This PR fixes a bug where click events were not being triggered on matrix component cells. It adds a triggerEvent option to the matrix component (defaulting to false) and implements the necessary eventData attachment to enable click event propagation when enabled.

Key Changes:

Adds triggerEvent boolean option to MatrixOption interface with a default value of false
Updates createMatrixCell function to attach eventData to cell text elements when triggerEvent is enabled
Adjusts silent property logic to account for both triggerEvent and tooltip interactions

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File	Description
src/coord/matrix/MatrixModel.ts	Adds `triggerEvent` option to MatrixOption interface and sets default to false
src/component/matrix/MatrixView.ts	Imports getECData, adds targetType parameter to createMatrixCell, attaches eventData to cellText when triggerEvent is enabled, and updates silent property logic
test/ut/spec/component/matrix/event.test.ts	Adds comprehensive unit tests for verifying click events work when triggerEvent is true and eventData is not attached when false
test/matrix.html	Adds interactive demo showing click events on matrix cells with visual feedback

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-10T06:39:08Z

src/component/matrix/MatrixView.ts

+    if (triggerEvent && cellText) {
+        const eventData = {
+            componentType: 'matrix' as const,
+            componentIndex: matrixModel.componentIndex,
+            matrixIndex: matrixModel.componentIndex,
+            targetType: targetType,
+            name: textValue != null ? textValue + '' : null,
+            coord: xyLocator.slice()
+        };
+        getECData(cellText).eventData = eventData;
+    }


The eventData is only attached to cellText, which means cells without text values (where textValue is null/undefined) won't trigger click events even when triggerEvent is true. Consider whether eventData should also be attached to cellRect for cells without text to ensure consistent event handling across all matrix cells.

I also have this doubt. @natsuokawai Do you think it be useful to cells without text to trigger events?

@Ovilia
I figured that cells without text (so, no actual data) probably don't need to trigger events.
The way I see it, ECharts events are mainly for when you want to do something with the data shown at a particular point.

Copilot · 2025-12-10T06:39:09Z

test/ut/spec/component/matrix/event.test.ts

+    it('should trigger click event on matrix cell when triggerEvent is true', function () {
+        const option = {
+            matrix: {
+                triggerEvent: true,
+                x: {
+                    data: ['A', 'B']
+                },
+                y: {
+                    data: ['Y']
+                },
+                body: {
+                    data: [
+                        { coord: [0, 0], value: 'Cell A' }
+                    ]
+                }
+            }
+        };
+
+        chart.setOption(option);
+
+        let clickedParams: any = null;
+
+        chart.on('click', function (params) {
+            clickedParams = params;
+        });
+
+        // Find the matrix cell element
+        const zr = chart.getZr();
+        const displayList = zr.storage.getDisplayList();
+
+        let targetEl;
+        for (let i = 0; i < displayList.length; i++) {
+            const el = displayList[i];
+            const ecData = getECData(el);
+            if (ecData && ecData.eventData && ecData.eventData.name === 'Cell A') {
+                // Find the cell with the specific name
+                targetEl = el;
+                break;
+            }
+        }
+
+        expect(targetEl).toBeDefined();
+
+        // Trigger click
+        zr.trigger('click', {
+            target: targetEl,
+            offsetX: 10, // Dummy
+            offsetY: 10  // Dummy
+        });
+
+        expect(clickedParams).not.toBeNull();
+        expect(clickedParams.componentType).toEqual('matrix');
+        expect(clickedParams.matrixIndex).toEqual(0);
+        expect(clickedParams.targetType).toEqual('body');
+        expect(clickedParams.name).toEqual('Cell A');
+        expect(clickedParams.coord).toEqual([0, 0]);
+    });


Consider adding test coverage for cells without text values to verify whether click events should (or should not) be triggered on cells that only have background styling but no text content. This would help clarify the intended API behavior.

Fixed in 5530423

…List

pull-request-size bot added the size/S label Nov 26, 2025

echarts-bot bot added PR: awaiting review PR: doc unchanged labels Nov 26, 2025

Ovilia requested changes Nov 28, 2025

View reviewed changes

echarts-bot bot added PR: revision needed and removed PR: awaiting review labels Nov 28, 2025

pull-request-size bot added size/M and removed size/S labels Nov 30, 2025

echarts-bot bot added PR: awaiting review and removed PR: revision needed labels Nov 30, 2025

natsuokawai requested a review from Ovilia November 30, 2025 05:14

Ovilia reviewed Dec 3, 2025

View reviewed changes

natsuokawai requested a review from Ovilia December 7, 2025 06:53

Ovilia requested a review from Copilot December 10, 2025 06:35

Copilot started reviewing on behalf of Ovilia December 10, 2025 06:35 View session

Copilot AI reviewed Dec 10, 2025

View reviewed changes

natsuokawai and others added 7 commits December 15, 2025 16:45

fix(matrix): trigger click event on matrix cells

e9267e2

fix(matrix): Trigger event only when matrix.triggerEvent is true

78ed359

fix(matrix): Add eventData items

f43776a

fix(matrix): Trigger click event only on text, not on background

a7228a0

test(matrix): Add a test case for matrix text events

5bdc7b0

test(matrix): Make some cells empty

e800931

test(matrix): Retrieve eventData from text content instead of display…

6609e32

…List

natsuokawai force-pushed the fix/matrix-click-event branch from 5530423 to 6609e32 Compare December 15, 2025 08:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(matrix): trigger click event on matrix cells #21390

fix(matrix): trigger click event on matrix cells #21390

natsuokawai commented Nov 26, 2025 •

edited

Loading

Uh oh!

echarts-bot bot commented Nov 26, 2025

Uh oh!

Ovilia left a comment

Uh oh!

natsuokawai commented Nov 30, 2025

Uh oh!

Ovilia left a comment

Uh oh!

Ovilia Dec 3, 2025

Uh oh!

natsuokawai Dec 7, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Dec 10, 2025

Uh oh!

Ovilia Dec 10, 2025

Uh oh!

natsuokawai Dec 12, 2025

Uh oh!

Copilot AI Dec 10, 2025

Uh oh!

natsuokawai Dec 13, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

fix(matrix): trigger click event on matrix cells #21390

Are you sure you want to change the base?

fix(matrix): trigger click event on matrix cells #21390

Conversation

natsuokawai commented Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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

Security Checking

ZRender Changes

Related test cases or examples to use the new APIs

Merging options

Other information

Uh oh!

echarts-bot bot commented Nov 26, 2025

Uh oh!

Ovilia left a comment

Choose a reason for hiding this comment

Uh oh!

natsuokawai commented Nov 30, 2025

Uh oh!

Ovilia left a comment

Choose a reason for hiding this comment

Uh oh!

Ovilia Dec 3, 2025

Choose a reason for hiding this comment

Uh oh!

natsuokawai Dec 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Dec 10, 2025

Choose a reason for hiding this comment

Uh oh!

Ovilia Dec 10, 2025

Choose a reason for hiding this comment

Uh oh!

natsuokawai Dec 12, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 10, 2025

Choose a reason for hiding this comment

Uh oh!

natsuokawai Dec 13, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

natsuokawai commented Nov 26, 2025 •

edited

Loading

natsuokawai Dec 7, 2025 •

edited

Loading