在图表层面监听事件,是否可以通过event 参数获取具体点击的元素类型,类似于dom 的 target 参数?-灵析社区

云卿山手

## 解决方案 Solution 可以实现的,VChart实例上提供了事件的注册和卸载,您可以通过 `chart.on(event: string, callback: (params: EventParams)=> void): void` 监听不同的事件类型,并通过回调函数拿到上下文信息。如果要区分您是在axis/legend/item上触发的不同事件,可以事件过滤来实现,并传入 `{ level: 'model' | 'mark', type: 'axis' }`, 其中`'model'`表示图表组成元素模型类型,`'mark'`表示图表item元素。 比如: `vchart.on('pointerdown', { level: 'model', type: 'axis' }, (params) => {})`。 当我点击了坐标轴,便可以拿到具体的参数。 更多的事件类型及参数可以参考:[https://www.visactor.io/vchart/api/event](https://link.segmentfault.com/?enc=hvhtpx3Jf9%2FJ3vVC9Bx0sA%3D%3D.GPYa0ks4LXf9ophxbt4x%2FQEwI0ehp1f956kaxa6gDR3tokYGgGCZDX6JmU6Gam7y)。 ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250106/1e62c7bc4ddbeb5be62fb0e45630965a.png) ## 代码示例 Code Example const spec = { type: 'bar', data: [ { id: 'barData', values: [ { State: 'WY', Age: 'Under 5 Years', Population: 25635 }, { State: 'WY', Age: '5 to 13 Years', Population: 1890 }, { State: 'WY', Age: '14 to 17 Years', Population: 9314 }, { State: 'DC', Age: 'Under 5 Years', Population: 30352 }, { State: 'DC', Age: '5 to 13 Years', Population: 20439 }, { State: 'DC', Age: '14 to 17 Years', Population: 10225 }, { State: 'VT', Age: 'Under 5 Years', Population: 38253 }, { State: 'VT', Age: '5 to 13 Years', Population: 42538 }, { State: 'VT', Age: '14 to 17 Years', Population: 15757 }, { State: 'ND', Age: 'Under 5 Years', Population: 51896 }, { State: 'ND', Age: '5 to 13 Years', Population: 67358 }, { State: 'ND', Age: '14 to 17 Years', Population: 18794 }, { State: 'AK', Age: 'Under 5 Years', Population: 72083 }, { State: 'AK', Age: '5 to 13 Years', Population: 85640 }, { State: 'AK', Age: '14 to 17 Years', Population: 22153 } ] } ], xField: 'State', yField: 'Population', seriesField: 'Age', stack: true, legends: { visible: true }, bar: { // The state style of bar state: { hover: { stroke: '#000', lineWidth: 1 } } } }; const vchart = new VChart(spec, { dom: CONTAINER_ID }); vchart.renderAsync(); vchart.on('pointerdown', { level: 'model', type: 'axis' }, (params) => { console.log('params', params) }); // Just for the convenience of console debugging, DO NOT COPY! window['vchart'] = vchart; ## 结果展示 Results 在线效果参考:[https://codesandbox.io/s/event-register-97tjkg](https://link.segmentfault.com/?enc=ww1AymQEDpdGK%2BgyALEqbA%3D%3D.H%2FWRZk%2FfwoNOJAUhOAQ2pS3hq018b40vATK3rdB0%2FuL7x%2BSNPIOKVjQn3orHqqWq) ![Sep-07-2023 13-08-32.gif](https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250106/89d41ba4ea672a61d651b0a49e993ef7.png) ## 相关文档 Related Documentation 事件教程:[https://www.visactor.io/vchart/guide/event](https://link.segmentfault.com/?enc=ksc7ZvB%2Flga4c0J0%2F4MJZg%3D%3D.gioS8UUSr1GQ6IeH4PQ5918UHSbRogVCofEyLATsPpFQfgxm6s%2B6fjv5JYUrX65v) 相关api:[https://www.visactor.io/vchart/api/event](https://link.segmentfault.com/?enc=hGMatCgBAB23Hl9WcdiJCQ%3D%3D.xXYB%2BLkwVuqjReHMYD71YfBxUpBQdwFqSixFDkb5Om5ubNKhJi1EMMVOkH8X%2Beob) github:[https://github.com/VisActor/VChart](https://link.segmentfault.com/?enc=f3wxtRI246qJ5NymGxnPKg%3D%3D.V1v0j9R0t9w3M9dcX74a0Abl6ILhllkWeVYiKq6JzQcf5WG97ayxRHVvJEmzKQ0l)

阅读量:1

点赞量:0

问AI