在图表层面监听事件，是否可以通过event 参数获取具体点击的元素类型，类似于dom 的 target 参数？-灵析社区
全能人才在使用[VChart](https://link.segmentfault.com/?enc=rXq2W2gKb85KOAi1CCkqEw%3D%3D.SXi8yhjGht7szRUTSVVAH5mvpYVfHSM5kKIHVxGk%2Fg4%3D)时，能通过监听整个chart或canvas，然后根据返回的参数，比如type来判断 点击的是axis/legend/item吗？
云卿山手解决方案 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)