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?
Share Improve this question edited Jul 24, 2019 at 23:07 Jimi 32.4k8 gold badges50 silver badges78 bronze badges asked Jul 24, 2019 at 22:30 Leonardo ClóLeonardo Cló 3065 silver badges14 bronze badges2 Answers
Reset to default 5Yes, 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.