echarts如何使tooltip固定悬浮在鼠标右侧
时间: 2023-08-18 08:23:21 浏览: 168
可以通过监听`mousemove`事件,手动设置tooltip的位置,并将`trigger`属性设置为`none`来使tooltip固定悬浮在鼠标右侧。具体代码如下:
```javascript
option = {
// ...
tooltip: {
trigger: 'none', // 设置trigger为none
position: [0, 0], // 初始位置为[0,0]
formatter: function(params) {
// 自定义tooltip的内容
// ...
}
},
// ...
};
myChart.on('mousemove', function(params) {
if (params.componentType === 'series') {
// 获取鼠标相对于容器的坐标
var mouseX = params.event.event.layerX || params.event.event.offsetX;
var mouseY = params.event.event.layerY || params.event.event.offsetY;
// 设置tooltip的位置为鼠标右侧
var tooltip = myChart.getModel().getComponent('tooltip');
tooltip.position = [mouseX + 10, mouseY - tooltip.getHeight() / 2];
// 显示tooltip
myChart.dispatchAction({
type: 'showTip',
seriesIndex: params.seriesIndex,
dataIndex: params.dataIndex,
});
} else {
// 隐藏tooltip
myChart.dispatchAction({
type: 'hideTip'
});
}
});
```
这样设置后,当鼠标移动到图表上时,会触发`mousemove`事件,通过获取鼠标相对于容器的坐标,手动设置tooltip的位置,并显示tooltip。当鼠标移出图表时,隐藏tooltip。这样就可以实现tooltip固定悬浮在鼠标右侧。
阅读全文