Echarts实战案例代码(50)：tooltip组件提示框被div折叠的解决方案

1. 设置跟随鼠标位置参数

        tooltip: {
            trigger: 'axis',
               //设置其显示位置 其中p为当前鼠标的位置
            position: function (p) {
                return [p[0] - 40, p[1] - 300];
            }
        },

2.confine属性

        tooltip: {
            trigger: 'axis',
            confine:true,//是否将 tooltip 框限制在图表的区域内,当图表外层的 dom 被设置为 'overflow: hidden'，或者移动端窄屏，导致 tooltip 超出外界被截断时，此配置比较有用。
            }
        },

3.设置所在容器的显示层级

.rim2 {
    position: relative;
    background: url("../images/boder_bg2.png");
    background-size: 100% 100%;
    padding: 10px;
    margin-bottom: 15px;
    z-index: 99;//提高层级
}

4.tooltips换行显示

在这里插入代码片

Done !