Echarts图表tooltip添加点击按钮

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

效果图

功能：

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

具体过程：

1. ehcarts显示正常，并且在toopltip中添加formatter(params)函数对toopltip进行html设置显示按钮。
2. 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