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);
		}
	});

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐