echarts在图表提示框显示不全的解决方法

原创已于 2022-04-12 14:25:27 修改 · 997 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #echarts

于 2022-04-12 10:37:22 首次发布

echarts 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Echarts图表中使用JavaScript自定义Tooltip的位置，通过设置`position`函数，根据鼠标坐标和提示框大小调整最佳显示效果，避免提示框超出屏幕或覆盖数据点。

情况如下：
请添加图片描述

option中的tooltip增加postion属性
废话不多说直接上代码

let echart = this.$echarts.init(document.getElementById('bar'))
echart.setOption({
        tooltip: {
          position: function (point, params, dom, rect, size) {
            // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
            // 提示框位置
            var x = 0; // x坐标位置
            var y = 0; // y坐标位置

            // 当前鼠标位置
            var pointX = point[0];
            var pointY = point[1];

            // 外层div大小
            // var viewWidth = size.viewSize[0];
            // var viewHeight = size.viewSize[1];

            // 提示框大小
            var boxWidth = size.contentSize[0];
            var boxHeight = size.contentSize[1];

            // boxWidth > pointX 说明鼠标左边放不下提示框
            if (boxWidth > pointX) {
              x = 5; // 自己定个x坐标值，以防出屏
              y -= 15; // 防止点被覆盖住，可根据情况自行调节
            } else { // 左边放的下
              x = pointX - boxWidth - 15;
            }

            // boxHeight > pointY 说明鼠标上边放不下提示框
            if (boxHeight + 20 > pointY) {
              y = pointY + 15;
            } else if (boxHeight > pointY) {
              y = 5;
            } else { // 上边放得下
              y += pointY - boxHeight;
            }
            return [x, y];
          },
        },
})

改完之后的效果
请添加图片描述