echarts 悬浮框tooltip 添加点击事件

矫情吗；* 2023-01-23 10:57 1阅读 0赞

echarts代码

tooltip: {
            trigger: 'axis',
            triggerOn: 'click',//点击才会出现提示框
            enterable: true,//鼠标可以进入提示框
            formatter: function (params) {
              let returnData = ''
              if (params.length == 1) {
                returnData = params[0].name + ':' + params[0].value
              } else {
                returnData = params[0].name + '</br>'
                for (let i = 0; i < params.length; i++) {
                  let indexColor = params[i].color
                  console.log(params)
                  returnData += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background:' + indexColor + '"></span>'
                  returnData += params[i].seriesName + ':' + params[i].value + '</br>'
                }
              }
              var val = {
                "name": params[0].name,
                "value": params[0].value
              }
              return returnData + '<hr style="border:1 dashed #987cb9;" width="98%" size=5><div onclick="myAerlt(\'' + JSON.stringify(val).replace(/"/g, '"') + '\')" style="color:#FFFFFF;text-decoration: none" id="btn-tooltip">详情></div>'
            }
          },

点击事件代码

function myAerlt(val) {
           var obj = JSON.parse(val);
            console.log(obj)
        }
    window.myAerlt = myAerlt;

点击事件需要挂载在window上，否则获取不到。

效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2ODAyNzI2_size_16_color_FFFFFF_t_70][]

点击详情后

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2ODAyNzI2_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2ODAyNzI2_size_16_color_FFFFFF_t_70]: /images/20221004/3c5255fe83244d7ab16f4fdd4692ee4a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2ODAyNzI2_size_16_color_FFFFFF_t_70 1]: /images/20221004/d977caea3a714be3af3743fc96aa56d9.png