快捷導(dǎo)航

echarts中tooltip添加點擊事件代碼示例

更新時間：2023年07月26日 16:13:07 作者：一個好好的程序員

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

tooltip ={                                      //提示框組件
    trigger: 'item',                            //觸發(fā)類型,'item'數(shù)據(jù)項圖形觸發(fā)，主要在散點圖，餅圖等無類目軸的圖表中使用。 'axis'坐標(biāo)軸觸發(fā)，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。
    triggerOn:"mousemove",                      //提示框觸發(fā)的條件,'mousemove'鼠標(biāo)移動時觸發(fā)。'click'鼠標(biāo)點擊時觸發(fā)。'mousemove|click'同時鼠標(biāo)移動和點擊時觸發(fā)。'none'不在 'mousemove' 或 'click' 時觸發(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,                      //提示框浮層的移動動畫過渡時間，單位是 s,設(shè)置為 0 的時候會緊跟著鼠標(biāo)移動
    position:['50%', '50%'],                    //提示框浮層的位置，默認(rèn)不設(shè)置時位置會跟隨鼠標(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}，vvxyksv9kd，{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添加點擊事件

效果如下

代碼如下

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