echarts的tooltip同时展示多个提示框
时间: 2023-08-11 21:55:55 浏览: 731
JS弹出层对话框,Tooltip提示,Msg消息框
要在 ECharts 中同时展示多个 tooltip 提示框,您可以使用 tooltip 的 axisPointer 配置项,并设置为多个轴指示器类型。每个轴指示器类型对应一个 tooltip 提示框。
下面是一个示例,展示了同时展示多个 tooltip 提示框的配置:
```javascript
option = {
// 其他配置项...
tooltip: {
trigger: 'axis',
axisPointer: {
type: ['line', 'cross'], // 设置多个轴指示器类型
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],
// 其他配置项...
}
]
};
```
在上述代码中,我们通过 axisPointer 的 type 属性设置了两个轴指示器类型:'line' 和 'cross'。这样,当鼠标移动到图表上时,会同时展示两个 tooltip 提示框,分别对应这两个轴指示器类型。
在 tooltip 的 formatter 函数中,我们遍历 params 参数,获取每个系列的名称和对应的数值,并将它们拼接到一个字符串中。最后,返回这个字符串作为 tooltip 的内容。
这样,当鼠标悬停在图表上时,会同时显示多个 tooltip 提示框,展示各个系列的名称和数值。
您可以根据实际需求和图表配置进行适当的调整。
阅读全文