echarts如何将tooltip的Hover事件改为点击事件

冥羽 发布于 2015/06/30 10:29
阅读 17K+
收藏 0

我如何才能把鼠标悬浮弹出tooltip提示框改为鼠标点击弹出tooltip提示框。

加载中
0
花花阿姨
花花阿姨

tooltip: {

 enterable:true

}

花花阿姨
花花阿姨
回复 @冥羽 : 知道啦!series.markPoint有clickable属性,你去研究一下喽
冥羽
不是啊,我的意思是当我点击图表上的某个节点时,弹出tooltip提示框,而不是当我鼠标经过某个节点时弹出tooltip提示框。你这个是鼠标可以进入tooltip提示框并点击提示框内部的信息。跟我的要求不一样
0
n
neu_dwc
点击事件中 调用 shouTip 就可以了
0
小会
小会
还是没听明白
0
海鸥5123
海鸥5123

引用来自“neu_dwc”的评论

点击事件中 调用 shouTip 就可以了
你好。可以具体问下showTip如何调用它吗?。我myChart.showTip(参数)或者其他总是提示无此函数。
0
海鸥5123
海鸥5123

引用来自“曼丽”的评论

tooltip: {

 enterable:true

}

您好。我就是想实现 点击 tooltip提示层里面的内容。我在里面写了html,但是这个tooltip总是很快就消失,或者鼠标移动就消失了。
0
猪猪侠

hideDelay: 1000,

alwaysShowContent: true,

二选一

0
与我同行
与我同行

可以这样修改,使用tooltip的triggerOn属性

 

tooltip.triggerOn string

[ default: 'mousemove|click' ]

提示框触发的条件,可选:

  • 1, 'mousemove'

    鼠标移动时触发。

  • 2, 'click'

    鼠标点击时触发。

  • 3, 'mousemove|click'

    同时鼠标移动和点击时触发。

  • 4, 'none'

    不在 'mousemove' 或 'click' 时触发,用户可以通过 action.tooltip.showTip 和 action.tooltip.hideTip 来手动触发和隐藏。也可以通过 axisPointer.handle 来触发或隐藏。

该属性为 ECharts 3.0 中新加。

这样,你鼠标点击之后tooltip就显示了。

 

可以这么代码可以这么写

 

tooltip: {
    show: true,
    formatter: function(e) {
        // return e.data.displayname;
        return 'hello';
    },
    // position: [500, 10],
    triggerOn: 'click'
},

点解之后调用formatter函数,然后显示hello,可以在里面定义你自己的函数,记得把tooltip添加到option里面。

jungleboy
jungleboy
mark
0
蚂蚁骑大象上高速

楼主 这个问题解决没有? 我现在也碰到同样问题,在移动端触发tooltip显示的事件

 

返回顶部
顶部