我正在尝试通过双击来允许用户更改 echarts 的标题。 我遇到的主要问题是如何触发此事件。
我注意到文档中没有 Title 组件的实例,因此我想知道是否有可能触发该事件。
这个例子展示了在图表上捕获事件的几种方法,但其中没有包括图表标题。
考虑到这个例子,我想要做的事情类似于:
myChart.on(ecConfig.EVENT.DBLCLICK.TITLE , eConsole);
有没有触发此事件的建议?
我正在尝试通过双击来允许用户更改 echarts 的标题。 我遇到的主要问题是如何触发此事件。
我注意到文档中没有 Title 组件的实例,因此我想知道是否有可能触发该事件。
这个例子展示了在图表上捕获事件的几种方法,但其中没有包括图表标题。
考虑到这个例子,我想要做的事情类似于:
myChart.on(ecConfig.EVENT.DBLCLICK.TITLE , eConsole);
可以。只要你已经引用了图表实例,你就可以获取到任何在图表组件内发生的支持事件。
你需要将title.triggerEvent
设置为true
(默认值为false
)来启用标题触发事件。这将允许标题触发事件。
然后,在你的外部方法中,引用图表实例,并使用.on(eventName, function(params))
监听它的事件。 params
对象将包含componentType
字符串,这将告诉你所针对的组件名称。 你只需要进行适当的检查即可!
复制/粘贴此代码以在官方在线编辑器上进行尝试:
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!')
}
})
当您双击标题时,它将在控制台中记录此消息:
title is double-clicked!
由于进行了componentType
检查,仅在标题点击时才会触发该事件。
要了解更多可能的事件类型和处理方式,请参阅文档中的此章节。
我真的不确定这是否可能,因为这是一个非常奇怪的特定问题,对于开发人员来说也没有用。你最好的选择是检测周围div上的点击事件,并获取该点击的位置。然后,您将能够确定单击是否在正确的区域内,从而触发标题点击
事件。
要获取位置,我建议查看:在div中获取点击位置
希望这有所帮助。