echarts tooltip自適應寬高讓提示框適應不同屏幕尺寸demo
更新時間:2023年10月10日 10:39:38 作者:huyouooo
這篇文章主要為大家介紹了echarts tooltip自適應寬高讓提示框適應不同屏幕尺寸,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
導讀
- "定制化提示框樣式,讓你的數據更醒目"
- "優(yōu)化提示框位置,讓信息一目了然"
- "滾動條功能,輕松查看大量數據"
- "個性化文字顏色,讓你的數據更加突出"
- "自適應寬高,讓提示框適應不同屏幕尺寸"
demo
tooltip: { trigger: "axis", backgroundColor: "#54AEEC", //設置背景圖片 rgba格式 color: "#fff", height: "50px", padding: [15, 15], enterable: true,//滾動條 extraCssText: "max-width:60%;max-height:83%; overflow: auto; ",//滾動條 textStyle: { color: "white", //設置文字顏色 padding: 10, fontSize: 14 }, //改變提示框的位置 不超出屏幕顯示 position: function(point, params, dom, rect, size) { //其中point為當前鼠標的位置, //size中有兩個屬性:viewSize和contentSize,分別為外層div和tooltip提示框的大小 // 鼠標坐標和提示框位置的參考坐標系是:以外層div的左上角那一點為原點,x軸向右,y軸向下 // 提示框位置 var x = 0; // x坐標位置 var y = 0; // y坐標位置 // 當前鼠標位置 var pointX = point[0]; var pointY = point[1]; // 提示框大小 var boxWidth = size.contentSize[0]; var boxHeight = size.contentSize[1]; // boxWidth > pointX 說明鼠標左邊放不下提示框 if (boxWidth > pointX) { x = 5; } else { // 左邊放的下 x = pointX - boxWidth; } // boxHeight > pointY 說明鼠標上邊放不下提示框 if (boxHeight > pointY) { y = 5; } else { // 上邊放得下 y = pointY - boxHeight; } return [x, y]; } },
以上就是echarts tooltip自適應寬高讓提示框適應不同屏幕尺寸demo的詳細內容,更多關于echarts tooltip自適應寬高的資料請關注腳本之家其它相關文章!
相關文章
借助FileReader實現將文件編碼為Base64后通過AJAX上傳
這篇文章主要介紹了借助FileReader實現將文件編碼為Base64后通過AJAX上傳的方法,包括后端對文件數據解碼并保存的PHP代碼,需要的朋友可以參考下2015-12-12js下將阿拉伯數字每三位一逗號分隔(如:15000000轉化為15,000,000)
這篇文章主要介紹了js下將阿拉伯數字每三位一逗號分隔(如:15000000轉化為15,000,000),需要的朋友可以參考下2014-06-06