echarts的tooltip展示多个提示框
时间: 2023-08-11 20:55:55 浏览: 209
要在 ECharts 中展示多个 tooltip 提示框,您可以使用多个 series 并设置各自的 tooltip 配置。每个 series 都可以单独控制自己的 tooltip 显示。
下面是一个示例,展示了两个 series 的 tooltip:
```javascript
option = {
// 其他配置项...
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
color: '#999999',
width: 1
}
},
formatter: function(params) {
var tooltips = '';
for (var i = 0; i < params.length; i++) {
var seriesName = params[i].seriesName;
var value = params[i].value;
tooltips += seriesName + ': ' + value + '<br/>';
}
return tooltips;
}
},
series: [
{
name: 'Series 1',
type: 'line',
data: [10, 20, 30, 40, 50],
// 其他配置项...
},
{
name: 'Series 2',
type: 'line',
data: [100, 200, 300, 400, 500],
// 其他配置项...
}
]
};
```
在上述代码中,我们定义了两个 series,每个 series 都有自己的数据和配置。然后,在 tooltip 的 formatter 函数中,我们遍历 params 参数,获取每个系列的名称和对应的数值,并将它们拼接到一个字符串中。最后,返回这个字符串作为 tooltip 的内容。
这样,当鼠标悬停在图表上时,会显示两个 tooltip 提示框,分别展示每个系列的名称和数值。
您可以根据自己的需求和实际数据进行相应的调整。
阅读全文