关于echarts:echarts-移动端竖着显示

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

最终成果：

遇到的问题：

看过官网文档后思路：
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;
    }
  }

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