設置Echarts鼠標懸浮樣式


在option下 tooltip內添加以下代碼:

(本文在后台進行傳值 也就是其中的viewstate[])

 tooltip: {
                        show: true,
                        trigger: 'axis',
                        //show: true,   //default true
                        showDelay: 0,//顯示延時,添加顯示延時可以避免頻繁切換
                        hideDelay: 50,//隱藏延時
                        transitionDuration: 0,//動畫變換時長
                        backgroundColor: 'rgba(0,0,0,0.7)',//背景顏色(此時為默認色)
                        borderRadius: 8,//邊框圓角
                        padding: 10,    // [5, 10, 15, 20] 內邊距
                        position: function (p) {
                            // 位置回調
                            // console.log && console.log(p);
                            return [p[0] + 10, p[1] - 10];
                        },
                        formatter: function (params, ticket, callback) {
                            console.log(params)
                            var res = "班級" + ' : ' + params[0].name + "班<br/>";
                            for (var i = 0, l = params.length; i < l; i++) {
                                res += '<br/>' + params[i].seriesName + ' : ' + params[i].value + "<%=ViewState["unit"]%>";//鼠標懸浮顯示的字符串內容
                            }
                            setTimeout(function () {
                                // 僅為了模擬異步回調
                                callback(ticket, res);
                            }, 1000)
                            return 'loading...';
                        }
                        //formatter: "Template formatter: <br/>{b}<br/>{a}:{c}<br/>{a1}:{c1}"
                    },

如圖所示: 

 

希望對小伙伴們有幫助!0.0

PS:使柱形圖的每個圖形顯示隨機色:

itemStyle: { normal: {color:function (value){return \"#\"+(\"00000\"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6); }},},

  在series內添加上面代碼即可。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM