echarts控制鼠标悬浮的提示信息

如图所示
tooltip: { show: true, trigger: "axis", formatter: (params, ticket, callback)=> { var htmlStr = ""; for (var i = 0; i < params.length; i++) { var param = params[i]; var xName = param.name; //x轴的名称 var seriesName = param.seriesName; //图例名称 var value = param.value; //y轴值 var color = param.color; //图例颜色 // console.log('param',param) if (i === 0) { htmlStr += this.timeStr+'-'+(xName>9?xName:'0'+xName) + "<br/>"; //x轴的名称 } htmlStr += "<div>"; // 具体显示的数据【字段名称:seriesName,值:value】 // 这里判断一下name,如果是我们需要特殊处理的,就处理 if (seriesName === "额外信息") { // 前面一条线,后面一条线【具体样式自己写】 htmlStr += '<div style="border: 1px solid #FFEB3B"></div>'; htmlStr += "XXXXX:" + value; htmlStr += '<div style="border: 1px solid #FFEB3B"></div>'; } else { // 正常显示的数据,走默认 htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>'; htmlStr +=this.tabTittle[this.activeTabIndex]+':'+ value[1]; } htmlStr += "</div>"; } return htmlStr; }, },
posted on 2022-04-02 10:02 樱桃小王子yummy 阅读(1266) 评论(0) 编辑 收藏 举报
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY