echart的tooltip

 標題想要自定義鼠標懸浮圖標懸浮時的提示內容時

tooltip

提示框組件
   trigger   觸發類型。可選:'item'數據項圖形觸發,主要在散點圖,餅圖等無類目軸的圖表中使用。'axis'座標軸觸發,主要在柱狀圖,折線圖等會使用類目軸的圖表中使用。在 ECharts 2.x 中只支持類目軸上使用 axis trigger,在 ECharts 3 中支持在直角座標系和極座標系上的所有類型的軸。並且可以通過 axisPointer.axis 指定座標軸。'none'什麼都不觸發。

 formatter  提示框浮層內容格式器,支持字符串模板和回調函數兩種形式。echart tooltip

只有一個圖形時

tooltip : {
            trigger: 'axis',
formatter: function (tipData) {
            return tipData[0].name + '</br>'
                     + '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + tipData[0].color + '"></span>' + tipData[0].seriesName + ':'+'&nbsp'+'&nbsp'+tipData[0].data+'萬'
                 }
            
        },

有多個圖形時

formatter: function (tipData) {
            return tipData[0].name + '</br>'
                     + '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + tipData[0].color + '"></span>' + tipData[0].seriesName + ':'+'&nbsp'+'&nbsp'+tipData[0].data+'萬'+'</br>'
                     + '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + tipData[1].color + '"></span>' + tipData[1].seriesName + ':'+'&nbsp'+'&nbsp'+tipData[1].data+'萬'+'</br>'
                 }
    }

截圖

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章