自定義Echarts折線圖中懸浮框的位置

　　在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座標的數組。