echarts中tooltip添加点击事件代码示例

 更新时间:2023年07月26日 16:13:07   作者:一个好好的程序员  
这篇文章主要给大家介绍了关于echarts中tooltip添加点击事件的相关资料,echarts tooltip点击事件是指当用户点击图表中的提示框(tooltip)时触发的事件,需要的朋友可以参考下

第一部分:echarts 鼠标放上去显示提示框属性详解

tooltip ={                                      //提示框组件
    trigger: 'item',                            //触发类型,'item'数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。 'axis'坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
    triggerOn:"mousemove",                      //提示框触发的条件,'mousemove'鼠标移动时触发。'click'鼠标点击时触发。'mousemove|click'同时鼠标移动和点击时触发。'none'不在 'mousemove' 或 'click' 时触发
    showContent:true,                           //是否显示提示框浮层
    alwaysShowContent:true,                     //是否永远显示提示框内容
    showDelay:0,                                  //浮层显示的延迟,单位为 ms
    hideDelay:100,                                //浮层隐藏的延迟,单位为 ms
    enterable:false,                             //鼠标是否可进入提示框浮层中
    confine:false,                               //是否将 tooltip 框限制在图表的区域内
    transitionDuration:0.4,                      //提示框浮层的移动动画过渡时间,单位是 s,设置为 0 的时候会紧跟着鼠标移动
    position:['50%', '50%'],                    //提示框浮层的位置,默认不设置时位置会跟随鼠标的位置,[10, 10],回掉函数,inside鼠标所在图形的内部中心位置,top、left、bottom、right鼠标所在图形上侧,左侧,下侧,右侧,
    formatter:"{b0}: {c0}<br />{b1}: {c1}",     //提示框浮层内容格式器,支持字符串模板和回调函数两种形式,模板变量有 {a}, {b},{c},{d},{e},分别表示系列名,数据名,数据值等
    backgroundColor:"transparent",            //标题背景色
    borderColor:"#ccc",                        //边框颜色
    borderWidth:0,                              //边框线宽
    padding:5,                                  //图例内边距,单位px  5  [5, 10]  [5,10,5,10]
    textStyle:mytextStyle,                     //文本样式
};

第二部分:echarts的tooltip添加点击事件

效果如下

 代码如下

 代码如下

// 注册图例点击事件
let leftslideData = ref(null);
function leftslide() {
    let params = leftslideData.value;
    console.log(params, 'params');  //获取到点击查看的提示框的值
}
window.leftslide = leftslide;
//tooltip配置如下
tooltip: {
    // triggerOn: 'click|mousemove',
    triggerOn: 'click',
    // triggerOn: '',
    enterable: true,
    // alwaysShowContent: true,
    backgroundColor: '#fff',
    borderColor: '#ddd',
    textStyle: { color: '#666' },
    // hideDelay: 0,
    formatter: function (params) {
       leftslideData.value = params;
       let relVal = params[0].name;
       params.forEach((item, index) => {
              relVal +=
                  '<br/>' +
                  params[index].marker +
                  params[index].seriesName +
                  '&emsp;&emsp;' +
                  params[index].data;
          });
          return (
              relVal +
              `<p style='text-align:right;cursor:pointer; ' onclick="leftslide() "><span style='color: #467ddc;'>查看</span></p>`
          );
      },
  },

总结 

到此这篇关于echarts中tooltip添加点击事件的文章就介绍到这了,更多相关echarts tooltip添加点击事件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js中如何将多层嵌套的数组转换为一层数组

    js中如何将多层嵌套的数组转换为一层数组

    这篇文章主要介绍了js中如何将多层嵌套的数组转换为一层数组问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • js发送短信倒计时的简单实现方法

    js发送短信倒计时的简单实现方法

    下面小编就为大家带来一篇js发送短信倒计时的简单实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • 解析浏览器端的AJAX缓存机制

    解析浏览器端的AJAX缓存机制

    这里我们来解析浏览器端的AJAX缓存机制,来共同看一下AJAX缓存与HTTP缓存的关系以及AJAX缓存的刷新时间问题
    2016-06-06
  • JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法

    JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法

    本文给大家简单总结了下JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法,非常的简单实用,有需要的小伙伴可以参考下
    2016-06-06
  • JavaScript中防抖和节流的原理和区别详解

    JavaScript中防抖和节流的原理和区别详解

    JavaScript 中,防抖和节流是一种用于优化事件处理函数调用频率的技术,防抖和节流的目的都是为了避免频繁地触发事件处理函数,从而减少浏览器和服务器的负担,本文将给大家介绍一下JavaScript中防抖和节流的原理和区别,需要的朋友可以参考下
    2023-09-09
  • JavaScript重定向URL参数的两种方法小结

    JavaScript重定向URL参数的两种方法小结

    关于JavaScript重定向URL参数的实现方法网站有很多,这篇文章的主要内容是从网上查找,并进行了修改,简单粗暴的实现使用JavaScript重置url参数,文中给出了详细的示例代码和调用代码,对大家的理解和学习很有帮助,感兴趣的朋友们下面来一起看看吧。
    2016-10-10
  • javascript实现des解密加密全过程

    javascript实现des解密加密全过程

    这篇文章主要介绍了javascript 实现des解密加密的过程,需要的朋友可以参考下
    2014-04-04
  • 使用Bootstrap美化按钮实例代码(demo)

    使用Bootstrap美化按钮实例代码(demo)

    这篇文章主要介绍了使用Bootstrap美化按钮实例代码(demo),非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-02-02
  • 浅谈JavaScript的自动垃圾收集机制

    浅谈JavaScript的自动垃圾收集机制

    本文主要对JavaScript的自动垃圾收集机制进行简要分析,并介绍了垃圾收集的方式:标记清除(mark-and-sweep)和引用计数(reference counting),需要的朋友一起来看下吧
    2016-12-12
  • Javascript设计模式之发布订阅模式

    Javascript设计模式之发布订阅模式

    发布---订阅模式又叫观察者模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时,所有依赖于它的对象都将得到通知
    2022-12-12

最新评论