echarts中 移动到上tooltip如何右侧的悬浮显示文字
时间: 2024-02-22 09:56:01 浏览: 102
element中利用tooltip实现文字超出框悬浮显示
您可以在 Echarts 中使用 tooltip.trigger 参数设置触发类型为 'axis',然后通过 tooltip.axisPointer.type 参数设置为 'shadow' 来使得鼠标移动到图表上时,能够显示相应的阴影指示器。接着,您可以在 tooltip.formatter 参数中编写自定义的 tooltip 文字内容,将需要显示的文字放在一个 <div> 标签内,并设置该标签的样式 position 为 'fixed',left 和 top 分别为当前鼠标位置的横坐标和纵坐标,使其能够悬浮在鼠标附近。以下是一个示例代码:
```javascript
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function (params) {
var text = params[0].name + "<br>" + params[0].seriesName + ": " + params[0].data;
return '<div style="position: fixed; left: ' + params[0].event.event.clientX + 'px; top: ' + params[0].event.event.clientY + 'px;">' + text + '</div>';
}
},
// 其他配置项
// ...
};
```
阅读全文