快捷導(dǎo)航

echarts提示框tooltip被遮擋的解決辦法分享

更新時間：2023年08月05日 10:17:16 作者：fml海棠

這篇文章主要給大家介紹了關(guān)于echarts提示框tooltip被遮擋的解決辦法, 在制作圖表中,發(fā)現(xiàn)有時候tooltip會被線條遮擋或者被柱子折線遮擋,這種情況會偶爾出現(xiàn),需要的朋友可以參考下

解決辦法：

一、tooltip. confine

tooltip: {
   confine: true	//是否將 tooltip 框限制在圖表的區(qū)域內(nèi)。
},

這樣可以限制提示框在圖表的區(qū)域內(nèi)。

confine

二、tooltip. appendToBody

tooltip: {
   appendToBody: true
},

默認(rèn)值是 false。false 表示，tooltip 的 DOM 節(jié)點(diǎn)會被添加為本圖表的 DOM container 的一個子孫節(jié)點(diǎn)。但是這種方式導(dǎo)致，如果本圖表的 DOM container 的祖先節(jié)點(diǎn)有設(shè)置 overflow: hidden，那么當(dāng) tooltip 超出 container 范圍使可能被截?cái)?。設(shè)置為true將提示框的 DOM 節(jié)點(diǎn)添加為 HTML 的的子節(jié)點(diǎn)，這樣就可以無視容器的超出隱藏了。

appendToBody

三、其他

還有tooltip.extraCssText 可以為提示框設(shè)置樣式，例如添加z-index等。

個人覺得沒有前兩種好用。

附：ECharts 提示框（tooltip）

tooltip: {
    show: true,    // 是否顯示提示框組件
    trigger: 'axis',    // 觸發(fā)類型（'item'，數(shù)據(jù)項(xiàng)圖形觸發(fā)，主要在散點(diǎn)圖，餅圖等無類目軸的圖表中使用；'axis'，坐標(biāo)軸觸發(fā)，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用；'none'，不觸發(fā)。）
    axisPointer: {
        type: 'cross',    // 指示器類型（'line' 直線指示器；'shadow' 陰影指示器；'none' 無指示器；'cross' 十字準(zhǔn)星指示器。）
        snap: false,    // 坐標(biāo)軸指示器是否自動吸附到點(diǎn)上。默認(rèn)自動判斷。
        label: {
            margin: 10,    // label 距離軸的距離
            color: '#FFF',     // 文字的顏色
            fontStyle: 'normal',    // 文字字體的風(fēng)格（'normal'，無樣式；'italic'，斜體；'oblique'，傾斜字體） 
            fontWeight: 'normal',    // 文字字體的粗細(xì)（'normal'，無樣式；'bold'，加粗；'bolder'，加粗的基礎(chǔ)上再加粗；'lighter'，變細(xì)；數(shù)字定義粗細(xì)也可以，取值范圍100至700）
            fontSize: '20',    // 文字字體大小
            lineHeight: '50',    // 行高 
            padding = [5, 7, 5, 7],    // 內(nèi)邊距，單位px 
            backgroundColor = 'auto',    // 文本標(biāo)簽的背景顏色
        },
        animation: true,     // 是否開啟動畫
        animationDuration: 1000,     // 初始動畫時長
        animationDurationUpdate: 200,    // 數(shù)據(jù)更新動畫的時長
    }
    showContent: true,     // 是否顯示提示框浮層，默認(rèn)顯示
    alwaysShowContent: true,     // 是否永遠(yuǎn)顯示提示框內(nèi)容，默認(rèn)情況下在移出可觸發(fā)提示框區(qū)域后一定時間后隱藏
    triggerOn: 'mousemove|click',    // 提示框觸發(fā)的條件（'mousemove'，鼠標(biāo)移動時觸發(fā)；'click'，鼠標(biāo)點(diǎn)擊時觸發(fā)；'mousemove|click'，同時鼠標(biāo)移動和點(diǎn)擊時觸發(fā)；'none'，不在 'mousemove' 或 'click' 時觸發(fā)）
    confine: true,    // 是否將 tooltip 框限制在圖表的區(qū)域內(nèi)
    backgroundColor: 'rgba(50,50,50,0.7)',    // 提示框浮層的背景顏色
    padding: 5,    // 提示框浮層內(nèi)邊距，單位px
    textStyle: {
        color: '#FFF',     // 文字的顏色
        fontStyle: 'normal',    // 文字字體的風(fēng)格（'normal'，無樣式；'italic'，斜體；'oblique'，傾斜字體） 
        fontWeight: 'normal',    // 文字字體的粗細(xì)（'normal'，無樣式；'bold'，加粗；'bolder'，加粗的基礎(chǔ)上再加粗；'lighter'，變細(xì)；數(shù)字定義粗細(xì)也可以，取值范圍100至700）
        fontSize: '20',    // 文字字體大小
        lineHeight: '50',    // 行高 
    },
    formatter: function (params) {
        var result = ''
        var dotHtml = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:30px;height:30px;background-color:#F1E67F"></span>'    // 定義第一個數(shù)據(jù)前的圓點(diǎn)顏色
        var dotHtml2 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:30px;height:30px;background-color:#2BA8F1"></span>'    // 定義第二個數(shù)據(jù)前的圓點(diǎn)顏色
        result += params[0].axisValue + "</br>" + dotHtml + ' 數(shù)據(jù)名稱 ' + params[0].data + "</br>" + dotHtml2 + ' 數(shù)據(jù)名稱 ' + params[1].data;
        return result
    }
}