javascript - echart标题被双击时如何触发事件
问题描述
我试图让用户可以通过双击来更改 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
支票,它只会在标题点击时触发。
要了解有关可能的事件类型和处理的更多信息,请查看文档中的这一章。
推荐阅读
- kubernetes - 如何将 kubernetes 中的服务暴露给 GCP/GKE 中的单个内部负载均衡器
- python-3.x - Python 3.6 numpy reshape 有效,但值包含 e
- python - 如何将 csv 转换为标记点的 RDD?
- cesium - 在 Cesium 中,tileset 上的 Clipping Planes 不起作用
- android - 在 Oreo 8.1 上更改通知通道的声音和振动
- intellij-idea - 如何在 IntelliJ 插件中实现“语音气泡”?
- scala - 使用 map 创建数组的副本(具有泛型类型)会导致错误 [Scala]
- reactjs - 流:缺少 T 的类型注释
- java - 需要使用反射和注释从父类构造函数实例化子类成员
- java - com.querydsl.core.Tuple 的 ClassCastException