快捷導(dǎo)航

echarts中tooltip添加點(diǎn)擊事件代碼示例

更新時(shí)間：2023年07月26日 16:13:07 作者：一個(gè)好好的程序員

這篇文章主要給大家介紹了關(guān)于echarts中tooltip添加點(diǎn)擊事件的相關(guān)資料,echarts tooltip點(diǎn)擊事件是指當(dāng)用戶點(diǎn)擊圖表中的提示框(tooltip)時(shí)觸發(fā)的事件,需要的朋友可以參考下

tooltip ={                                      //提示框組件
    trigger: 'item',                            //觸發(fā)類型,'item'數(shù)據(jù)項(xiàng)圖形觸發(fā)，主要在散點(diǎn)圖，餅圖等無(wú)類目軸的圖表中使用。 'axis'坐標(biāo)軸觸發(fā)，主要在柱狀圖，折線圖等會(huì)使用類目軸的圖表中使用。
    triggerOn:"mousemove",                      //提示框觸發(fā)的條件,'mousemove'鼠標(biāo)移動(dòng)時(shí)觸發(fā)。'click'鼠標(biāo)點(diǎn)擊時(shí)觸發(fā)。'mousemove|click'同時(shí)鼠標(biāo)移動(dòng)和點(diǎn)擊時(shí)觸發(fā)。'none'不在 'mousemove' 或 'click' 時(shí)觸發(fā)
    showContent:true,                           //是否顯示提示框浮層
    alwaysShowContent:true,                     //是否永遠(yuǎn)顯示提示框內(nèi)容
    showDelay:0,                                  //浮層顯示的延遲，單位為 ms
    hideDelay:100,                                //浮層隱藏的延遲，單位為 ms
    enterable:false,                             //鼠標(biāo)是否可進(jìn)入提示框浮層中
    confine:false,                               //是否將 tooltip 框限制在圖表的區(qū)域內(nèi)
    transitionDuration:0.4,                      //提示框浮層的移動(dòng)動(dòng)畫過(guò)渡時(shí)間，單位是 s,設(shè)置為 0 的時(shí)候會(huì)緊跟著鼠標(biāo)移動(dòng)
    position:['50%', '50%'],                    //提示框浮層的位置，默認(rèn)不設(shè)置時(shí)位置會(huì)跟隨鼠標(biāo)的位置,[10, 10],回掉函數(shù)，inside鼠標(biāo)所在圖形的內(nèi)部中心位置，top、left、bottom、right鼠標(biāo)所在圖形上側(cè)，左側(cè)，下側(cè)，右側(cè)，
    formatter:"{b0}: {c0}<br />{b1}: {c1}",     //提示框浮層內(nèi)容格式器，支持字符串模板和回調(diào)函數(shù)兩種形式,模板變量有 {a}, ，{c}，ublnpf9mb，{e}，分別表示系列名，數(shù)據(jù)名，數(shù)據(jù)值等
    backgroundColor:"transparent",            //標(biāo)題背景色
    borderColor:"#ccc",                        //邊框顏色
    borderWidth:0,                              //邊框線寬
    padding:5,                                  //圖例內(nèi)邊距，單位px  5  [5, 10]  [5,10,5,10]
    textStyle:mytextStyle,                     //文本樣式
};

第二部分：echarts的tooltip添加點(diǎn)擊事件

效果如下

代碼如下

// 注冊(cè)圖例點(diǎn)擊事件
let leftslideData = ref(null);
function leftslide() {
    let params = leftslideData.value;
    console.log(params, 'params');  //獲取到點(diǎn)擊查看的提示框的值
}
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>`
          );
      },
  },