echarts 移動端豎著顯示效果實(shí)現(xiàn)
更新時(shí)間：2023年07月25日 15:04:41 作者：三水
這篇文章主要為大家介紹了echarts 移動端豎著顯示效果實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
echarts在移動端豎著顯示
（非豎屏切換）讓用戶看到更多的數(shù)據(jù)。
最終效果：
遇到的問題：
toolTip（文字）與y軸平行顯示
看過官方文檔后思路：
1、extraCssText配置屬性（未解決）
extraCssText: 'transform:rotate(90deg) !important;transform-origin: center;',
2、formtter（未解決）
formatter() {
return `<h1>6</h1>`
},以上都不行，因?yàn)閠oolTip始終會動態(tài)計(jì)算位置并生成transform: translate3d(150px, 262px, 0px);
3、搞不定父元素，就搞定子元素（解決）
解決父元素必須考慮兩個(gè)問題：位置、旋轉(zhuǎn)。
這是代碼最少的解決方案。
配置項(xiàng)：
tooltip: {
trigger: 'axis',
className: 'tp-box',
position([left, top], params, dom, rect, size) {
return { left, top };
},
},css：
::v-deep(.tp-box ) {
background-color: transparent !important;
border: none;
box-shadow: none !important;
padding: 0 !important;
& > div {
transform: rotate(90deg) !important;
transform-origin: top left;
z-index: 9999999;
box-shadow: rgb(0 0 0 / 20%) 1px 2px 10px;
background-color: rgb(255, 255, 255);
border-width: 1px;
border-radius: 4px;
color: rgb(102, 102, 102);
padding: 10px;
}
}以上就是echarts 移動端豎著顯示效果實(shí)現(xiàn)的詳細(xì)內(nèi)容，更多關(guān)于echarts 移動端豎顯的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
有提示確定與取消功能的彈出式窗的代碼...2007-04-04
uniapp開發(fā)小程序?qū)崿F(xiàn)滑動頁面控制元素的顯示和隱藏效果
這篇文章主要介紹了uniapp開發(fā)小程序?qū)崿F(xiàn)滑動頁面控制元素的顯示和隱藏效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12
需求是一個(gè)字符串，想刪除這個(gè)字符串最后一個(gè)字符，比如“1,2,3,4,5,”，刪除最后一個(gè)“,”用javascript怎么實(shí)現(xiàn)？下面給出三種方法2014-01-01
沙箱繞過"是指攻擊者利用各種方法和技術(shù)來規(guī)避或繞過應(yīng)用程序或系統(tǒng)中的沙箱,本文主要介紹了JS沙箱繞過以及競爭條件型漏洞復(fù)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2023-08-08
微信小程序獲取用戶手機(jī)號碼詳細(xì)教程(前端＋后端)
在我們開發(fā)微信小程序時(shí),獲取用戶手機(jī)號碼是常見的需求之一,這篇文章主要給大家介紹了關(guān)于微信小程序獲取用戶手機(jī)號碼的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
在實(shí)際業(yè)務(wù)場景中,我們經(jīng)常需要處理Excel文件的導(dǎo)入導(dǎo)出,本文將以React+Ant Design項(xiàng)目為例,演示如何通過xlsx庫實(shí)現(xiàn)XLSX文件的讀取與導(dǎo)出,需要的朋友可以參考下2025-12-12
javascript實(shí)現(xiàn)根據(jù)3原色制作顏色選擇器的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)根據(jù)3原色制作顏色選擇器的方法,涉及javascript操作頁面元素屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
javascript實(shí)現(xiàn)獲取服務(wù)器時(shí)間
本文給大家總結(jié)了一下使用javascript來獲取服務(wù)器時(shí)間的幾種方法和思路，十分的簡單明了，有需要的小伙伴可以參考下2015-05-05
Handtrack.js庫實(shí)現(xiàn)實(shí)時(shí)監(jiān)測手部運(yùn)動(推薦)
這篇文章主要介紹了實(shí)時(shí)監(jiān)測手部運(yùn)動的 JS 庫，可以實(shí)現(xiàn)很多有趣功能,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-02-02
微信小程序swiper組件實(shí)現(xiàn)抖音翻頁切換視頻功能的實(shí)例代碼
這篇文章主要介紹了微信小程序swiper組件實(shí)現(xiàn)抖音翻頁切換視頻功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06