Question

我正在尝试使用户可以通过双击来更改echarts标题。我遇到的主要问题是触发事件。

我在文档中注意到他们没有Title组件的实例，所以我想知道是否触发该事件是否可能。

此示例显示了几种在图表上捕获事件的方法，但没有一种方法包含图表标题。

牢记这个例子，我想做的事情是这样的：

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

关于触发此事件有什么建议吗？

Answer 1

是的，可以。只要引用了图表实例，您就可以处理图表组件内部发生的所有受支持事件。

您必须通过将title.triggerEvent设置为true（默认为false）来启用它。这将使标题触发事件。

然后在您的外部方法中，引用图表实例并使用.on(eventName, function(params))监听其事件。 params对象将包含componentType字符串，该字符串将告诉您目标组件的名称。您所要做的就是对其进行适当的检查！

复制/粘贴此代码以在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!')
  }
})

当您双击标题时，它将在控制台中记录以下消息：

title is double-clicked!

由于进行了componentType检查，因此仅在单击标题时才会触发。

要了解有关可能的事件类型和处理的更多信息，请查看文档中的this chapter。

Answer 2

我真的不确定这是否可行，因为这确实很奇怪，并且（至少对于开发人员而言）毫无用处。最好的选择是检测对周围div的点击并获取该点击的位置。然后，您将能够确定该点击是否在正确的区域内，从而进行click on title事件。

要获得该职位，我会看一下：Position of click within div

希望这对您有帮助。

双击echart标题时如何触发事件

2 个答案: