fix(custom): add info in custom renderItem #15789

src/core/echarts.ts

@@ -1065,7 +1065,7 @@ class ECharts extends Eventful<ECEventDefinition> {
                         if (ecData && ecData.dataIndex != null) {
                             const dataModel = ecData.dataModel || ecModel.getSeriesByIndex(ecData.seriesIndex);
                             params = (
-                                dataModel && dataModel.getDataParams(ecData.dataIndex, ecData.dataType) || {}
+                                dataModel && dataModel.getDataParams(ecData.dataIndex, ecData.dataType, el) || {}
                             ) as ECElementEvent;
                             return true;
                         }

src/util/types.ts

@@ -143,7 +143,9 @@ export interface DataHost {
     getData(dataType?: SeriesDataType): SeriesData;
 }
 
-export interface DataModel extends Model<unknown>, DataHost, DataFormatMixin {}
+export interface DataModel extends Model<unknown>, DataHost, DataFormatMixin {
+    getDataParams(dataIndex: number, dataType?: SeriesDataType, el?: Element): CallbackDataParams;
+}
     // Pick<DataHost, 'getData'>,
     // Pick<DataFormatMixin, 'getDataParams' | 'formatTooltip'> {}
 

test/ut/spec/series/custom.test.ts

@@ -69,4 +69,46 @@ describe('custom_series', function () {
         expect(resultPaletteColors).toEqual(colors);
     });
 
+    it('should pass user defined data to event handlers', async () => {
+        const data = [
+            [10, 16],
+            [20, 18],
+            [30, 26],
+            [40, 32],
+            [50, 56],
+          ];
+        const option = {
+            xAxis: { scale: true },
+            yAxis: {},
+            series: [
+                {
+                    type: 'custom',
+                    renderItem: function (params: any, api:any) {
+                        const yValue = api.value(1);
+                        const start = api.coord([api.value(0), yValue]);
+                        const size = api.size([0, yValue]);
+                        return {
+                            type: 'rect',
+                            info: { foo: 'bar' },
+                            shape: {
+                                x: start[0],
+                                y: start[1],
+                                width: 50,
+                                height: size[1]
+                            }
+                        };
+                    },
+                    data: data
+                }
+            ]
+        };
+        chart.setOption(option);
+        let customInfo: any;
+        chart.on('mousemove', param => customInfo = param.info);
+        const el = chart.getDom().children.item(0);
+        const e = new MouseEvent('mousemove');
+        Object.assign(e, { zrX: 100, zrY: 270 });
+        el.dispatchEvent(e)
+        expect(customInfo).toEqual({ foo: 'bar' });
+    })
 });