echarts 移动端竖着显示效果实现
更新时间：2023年07月25日 15:04:41 作者：三水
这篇文章主要为大家介绍了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 移动端竖显的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了JavaScript作用域、作用域链和闭包的用法，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下2020-09-09
这篇文章主要介绍了微信小程序 checkbox使用实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
这篇文章主要为大家详细介绍了原生js实现弹窗消息动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
这篇文章主要为大家详细介绍了完美的js div拖拽实例代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
dropzone.js是重量轻的JavaScript库，将HTML元素设置为一个降落区,并通过Ajax文件被上传到服务器。本文给大家详细介绍Dropzone.js实现文件拖拽上传功能，需要的朋友参考下吧2016-11-11
相信大家也都发现了，在网上关于JS的变量和作用域的文章有很多，但真正能讲清楚，能深入理解的文章很少。在阅读了很多人的文章以后，我决定综合起来，结合实际代码，希望能够以一个比较清楚完整的方式让大家真正理解。有需要的朋友们下面来一起看看吧。2016-10-10
这篇文章主要介绍了JS 获取鼠标左右键的键值方法，很简单，但很实用，特别是在做与用户交互相关的东西2014-10-10
这篇文章主要介绍了Bootstrap风格的zTree右键菜单功能，实现代码分为html，css和js三部分，代码简单易懂，非常不错，需要的朋友可以参考下2017-02-02
本文介绍js如何显示最后修改时间，在页面的文本框中显示文件上一次被修改的时间，通过这种方法可以查看网页的更新时间,有需要的朋友可以参考下2013-01-01
JavaScript+Node.js写一款markdown解析器
这篇文章主要介绍了利用JavaScript和Node.js写一款markdown解析器，首先编写getHtml函数，传入markdown文本字符串，下面更多详细内容，需要的小伙伴可以参考一下2022-02-02
最新评论