脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → echarts 移动端竖显

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 移动端竖显的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

最新评论