echarts自定义tooltip提示框
echarts自定义tooltip提示框#
系列名
数据名 + ':' + 数据值 + '单位'
tooltip: {
trigger: "axis",
formatter: function (params) {
var relVal = params[0].name
for (var i = 0, l = params.length; i < l; i++) {
relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value + ' % '
}
return relVal
}
},
数据值为空或者0的不显示(只显示有值的)
tooltip: {
trigger: "axis",
formatter: function (params) {
//x轴的名称
var htmlStr = params[0].name + '<br/>'
for (var i = 0; i < params.length; i++) {
var param = params[i]
if (param.value > 0) {
htmlStr += '<div>'
//为了保证和原来的效果一样,复制的是:param.marker的源码,圆点样式:param.color
htmlStr += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + param.color + ';"></span>'
// 名称颜色设置
// htmlStr += '<span style="color:'+param.color+'">';
//圆点后面显示的名称
htmlStr += param.seriesName + ':' + param.value + '%'
// htmlStr += '</span>';
htmlStr += '</div>'
}
}
return htmlStr
}
},
作者:whh666
出处:https://www.cnblogs.com/whh666/p/15303866.html
版权:本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构