悬浮框tooltip，默认是鼠标移入出现，移出消失。这种情况下，是无法点击到的，更别说添加点击事件，
从官网配置项可以看到 悬浮框的蹴触发条件有四个，根据现在的要修 修改为 click

1. 查看配置项

image.png

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

image.png

3.添加具体方法

  1.   tooltip: {
  2.         triggerOn: 'click',   //触发方式
  3.         trigger:'axis',
  4.         // alwaysShowContent:true,   //鼠标离开区域不消失
  5.         formatter:function(params){
  6.             let val = params[0].value
  7.             var html =  `<div 
  8.              style="pointer-events: all;" >名称：${val}
  9.              <button onclick="clicks('${val}')">点击</button>
  10.              </div>`;
  11.             return html;
  13.         }
  14.     },

4. 最终效果

  1. image.png

5. 完整echarts代码- 原生中使用


<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
    </head>
    <body style="height: 100%; margin: 0">
        <div id="container" style="height: 100%"></div>

        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
        <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};

        var option;



        var dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自', '动', '缩', '放'];
        var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
        var yMax = 500;
        var dataShadow = [];

        for (var i = 0; i < data.length; i++) {
            dataShadow.push(yMax);
        }

        // window.clicks = function (val){
        //     console.log(val)
        // }
        // 下面这种方式也可以
        function clicks(val){
            alert(val)
        }
        window.clicks=clicks;

        option = {
            title: {
                text: '特性示例：渐变色 阴影 点击缩放',
                subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
            },
            tooltip: {
                triggerOn: 'click',   //触发方式
                trigger:'axis',
                alwaysShowContent:true,   //鼠标离开区域不消失
                formatter:function(params){
                    let val = params[0].value
                    var html =  `<div 
                     style="pointer-events: all;" >名称：${val}
                     <button onclick="clicks('${val}')">点击</button>
                     </div>`;
                    return html;
                }
            },
            xAxis: {
                data: dataAxis,
                axisLabel: {
                    inside: true,
                    textStyle: {
                        color: '#fff'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                z: 10
            },
            yAxis: {
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    textStyle: {
                        color: '#999'
                    }
                }
            },
            dataZoom: [
                {
                    type: 'inside'
                }
            ],
            series: [
                {
                    type: 'bar',
                    showBackground: true,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {offset: 0, color: '#83bff6'},
                                {offset: 0.5, color: '#188df0'},
                                {offset: 1, color: '#188df0'}
                            ]
                        )
                    },
                    emphasis: {
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#2378f7'},
                                    {offset: 0.7, color: '#2378f7'},
                                    {offset: 1, color: '#83bff6'}
                                ]
                            )
                        }
                    },
                    data: data
                }
            ]
        };


        if (option && typeof option === 'object') {
            myChart.setOption(option);
        }

        </script>
    </body>
</html>

6 在Vue中使用

<template>
    <div class="echarts">
        <h2 style="text-align: center;">echarts中给tooltips添加点击事件</h2>
        <div id="main"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    created() {
        window.clicks = this.myClick;// 把点击事件绑到window上
    },
    mounted() {
        const chartDom = document.getElementById('main');
        const myChart = echarts.init(chartDom);
        const option = {
            // tooltip中绑定的点击事件
            tooltip: {
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                },
                trigger: 'axis',
                triggerOn: 'click',   //触发方式 移入或点击
                enterable: true, // 鼠标可移入tooltip中 必须
                formatter: (params) => {
                    let val = params[0].value
                    var html = `<div 
                     style="pointer-events: all;" >名称：${val}
                     <button onclick="clicks('${val}')">点击</button>
                     </div>`;
                    return html;
                }
            },
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar'
            }]
        };

        option && myChart.setOption(option);
    },
    methods: {
        myClick(name) { // 事件具体操作
            alert(name);
        }
    }

};
</script>

<style lang='less'>
.echarts {
    #main {
        height: 500px;
        width: 500px;
        border: 1px solid red;
        margin: 30px auto;
    }
}
</style>

7. vue中效果图

image.png