diff --git a/src/core/echarts.ts b/src/core/echarts.ts index ccd7d6084b82074b4a6390d5f711b60119be6f04..d50fec494d71fe7d4106daddb277b0b2252d3dac 100644 --- a/src/core/echarts.ts +++ b/src/core/echarts.ts @@ -1065,7 +1065,7 @@ class ECharts extends Eventful { 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; } diff --git a/src/util/types.ts b/src/util/types.ts index 5338446122a16cdb6d7359b04b9353abcf81fb04..6f135e83a1df4063a4f92d88b93744f3529851fe 100644 --- a/src/util/types.ts +++ b/src/util/types.ts @@ -143,7 +143,9 @@ export interface DataHost { getData(dataType?: SeriesDataType): SeriesData; } -export interface DataModel extends Model, DataHost, DataFormatMixin {} +export interface DataModel extends Model, DataHost, DataFormatMixin { + getDataParams(dataIndex: number, dataType?: SeriesDataType, el?: Element): CallbackDataParams; +} // Pick, // Pick {} diff --git a/test/ut/spec/series/custom.test.ts b/test/ut/spec/series/custom.test.ts index ec0af5769da0f3d432d0452e8586c68f7152f914..76ecd099be1ff7ac686b034b4145f43911bb45e9 100644 --- a/test/ut/spec/series/custom.test.ts +++ b/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' }); + }) });