echarts —— tooltip 鼠標懸浮顯示提示框屬性

最近一直在使用echarts，固然也被其中的各類屬性整的頭大，記錄一下其中遇到的問題。javascript

tooltip：鼠標懸浮時顯示的提示框。java

今天想要記錄的是【自定義提示框的內容】，以下圖，鼠標懸浮時提示框內顯示的內容格式爲：年份類型 <br> 裝機容量：數據單位<br> 增加率：百分比，那麼如何才能自定義出來我們想要的效果呢，代碼以下：echarts

tooltip: {
    trigger: 'axis',
    axisPointer: {
        type: 'cross',
        crossStyle: {
            color: '#999'
        }
    },
    formatter: function (params) {
        // console.log(params); // 當咱們想要自定義提示框內容時，能夠先將鼠標懸浮的數據打印出來，而後根據需求提取出來便可
        let firstParams = params[0];
        let sndParams = params[1];
        return firstParams.name + '  ' + firstParams.seriesName + '<br>' + '裝機：' + firstParams.data + ' 億千瓦<br>增加率：' + sndParams.data +' %';
    }
},

　　如代碼註釋中寫到的同樣，若是咱們想要自定義鼠標懸浮時提示框的內容，那麼咱們就能夠先把數據打印出來而後根據需求提取便可。ide

　　PS：若是有人想要作如上圖同樣點擊圖例互斥的效果，能夠經過這個屬性：selectedMode: 'single'函數

legend: {
    top: '2%',
    data:['所有','火電','水電','風電', '光伏', '核電', '電源結構變化'],
    textStyle: { color: '#fff' },
    selectedMode: 'single'  // 只展現一條數據，參數可有：single、multiple、false
},

　　最後，網上搜到一篇介紹tooltip詳解的文章，學習一下：學習

參考連接：echarts 鼠標放上去顯示提示框屬性詳解！動畫

tooltip ={                                  //提示框組件
    trigger: 'item',                        //觸發類型,'item'數據項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用。 'axis'座標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。
    triggerOn:"mousemove",                  //提示框觸發的條件,'mousemove'鼠標移動時觸發。'click'鼠標點擊時觸發。'mousemove|click'同時鼠標移動和點擊時觸發。'none'不在 'mousemove' 或 'click' 時觸發
    showContent:true,                       //是否顯示提示框浮層
    alwaysShowContent:true,                 //是否永遠顯示提示框內容
    showDelay:0,                            //浮層顯示的延遲，單位爲 ms
    hideDelay:100,                          //浮層隱藏的延遲，單位爲 ms
    enterable:false,                        //鼠標是否可進入提示框浮層中
    confine:false,                          //是否將 tooltip 框限制在圖表的區域內
    transitionDuration:0.4,                 //提示框浮層的移動動畫過渡時間，單位是 s,設置爲 0 的時候會緊跟着鼠標移動
    position:['50%', '50%'],                //提示框浮層的位置，默認不設置時位置會跟隨鼠標的位置,[10, 10],回掉函數，inside鼠標所在圖形的內部中心位置，top、left、bottom、right鼠標所在圖形上側，左側，下側，右側，
    formatter:"{b0}: {c0}<br />{b1}: {c1}", //提示框浮層內容格式器，支持字符串模板和回調函數兩種形式,模板變量有 {a}, {b}，{c}，{d}，{e}，分別表示系列名，數據名，數據值等
    backgroundColor:"transparent",          //標題背景色
    borderColor:"#ccc",                     //邊框顏色
    borderWidth:0,                          //邊框線寬
    padding:5,                              //圖例內邊距，單位px  5  [5, 10]  [5,10,5,10]
    textStyle:mytextStyle,                  //文本樣式
};