效果图
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+=`<button class="specialLook" data-value="${params.data[int]}">客户：${params.data[int]}</button><br/>`;
}
}
return `<div id="btn-tooltip" >${html} </div>`;
},
}
