本文介绍在 ECharts 移动端开发中，如何实现 Tooltip（提示框）竖屏显示的技巧。通过 CSS 旋转与自定义 position 函数，解决 tooltip 始终动态计算位置并生成 transform 导致无法直接旋转的问题，提供最少代码量的解决方案。
在移动端使用 ECharts 时，有时需要让图表以竖屏模式展示。
这样做的目的是为了让用户在非竖屏切换的情况下，能够看到更多的数据内容。
最终实现的效果如下所示。
在实现过程中，主要遇到了以下问题。
具体表现为 Tooltip（提示框）中的文字与 Y 轴平行显示，不符合预期。
查阅官方文档后，整理出以下解决思路。
首先尝试使用 extraCssText 配置属性，但未成功解决。
extraCssText: 'transform:rotate(90deg) !important;transform-origin: center;',其次尝试修改 formatter 函数，同样未解决。
formatter() {
return `<h1>6</h1>`
},上述方法均无效，因为 Tooltip 始终会动态计算位置并生成 transform: translate3d(150px, 262px, 0px);。
既然难以控制父元素，那就转而处理子元素，此方法已解决。
解决父元素问题必须考虑两个关键点：位置和旋转。
这是代码量最少的解决方案。
具体的配置项代码如下。
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 移动端竖显的资料请关注本站其它相关文章！