echarts 移动端竖着显示效果实现
作者：三水
这篇文章主要为大家介绍了echarts 移动端竖着显示效果实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
echarts在移动端竖着显示
（非竖屏切换）让用户看到更多的数据。
最终效果：
遇到的问题：
toolTip（文字）与y轴平行显示
看过官方文档后思路：
1、extraCssText配置属性（未解决）
extraCssText: 'transform:rotate(90deg) !important;transform-origin: center;',
2、formtter（未解决）
formatter() {
return `<h1>6</h1>`
},以上都不行，因为toolTip始终会动态计算位置并生成transform: translate3d(150px, 262px, 0px);
3、搞不定父元素，就搞定子元素（解决）
解决父元素必须考虑两个问题：位置、旋转。
这是代码最少的解决方案。
配置项：
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 移动端竖着显示效果实现的详细内容，更多关于echarts 移动端竖显的资料请关注脚本之家其它相关文章！