Echarts图表tooltip添加点击按钮

最新推荐文章于 2025-06-13 15:57:26 发布

原创最新推荐文章于 2025-06-13 15:57:26 发布 · 2w 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#echarts按钮点击 #echarts的tooltip添加点击按钮 #tooltip

echarts 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在Echarts的Tooltip中添加按钮，并通过点击按钮获取特定数据点信息进行进一步操作。通过设置Tooltip的formatter函数，可以实现在Tooltip中显示按钮，并利用CSS设置按钮样式。点击按钮时，可以通过传递的参数调用自定义函数处理数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Echarts图表tooltip添加点击按钮并获取具体时刻数据

效果图

在这里插入图片描述

功能：

tooltip中添加一个查看按钮，
并且点击获得触发点的数据进行操作

具体过程：

ehcarts显示正常，并且在toopltip中添加formatter(params)函数对toopltip进行html设置显示按钮。
css设置按钮style，按钮设置pointer-events

简单两部分设置就可以实现该功能的展示。

代码结构：

tooltip

tooltip : {
    axisPointer: {
        type: 'cross'
    },
    triggerOn: 'click',   //触发方式
    // alwaysShowContent:true,   //鼠标离开区域不消失
    trigger:'axis',
    formatter:function(params){
        var html = '';
        if(params.length>0){
            Xindex = params[0].dataIndex;
            html+= date + ' ' +params[0].name+'<br>';
            for ( var int = 0; int < params.length; int++) {
                if(int == 0){
                    html+=params[int].marker + params[int].seriesName+': '+params[int].data+'&nbsp;&nbsp;&nbsp;<button class="fr btn closeHandle" id="specialLook"  οnclick="lookVideoGo(\''+ date + ' ' +params[0].name +'\')">查 看</button><br>';      
           			//lookVideoGo按钮触发函数 ，注意传递参数引号规则
                }else{
                    html+=params[int].marker + params[int].seriesName+': '+params[int].data+'<br>';
                }
            }
        }
        return html;
    },
},

css

#specialLook{
	pointer-events: all;
	...
}

点击方法

<script>
	 function lookVideoGo(val){
            console.log('参数',val)
      }
</script>

demo下载（原生版）
链接：https://pan.baidu.com/s/1ozNm5iFbqzoN9IOoNM42UA
提取码：nz0b