echarts的自定义tooltip居中展示

使用echarts的时候，tooltip位置设置

echarts画折线图tooltip 动态设置位置

你好！ 我们在使用echarts的时候经常会要求点击areaStyle的时候展示tooltip，但是我们查看echarts官方文档，发现tooltip只可以设置如下位置：
‘inside’

鼠标所在图形的内部中心位置，只在 trigger 为’item’的时候有效。

‘top’

鼠标所在图形上侧，只在 trigger 为’item’的时候有效。

‘left’

鼠标所在图形左侧，只在 trigger 为’item’的时候有效。

‘right’

鼠标所在图形右侧，只在 trigger 为’item’的时候有效。

‘bottom’

鼠标所在图形底侧，只在 trigger 为’item’的时候有效。

或者
Array

通过数组表示提示框浮层的位置，支持数字设置绝对位置，百分比设置相对位置。

Function

回调函数，格式如下：

(point: Array, params: Object|Array., dom: HTMLDomElement, rect: Object, size: Object) => Array
参数：
point: 鼠标位置，如 [20, 40]。
params: 同 formatter 的参数相同。
dom: tooltip 的 dom 对象。
rect: 只有鼠标在图形上时有效，是一个用x, y, width, height四个属性表达的图形包围盒。
size: 包括 dom 的尺寸和 echarts 容器的当前尺寸，例如：{contentSize: [width, height], viewSize: [width, height]}。

这些参数可以设置展示在坐标轴的上下左右或者鼠标点击位置，或者相对点击的位置。

但是有些时候需求就需要点击的不管在什么位置，tooltip必须在x轴展示的选择节点选中线正上，哪我们怎么设置呢？

##一些思考

我对tooltip的position参数做了配置，position 参数会返回这些：

position: (point: any, params: any, dom: HTMLElement, rect: Object, size: any)
1:point: 鼠标位置，如 [20, 40]。
2:params: 同 formatter 的参数相同。
3:dom: tooltip 的 dom 对象。
4:rect: 只有鼠标在图形上时有效，是一个用x, y, width, height四个属性表达的图形包围盒。
5:size: 包括 dom 的尺寸和 echarts 容器的当前尺寸，例如：{contentSize: [width, height], viewSize: [width, height]}。

我对echarts折线图做了各个版本手机分辨率测试，从宽度280对Galaxy Fold到414的iphone xr 都做了测试，基本没有什么误差

这是在iphone xr上表现

这是在Galaxy Fold上表现：

我看了下其他各种分辨率都能适配到99%，基本无误差，主要在与设置弹出层的x的位置：
任何纯理论都不与实地试验，于是我找了4中比较有代表性的设备，
分辨率(宽)分别是390，414，375，360
我们可以把平米看成100%，6个月就看x轴在屏幕百分比，我试过了4个分辨率手机，得出了结论：
6个月均分的第一个月永远在屏幕8%左右，最后一个月在85%左右，我们均分下就是每个区域在屏幕位置如下：
15.8%-31.4%-47%-62.6%-78.2-94.8%
15.8%以下是第一个月-31.4%以下第二个月-47%以此类推-62.6%-78.2-94.8%
然后我们需要在点击的x轴的左边一半和右边一半都需要定位在当前月份，比如说我们要展示在10月正上方，点击在9.5-10.5区间都需要展示在10月正上方，所以我们可以在position参数上做文章，根据position的第一个参数point鼠标点击的位置，如果在屏幕位置<15.8%就设置8%位置展示tooltip，但是在实际使用过程中发现tooltip总是会：

向右偏移
这是因为tooltip自己有宽度，所以我们需要在最后百分比基础上减掉1/2的宽度就是： window.innerWidth * 0.08-size.contentSize[0]/2

 position: (point: any, params: any, dom: HTMLElement, rect: Object, size: any) => {
            // 固定在顶部
            var x = 0; // x坐标位置
            var y = 0; // y坐标位置
            if(point[0]< window.innerWidth * 0.158){
              x = window.innerWidth * 0.08
            }else if(point[0]< window.innerWidth * (0.158+0.156)){
              x = window.innerWidth * (0.08+0.156)
            }else if(point[0]< window.innerWidth * (0.158+0.156 * 2)){
              x = window.innerWidth * (0.08+0.156*2)
            }else if(point[0]< window.innerWidth * (0.158+0.156 * 3)){
              x = window.innerWidth * (0.08+0.156*3)
            }else if(point[0]< window.innerWidth * (0.158+0.156 * 4)){
              x = window.innerWidth * (0.08+0.156*4)
            }else if(point[0]< window.innerWidth * (0.158+0.156 * 5)){
              x = window.innerWidth * (0.08+0.156*5)
            }
            return [x-size.contentSize[0]/2, point[1] - 70];
          },

完美解决产品需求每次都指到选中的x轴正中心。
所以大家有什么问题可以留言沟通。