首页 > 其他 > 详细

echarts 悬浮框tooltip 添加点击事件

时间:2021-05-19 13:10:10      阅读:151      评论:0      收藏:0      [点我收藏+]

  

  悬浮框tooltip,默认是鼠标移入出现,移出消失。这种情况下,是无法点击到的,更别说添加点击事件。所以先修改出现方式

  1.从官网配置项可以看到 悬浮框的蹴发条件有四个。根据现在的要修 修改为 click

 

 

 

   技术分享图片

 

 

    2.然后要给悬浮框添加事件,鼠标必须得进入悬浮框(默认为不能进去) enterable

             技术分享图片

    3.添加具体方法

                在formatter中添加 内联得点击事件,点击事件需要挂载在window上,否则获取不到。

tooltip: {
                triggerOn: click,
                enterable: true,
                formatter: function (params) {
                    var showData = params["data"]
                    return `<div style="color:#fff;" onclick="myAerlt(‘${showData[2]}‘)">名称:${showData[2]} ;</div>坐标:${showData[0]},${showData[1]}`;
                }
            },

 

    

function myAerlt(nam){
    alert(nam)
}
window.myAerlt=myAerlt;

      效果:实现了 悬浮框得点击事件。

 技术分享图片

 

 

 

   

echarts 悬浮框tooltip 添加点击事件

原文:https://www.cnblogs.com/GoTing/p/14784461.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!