How to trigger event when echart title is double clicked

Question

I am trying to make it possible for the user to change an echarts title by double clicking it. The main issue I am having is on triggering the event.

I noticed on the documentation that they don't have an Instance for the Title component, so I would like to know if trigerring that event its even possible.

Appendix: Component and Chart Instances

This exemple show several ways of catching events on the chart but none of them include the chart title.

Event example

Having this exemple in mind, what I am trying to do would be something like:

myChart.on(ecConfig.EVENT.DBLCLICK.TITLE , eConsole);

Any suggestions on triggering this event?

Answer 1

Yes, you can. As long as you have referenced your chart instance, you will be able to take any supported event that occured inside your chart component.

You have to enable title.triggerEvent by setting it to true (default is false). This will allow the title to fire events.

Then in your external methods, reference the chart instance and listen to its events with the .on(eventName, function(params)). The params object will contain the componentType string, which will tell you the name of the targeted component. All you have to do is a proper check on it!

Copy/paste this code to try it on the official online editor:

option = {
  title: {
    text: 'Click me',
    triggerEvent: true
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line'
  }]
};

myChart.on('dblclick', params => {
  if (params.componentType === 'title') {
    console.log('title is double-clicked!')
  }
})

And when you double-click the title, it will log this message in the console:

title is double-clicked!

Since there's the componentType check, it will only fire on title click.

To see more about possible event types and handling, please take a look at this chapter in the documentation.