在 ECharts 中配置自定义的 tooltip
提示,主要依赖于 tooltip
组件的 formatter
属性。formatter
可以是一个字符串模板或者一个回调函数,用于定义提示框的显示内容。
使用字符串模板
字符串模板通过预定义的占位符来插入数据,这些占位符会被自动替换为对应的数据值。例如:
javascript复制代码
tooltip: { | |
trigger: 'item', // 触发类型,item 表示数据项图形触发 | |
formatter: '{a} <br/>{b} : {c}' // {a}、{b}、{c} 是占位符 | |
} |
但是,字符串模板的灵活性有限,当需要更复杂的格式或逻辑时,建议使用回调函数。
使用回调函数
回调函数允许你编写 JavaScript 代码来动态生成提示框的内容。formatter
函数会接收到一个或多个参数(通常是一个数组),每个参数代表了一个数据项的信息。
javascript复制代码
tooltip: { | |
trigger: 'axis', // 触发类型,axis 表示基于坐标轴触发 | |
formatter: function (params) { | |
// params 是一个数组,包含了当前触发 tooltip 的所有数据点的信息 | |
// 这里以 params[0] 为例,代表第一个数据点 | |
let res = params[0].seriesName + '<br/>'; // 系列名称 | |
res += params[0].name + ' : '; // 类目名(如果是类目轴的话) | |
res += params[0].value; // 数据值 | |
// 可以添加更多自定义逻辑 | |
if (params[0].value > 100) { | |
res += ' (高值)'; | |
} | |
return res; | |
} | |
} |
在回调函数中,你可以访问到 params
对象的多个属性,包括但不限于:
seriesName
:系列名称name
:数据项名称(对于类目轴来说)value
:数据值data
:原始数据项dataIndex
:数据项在系列中的索引color
:数据项的颜色
进阶使用
如果你需要在 tooltip
中显示更复杂的 HTML 结构(如图片、链接、表格等),可以直接在 formatter
回调函数中返回 HTML 字符串。
javascript复制代码
tooltip: { | |
trigger: 'item', | |
formatter: function (params) { | |
return `<div>${params.seriesName}<br/> | |
<img src="${params.data.imgUrl}" style="width: 50px; height: 50px;"/> | |
${params.name} : ${params.value}</div>`; | |
} | |
} |
注意:确保你的 HTML 字符串是安全的,特别是当内容来自用户输入时,以避免 XSS 攻击。
注意事项
- 当你使用 HTML 字符串时,请确保
tooltip
的confine
属性为true
(或未设置,因为默认就是true
),这样 ECharts 才会将返回的字符串作为 HTML 来解析。 - 在某些情况下,你可能需要调整
tooltip
的其他配置项,如position
、backgroundColor
、borderColor
等,以更好地满足你的需求。 - 确保你的 ECharts 版本是最新的,以便能够使用最新的功能和修复已知的问题。
前端技术交流群: