echarts 中tooltip如何配置自定义提示

在 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 版本是最新的，以便能够使用最新的功能和修复已知的问题。

前端技术交流群：