echart，悬浮提示栏跟随鼠标位置显示

禾苗种树

于 2024-03-29 10:30:30 发布

阅读量390

点赞数 1

文章标签：前端 javascript html echarts

本文链接：https://blog.csdn.net/m0_45011929/article/details/137137191

版权

文章讨论了如何在ECharts中调整图表提示框的位置，以便在左侧菜单和右侧显示区域交互时避免被遮挡，方法是利用鼠标坐标作为position属性的值。

摘要由CSDN通过智能技术生成

问题：由于页面是左侧全局菜单栏，右侧是显示区域，图表在右侧显示时，如果点击最左侧的图表，他的提示框会被遮盖，所以想要调节下提示框的位置
知识点：其实很简单就是position使用当前鼠标的坐标点（echart有这个的返回参数值）就行
代码

tooltip: {
                trigger: 'item',
                // formatter: '{b}：{c}%',
                formatter: '{b} : {c} ({d}%)',
                // position:'bottom',
                // extraCssText: 'z-index:999999',
                position: function (point, params, dom, rect, size) {
                	// 提示框跟随鼠标的位置显示
                		// point: 鼠标位置，如 [20, 40]
                    return [point[0], point[1]];
                    
                  }
            },