vue+Echarts tooltip点击事件

效果图

image.png

业务代码

  data() {
    return {
      hookToolTip: undefined,
    }
  }

  watch:{
    hookToolTip(){
      let tooltipButton = document.querySelectorAll("#btn-tooltip button")
      for( let i = 0; i < tooltipButton.length; i++){
        tooltipButton[i].addEventListener('click', this.chartClick)
      }
    }
  }

methods:{
    chartClick(param) {
      console.log(param);
      console.log(param.target.dataset.value);
    }
}

tooltip: {
  enterable: true,
  extraCssText: "padding-right:8px;padding-left:8px;line-height:30px;background:rgba(255,255,255,1);box-shadow:1px 5px 20px 0px rgba(1,11,19,0.2);border-radius:6px;",
  textStyle: {
    fontSize: "13",
    color: "#656565",
  },
  formatter:(params)=> {
    this.hookToolTip = params
    let html = '';
    if(params.data.length>0){
      for (let int = 0; int < params.data.length; int++) {
        html+=`客户：${params.data[int]}
`;
      }
    }
    return `
${html} 
`;
  },
}