echarts 移動(dòng)端豎著顯示效果實(shí)現(xiàn)
更新時(shí)間：2023年07月25日 15:04:41 作者：三水
這篇文章主要為大家介紹了echarts 移動(dòng)端豎著顯示效果實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
echarts在移動(dòng)端豎著顯示
（非豎屏切換）讓用戶看到更多的數(shù)據(jù)。
最終效果：
遇到的問題：
toolTip（文字）與y軸平行顯示
看過官方文檔后思路：
1、extraCssText配置屬性（未解決）
extraCssText: 'transform:rotate(90deg) !important;transform-origin: center;',
2、formtter（未解決）
formatter() {
return `<h1>6</h1>`
},以上都不行，因?yàn)閠oolTip始終會(huì)動(dòng)態(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 移動(dòng)端豎著顯示效果實(shí)現(xiàn)的詳細(xì)內(nèi)容，更多關(guān)于echarts 移動(dòng)端豎顯的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了JavaScript作用域、作用域鏈和閉包的用法，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-09-09
這篇文章主要介紹了微信小程序 checkbox使用實(shí)例解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)彈窗消息動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要為大家詳細(xì)介紹了完美的js div拖拽實(shí)例代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
Dropzone.js實(shí)現(xiàn)文件拖拽上傳功能(附源碼下載)
dropzone.js是重量輕的JavaScript庫，將HTML元素設(shè)置為一個(gè)降落區(qū),并通過Ajax文件被上傳到服務(wù)器。本文給大家詳細(xì)介紹Dropzone.js實(shí)現(xiàn)文件拖拽上傳功能，需要的朋友參考下吧2016-11-11
相信大家也都發(fā)現(xiàn)了，在網(wǎng)上關(guān)于JS的變量和作用域的文章有很多，但真正能講清楚，能深入理解的文章很少。在閱讀了很多人的文章以后，我決定綜合起來，結(jié)合實(shí)際代碼，希望能夠以一個(gè)比較清楚完整的方式讓大家真正理解。有需要的朋友們下面來一起看看吧。2016-10-10
這篇文章主要介紹了JS 獲取鼠標(biāo)左右鍵的鍵值方法，很簡單，但很實(shí)用，特別是在做與用戶交互相關(guān)的東西2014-10-10
這篇文章主要介紹了Bootstrap風(fēng)格的zTree右鍵菜單功能，實(shí)現(xiàn)代碼分為html，css和js三部分，代碼簡單易懂，非常不錯(cuò)，需要的朋友可以參考下2017-02-02
本文介紹js如何顯示最后修改時(shí)間，在頁面的文本框中顯示文件上一次被修改的時(shí)間，通過這種方法可以查看網(wǎng)頁的更新時(shí)間,有需要的朋友可以參考下2013-01-01
JavaScript+Node.js寫一款markdown解析器
這篇文章主要介紹了利用JavaScript和Node.js寫一款markdown解析器，首先編寫getHtml函數(shù)，傳入markdown文本字符串，下面更多詳細(xì)內(nèi)容，需要的小伙伴可以參考一下2022-02-02