在 ECharts 中,可以通过配置 tooltip 的 position 属性来设置提示框浮层的位置。以下是一个例子,演示如何设置 Grid 组件以及提示框浮层的位置:
option = {
    grid: {
        left: '10%',
        right: '10%',
        bottom: '10%'
    },
    tooltip: {
        show: true,
        trigger: 'axis',
        position: function (point, params, dom, rect, size) {
            // point 表示鼠标位置,params 表示触发提示框的数据信息,dom 表示提示框的 DOM 对象,rect 表示容器的位置,size 表示容器的尺寸
            var x = point[0];  // 获取鼠标横坐标
            var y = point[1];  // 获取鼠标纵坐标
            var width = size.contentSize[0];  // 获取提示框内容的宽度
            var height = size.contentSize[1];  // 获取提示框内容的高度

            // 自定义计算位置
            var offsetX = 20;  // 横向偏移量
            var offsetY = 20;  // 纵向偏移量

            var newX = x + offsetX;
            var newY = y - offsetY;

            // 防止提示框超出容器边界
            if (newX + width > rect.width) {
                newX = rect.width - width;
            }

            if (newY + height > rect.height) {
                newY = rect.height - height;
            }

            return [newX, newY];
        },
        axisPointer: {
            type: 'line',
            lineStyle: {
                color: 'red',
                width: 2,
                type: 'dashed'
            },
            label: {
                show: true,
                precision: 2,
                formatter: '{value} units',
                backgroundColor: 'rgba(255, 255, 255, 0.8)',
                borderColor: '#999',
                borderWidth: 1,
                padding: [5, 10],
                color: '#333',
                fontSize: 12,
                fontFamily: 'Arial',
                fontWeight: 'bold',
                fontStyle: 'italic',
                lineHeight: 1.5,
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.3)'
            },
            shadowStyle: {
                color: 'rgba(0, 0, 0, 0.3)',
                shadowBlur: 10,
                shadowOffsetX: 3,
                shadowOffsetY: 3
            }
        }
    },
    xAxis: {
        type: 'category',
        data: ['Category1', 'Category2', 'Category3', 'Category4', 'Category5']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'Series1',
            type: 'line',
            data: [5, 20, 36, 10, 10]
        }
    ]
};

在上述配置中,position 属性用于自定义计算提示框浮层的位置。通过设置 offsetX 和 offsetY 控制横向和纵向的偏移量,确保提示框在鼠标位置附近。然后,通过检查提示框是否超出容器边界,进行相应的调整。

请根据实际需求调整计算逻辑和偏移量,以满足你的要求。


转载请注明出处:http://www.zyzy.cn/article/detail/5152/ECharts