Echarts中自定义tooltip并添加点击交互
·
tooltip: {
trigger: 'item',
borderColor: '#ccc', //边框颜色
enterable: true, //可以悬停在浮窗--进行点击事件
position: [10, 10], //浮窗位置
formatter: (v) => {
//使用html格式化浮窗显示内容
let html =
`<div style='min-width:194.55px;text-align: left;margin-left:5px'><span style="color:${
v.name !== '处理中' ? '#447CF5' : '#078F59'
};font-weight:bold">${v.name} </span>` +
`<span style="color:'#000000';font-weight:bold">TOP5</span>` +
`</div>`;
if (v.data.data.length > 0) {
v.data.data.forEach((item) => {
html += `<div style="padding: 5px 10px;text-align: left" title="${
item.label
}"> <span style="display: inline-block;
width: 6px;height: 6px;
background-color: #D9D9D9;
border-radius: 50%;
"></span>
${item.label.length > 13 ? `${item.label.substring(0, 13)}...` : item.label}</div>`;
});
}
//增加浮窗中点击事件
html += `<div data-name="${v.name}" style='text-align: right;color:#1D59F2;cursor: pointer;'
class="tooltip-clickable">查看详情</div>`;
return html;
},
},
//监听浮窗的点击事件tooltip-clickable、data-name
document.body.addEventListener('click', function (e) {
const target = e.target as HTMLElement | null;
if (target?.classList.contains('tooltip-clickable')) {
const name = target?.getAttribute('data-name');
handleClick('detail', name);
}
});
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)