javascript - How to trigger event when echart title is double clicked - Stack Overflow

admin管理员组

文章数量:1431435

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 ponent, 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?

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 ponent, 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?

• javascript
• echarts

Share Improve this question Follow edited Jul 24, 2019 at 23:07 Jimi 32.4k88 gold badges5050 silver badges7878 bronze badges asked Jul 24, 2019 at 22:30 Leonardo ClóLeonardo Cló 30655 silver badges1414 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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 ponent.

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 ponentType string, which will tell you the name of the targeted ponent. 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.ponentType === '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 ponentType 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.

I am really not sure if this is possible, because this is a really oddly specific and (at least for the devs) unusefull. Your best bet would be to detect a click on the surrounding div and to get the position of that click back. Then you would be able to determine of the click was within the right area and thus make a click on title event.

For getting the position I would give this a look: Position of click within div

Hope this helps at all.

本文标签： javascriptHow to trigger event when echart title is double clickedStack Overflow