echart中tooltip展示多个字段
时间: 2025-03-10 22:11:16 浏览: 46
### 配置 ECharts Tooltip 属性
为了使 `tooltip` 能够显示多个数据系列或维度的值,在配置项中需特别注意 `formatter` 函数的应用。通过自定义 `formatter` 可以灵活控制提示框内的内容呈现方式[^1]。
当处理多维数组作为数据源时,每一组数据代表一个点的不同属性(如 X 坐标、Y 坐标以及其他附加信息)。这些额外的数据可以通过索引来访问并组合成所需的字符串形式展示给用户[^2]。
对于拥有多个序列的情况,可以在全局范围内设定 `tooltip` 的触发条件为 `'axis'` 或者针对特定类型的图表指定更精确的位置参数,比如极坐标下的 `polar.tooltip` 设置等[^3]。
下面是一个简单的例子来说明如何实现这一功能:
```javascript
option = {
tooltip: {
trigger: 'axis',
formatter: function (params) {
let result = '<strong>Details:</strong><br/>';
params.forEach(function(item){
result += `${item.seriesName}: ${item.value}<br/>`;
});
return result;
}
},
xAxis: {
type: 'category'
},
yAxis: {},
series: [
{
name: 'Series A',
data: [[3.4, 4.5, 15, 43],[4.2, 2.3, 20, 91]],
type: 'line'
},
{
name: 'Series B',
data: [[10.8, 9.5, 30, 18],[7.2, 8.8, 18, 57]],
type: 'bar'
}
]
};
```
此代码片段展示了两个不同类型的序列——折线图和柱状图,并且利用了 `formatter` 方法来自定义工具提示的内容结构,从而能够同时展现各条记录中的所有字段值.
阅读全文
相关推荐


















