echarts的tooltip旋转方案

当echarts横屏的时候，tooltip还是原来的角度，没有跟着旋转过来，官网说可以使用extraCssText来旋转，但是我测过了无效。

extraCssText: 'transform:rotate(270deg)',

详细看了一下官网，发现可以返回HTML

使用方式大概如下：

 tooltip: {
    trigger: 'item',
    formatter: (params) => { // 提示框浮层内容格式器 以函数的形式修改
      return this.tipFormatter(params) // 见最底层的函数
    }
  },

函数定义

methods:{
tipFormatter(params) {
  var name = '内容1'; // 悬浮层内容，可自定义
  var name2 = '内容2'; // 悬浮层内容，可自定义
  var divWarp = $('<div/>') ; // 使用JQ(或原生js) 生成一个dom 外盒子
  var divContent = $('<div style = "backgroundColor: #505050; transform:rotate(270deg);">'); // 承载内容的盒子，并给盒子样式
  var p = $('<p>').text(name); // 内容标签， 可以有多个
  var p2 = $('<p>').text(name2); // 内容标签， 可以有多个
  var divFirst = divContent.append(p); // 将 p 加到 divContent
  var divSecond = divContent.append(p2); // 将 p2 加到 divContent
  var div = divWarp.append(divFirst).append(divSecond); // 将内容盒子加到外盒子上
  return div.html(); // 渲染到html 并将结果返回
}
}

有些人可能用vue写的项目，$无法识别，这是jQuery的写法
可以安装一下jQuery，我尝试用vue的写法建树好像失败了

npm i jquery --save-d

安装好之后在main.js导入

import jquery from 'jquery'
Vue.prototype.$ = jquery

最后在用到jQuery语法的界面里引入

import $ from 'jquery'

就可以了。
这样tooltip就可以正常旋转了。