echarts tooltip自適應(yīng)寬高讓提示框適應(yīng)不同屏幕尺寸demo
導(dǎo)讀
- "定制化提示框樣式,讓你的數(shù)據(jù)更醒目"
- "優(yōu)化提示框位置,讓信息一目了然"
- "滾動(dòng)條功能,輕松查看大量數(shù)據(jù)"
- "個(gè)性化文字顏色,讓你的數(shù)據(jù)更加突出"
- "自適應(yīng)寬高,讓提示框適應(yīng)不同屏幕尺寸"
demo
tooltip: {
trigger: "axis",
backgroundColor: "#54AEEC", //設(shè)置背景圖片 rgba格式
color: "#fff",
height: "50px",
padding: [15, 15],
enterable: true,//滾動(dòng)條
extraCssText: "max-width:60%;max-height:83%; overflow: auto; ",//滾動(dòng)條
textStyle: {
color: "white", //設(shè)置文字顏色
padding: 10,
fontSize: 14
},
//改變提示框的位置 不超出屏幕顯示
position: function(point, params, dom, rect, size) {
//其中point為當(dāng)前鼠標(biāo)的位置,
//size中有兩個(gè)屬性: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 說(shuō)明鼠標(biāo)左邊放不下提示框
if (boxWidth > pointX) {
x = 5;
} else {
// 左邊放的下
x = pointX - boxWidth;
}
// boxHeight > pointY 說(shuō)明鼠標(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)寬高的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
layui radio點(diǎn)擊事件實(shí)現(xiàn)input顯示和隱藏的例子
今天小編就為大家分享一篇layui radio點(diǎn)擊事件實(shí)現(xiàn)input顯示和隱藏的例子,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
JS自定義滾動(dòng)條效果簡(jiǎn)單實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了JS自定義滾動(dòng)條效果的簡(jiǎn)單實(shí)現(xiàn)代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07
weex slider實(shí)現(xiàn)滑動(dòng)底部導(dǎo)航功能
這篇文章主要為大家詳細(xì)介紹了weex slider實(shí)現(xiàn)滑動(dòng)底部導(dǎo)航功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08
js實(shí)現(xiàn)帶簡(jiǎn)單彈性運(yùn)動(dòng)的導(dǎo)航條
本篇文章主要分享了js實(shí)現(xiàn)帶簡(jiǎn)單彈性運(yùn)動(dòng)導(dǎo)航條的示例代碼,具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-02-02
微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕修改字體顏色功能【附demo源碼下載】
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊按鈕修改字體顏色功能,涉及微信小程序wx:for循環(huán)讀取data數(shù)值及事件綁定修改元素屬性相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
如何利用Three.js實(shí)現(xiàn)跳一跳小游戲
最近在公司寫H5的3D游戲,選擇了ThreeJS去做,做的過(guò)程中遇到了很多問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于如何利用Three.js實(shí)現(xiàn)跳一跳小游戲的相關(guān)資料,需要的朋友可以參考下2022-04-04

