echarts 移动端竖着显示

echarts在移动端竖着显示（非竖屏切换）让用户看到更多的数据。

最终效果：

遇到的问题：

一、toolTip（文字）与y轴平行显示

看过官方文档后思路：
1、extraCssText配置属性（未解决）

extraCssText: 'transform:rotate(90deg) !important;transform-origin: center;',

2、formtter（未解决）

formatter() {
  return `
6
`
},

以上都不行，因为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;
    }
  }