Incubator-echarts: Handling click events on chart grid columns

[fmal]

问题简述 (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 = {

}

[coretez]

You activate clickable on the chart. Then you need to create a function that captures the click. The function is assigned output the options. Example is:
http://echarts.baidu.com/echarts2/doc/example/event.html

[duxiaofeng-github]

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

[smnbbrv]

For me the following works:

• on tooltip formatter remember the tooltip data into some global variable
• add normal HTML click event listener on the chart parent element
• use this click event in combination with data from tooltip

[hamidhasnain]

@fmal Did you happen to get a solution?

[jeffz2012]

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

[prapakou]

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

it doesn't work, when click not on line.

[smnbbrv]

@Ovilia what does stale mean? The issue is not fixed, it is easily reproducible, lots of people experiencing it... Why is this stale?

[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

[Ovilia]

stale are for issues that aren't active for years.
I will re-open this and see if we can fix this ASAP.

[Ovilia]

We will discuss if to put this feature in ECharts v5.0 or the next major release. I'm adding the milestone 4.5.0 for now for milestone discussion and it may also be moved to 5.0.0 if we decide to implement this in v5.0.
Thanks for understanding.

[MCMcCallum]

One way to do this is to use an invisible graphic as a clickable element that covers the chart area. That is, add the following 'graphic' option to your chart

var chart_width = 1000
var chart_height = 200

function(params) {
  console.log('CLICK')
}

{graphic: {
  type: 'rect',
  shape: {
    x: 0,
    y: 0,
    height: chart_height,
    width: chart_width
  },
  onclick: onClick,
  invisible: true,
  z: 100
}}

[ljieyao]

looking forward to have this feature too

[DoonPort0422]

I am looking for this feature too.
Execute me, when will v5.0 be released? Thanks.

---

I am sorry, is this feature same as the following one (https://github.com/apache/incubator-echarts/issues/9281), that,
Ovilia said:
_We are going to add a feature that mouse events (mouseover, click, and etc.) be fired at grid area, which is the blank area_

[Socrates005]

I got a similar problem with calendar. Although it seems to work, but gives some strange 'dates' back. Anyone an idea?
part option<<
calendar: {
range: ['2020-10-01','2020-10-30'],
cellSize: 'auto'
},
series: {
name:'ls01',
type: 'scatter',
coordinateSystem: 'calendar',
symbolSize: function(val) {
return val[1] / 50;
},
data: [['2020-10-19', 500],['2020-10-15',200]]
}

>
var zr = chartObstructie.getZr();
zr.on('click',function(params) {
var pointInPixel = [params.offsetX, params.offsetY];
var pointInGrid = chartObstructie.convertFromPixel('calendar', pointInPixel);

    console.log(new Date(pointInGrid));
});

When you click the first date -> 10/10 and suddenly it jumps several months/years - depending on the selected range.