echarts tooltip自適應(yīng)寬高讓提示框適應(yīng)不同屏幕尺寸demo
導(dǎo)讀
- "定制化提示框樣式,讓你的數(shù)據(jù)更醒目"
- "優(yōu)化提示框位置,讓信息一目了然"
- "滾動條功能,輕松查看大量數(shù)據(jù)"
- "個性化文字顏色,讓你的數(shù)據(jù)更加突出"
- "自適應(yīng)寬高,讓提示框適應(yīng)不同屏幕尺寸"
demo
tooltip: { trigger: "axis", backgroundColor: "#54AEEC", //設(shè)置背景圖片 rgba格式 color: "#fff", height: "50px", padding: [15, 15], enterable: true,//滾動條 extraCssText: "max-width:60%;max-height:83%; overflow: auto; ",//滾動條 textStyle: { color: "white", //設(shè)置文字顏色 padding: 10, fontSize: 14 }, //改變提示框的位置 不超出屏幕顯示 position: function(point, params, dom, rect, size) { //其中point為當(dāng)前鼠標(biāo)的位置, //size中有兩個屬性:viewSize和contentSize,分別為外層div和tooltip提示框的大小 // 鼠標(biāo)坐標(biāo)和提示框位置的參考坐標(biāo)系是:以外層div的左上角那一點(diǎn)為原點(diǎn),x軸向右,y軸向下 // 提示框位置 var x = 0; // x坐標(biāo)位置 var y = 0; // y坐標(biāo)位置 // 當(dāng)前鼠標(biāo)位置 var pointX = point[0]; var pointY = point[1]; // 提示框大小 var boxWidth = size.contentSize[0]; var boxHeight = size.contentSize[1]; // boxWidth > pointX 說明鼠標(biāo)左邊放不下提示框 if (boxWidth > pointX) { x = 5; } else { // 左邊放的下 x = pointX - boxWidth; } // boxHeight > pointY 說明鼠標(biāo)上邊放不下提示框 if (boxHeight > pointY) { y = 5; } else { // 上邊放得下 y = pointY - boxHeight; } return [x, y]; } },
以上就是echarts tooltip自適應(yīng)寬高讓提示框適應(yīng)不同屏幕尺寸demo的詳細(xì)內(nèi)容,更多關(guān)于echarts tooltip自適應(yīng)寬高的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
詳解用webpack把我們的業(yè)務(wù)模塊分開打包的方法
本篇文章主要介紹了用webpack把我們的業(yè)務(wù)模塊分開打包的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07在knockoutjs 上自己實現(xiàn)的flux(實例講解)
下面小編就為大家分享一篇在knockoutjs 上自己實現(xiàn)的flux方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12借助FileReader實現(xiàn)將文件編碼為Base64后通過AJAX上傳
這篇文章主要介紹了借助FileReader實現(xiàn)將文件編碼為Base64后通過AJAX上傳的方法,包括后端對文件數(shù)據(jù)解碼并保存的PHP代碼,需要的朋友可以參考下2015-12-12Web層改進(jìn)II-用xmlhttp 無聲息提交復(fù)雜表單
Web層改進(jìn)II-用xmlhttp 無聲息提交復(fù)雜表單...2007-01-01JS獲取本地文件并進(jìn)行網(wǎng)絡(luò)傳輸?shù)拇a詳解
在web中如想要獲取用戶計算機(jī)上的文件我們通常會用到的方法是通過一個表單元素<input type="file">操作用戶選擇的文件,本文小編給大家介紹了JS獲取本地文件并進(jìn)行網(wǎng)絡(luò)傳輸?shù)姆椒?需要的朋友可以參考下2024-08-08js下將阿拉伯?dāng)?shù)字每三位一逗號分隔(如:15000000轉(zhuǎn)化為15,000,000)
這篇文章主要介紹了js下將阿拉伯?dāng)?shù)字每三位一逗號分隔(如:15000000轉(zhuǎn)化為15,000,000),需要的朋友可以參考下2014-06-06