自定义Echarts折线图中悬浮框的位置

版权声明：转载请声明原地址 https://blog.csdn.net/dk2290/article/details/82260044

在Echarts3的折线图的使用过程中，想使初始化出来的图表更人性化，就比如说有这么个需求，在Echarts折线图中，鼠标悬浮在左侧某一个点时，悬浮框悬停在点的右侧；鼠标悬停在右侧某一个点时，悬浮框悬停在点的左侧。

下面是具体实现思路：

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

OK。我们先放Echarts官方API中对tooltip属性的说明看看：

ooltip.position
类型
Array, Function
默认值
null
位置指定，传入{Array}，如[x, y]， 固定位置[x, y]；传入{Function}，如function([x, y]) {return [newX,newY]}，默认显示坐标为输入参数，用户指定的新坐标为输出返回。

现在提供关键代码部分：

tooltip : {
        textStyle:{
            align:'left'
        },
        trigger: 'item',
        //自定义echarts tooltip的显示位置，当鼠标移动到图表的左部时tip显示在右边，当鼠标移动到图表的右部时tip显示在左边
        position:function(position){
            //获取容器的宽度
            var chartsWidth = $("#threadtrend").width();
            //判断悬停点落在容器的哪测
            if(position[0] < (chartsWidth/2)){
                 position[0] = position[0];
            }else{
              position[0] = position[0] - 130;
            }
            return [position[0], position[1]];
        },
       formatter:'日期：{b0}'+'<br>'+'名称：{a0}'+'<br>'+'病毒个数：{c0}个'
    }

效果图：
左侧时：

右侧时：

上面的代码已经很详细了，我再稍微解释下参数的含义。首先position这个参数代表的是鼠标移动时的坐标点。position[0]代表此坐标点的X坐标，position[1]代表Y坐标。
最后返回的参数也必须类似position一样，是一个包含X坐标和Y坐标的数组。