Handling click events on chart grid columns

问题简述 (One-line summary)

Is there any way to capture click events on chart columns? My goal is to create a chart with possibility to select individual columns by clicking on them.

版本及环境 (Version & Environment)

• ECharts 版本 (ECharts version): 3.1.3
• 浏览器类型和版本 (Browser version): Google Chrome 49.0.2623.110
• 操作系统类型和版本 (OS Version): Windows 8

期望结果 (Expected behaviour)

I would expect that chart.on('click', () => { console.log('click'); }); captures click events on the entire chart. Or at least i would expect an option like grid: { clickable: true }.

可能哪里有问题 (What went wrong)

chart.on('click', () => { console.log('click'); }); registers event only on chart components such as bars etc.

ECharts配置项 (ECharts option)

option = {

}

[OlmoBarberis]

But when I click between two columns, I can not receive any event. I wish I can get the dataIndex where the blue line located. Any idea? @coretez

Have you tried with: const zr = chart.getZr(); zr.on('click', (params) => { console.log(params); });

You can take extract coordinates from params and get dataIndex with chart.convertFromPixel.

I have used it in my project and I had found an example that used getZr() but I can’t find it again now!

EDIT: I have found the example: https://echarts.apache.org/examples/en/editor.html?c=line-pen

[jeffz2012]

https://echarts.apache.org/api.html#events.Mouse events.click