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

Question

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

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

此示例显示了几种在图表上捕获事件的方法，但其中 none 包括图表标题。

考虑到这个例子，我想做的是：

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

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

Answer 1

我真的不确定这是否可行，因为这真的很奇怪而且（至少对开发人员而言）没有用。最好的办法是检测对周围 div 的点击并返回该点击的位置。然后你就可以确定点击是在正确的区域内，从而制作一个 click on title 事件。

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

希望这对您有所帮助。

Answer 2

是的，你可以。只要您引用了您的图表实例，您就可以获取图表组件内发生的任何受支持的事件。

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

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

Copy/paste 这段代码在 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!')
  }
})

当您 double-click 标题时，它会在控制台中记录此消息：

title is double-clicked!

因为有 componentType 检查，它只会在点击标题时触发。

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

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

How to trigger event when echart title is double clicked

javascript

echarts