自定义 Echarts 图表悬浮框的位置

由于项目需求，悬浮框内容较多，会出现悬浮框(tooltip)很长或者很宽的现象，而太长了，就会被 Echarts 溢出隐藏了，所以需要自定义定位需求

需求描述：鼠标悬浮在左侧某一个点时，悬浮框悬停在点的右侧；鼠标悬停在右侧某一个点时，悬浮框悬停在点的左侧。

首先明确一点，我们需要借助 tooltip.position 属性。理想的思路是我们在回调函数中获取鼠标每次悬停的坐标，然后再判断这个坐标是否处于此容器(也就是这个Echarts图表)的左侧或者右侧；判断命中后我们再改变 tooltip 的位置，并返回给函数。

效果图：【左侧悬浮】

效果图：【右侧悬浮】

效果图：【溢出显示】

// 关健代码
tooltip: {
    position: function (position) {
        let dom = document.getElementById('chartDom');
        if (dom) {
            // 获取容器的宽度
            let chartsWidth = dom.offsetWidth;
            // 判断悬停点落在容器的哪测
            if (position[0] < (chartsWidth / 2)) {
                position[0] = position[0];
            } else {
                position[0] = position[0] - 130;
            }
        }
        return [position[0], position[1]];
    }    
}