echarts tooltip显示不全问题

在项目里面的tooltip数据特别多，显示不全问题：

1、如果盒子还够大，只是tooltip飘到上面或者下面被覆盖住了，可以考虑confine: true这个属性，将tooltip限制在盒子内;

tooltip : {
  backgroundColor: "rgba(3,35,81,0.80)",
  textStyle: {
    color: "#fff",
    align: "left",
  },
  padding: [12, 22, 17, 22],
  borderColor: "rgba(0,146,255,1)",
  borderWidth: 1,
  borderRadius: 4,
  extraCssText: 'box-shadow: inset 0px 0px 20px 0px rgba(0,87,161,1);',
  confine: true, //将tooltip限制在盒子内

};

2、如果盒子比较小，展示不全的话，可以考虑appendToBody : true这个属性

tooltip: {
      trigger: "item",
      show: true,
      appendToBody : true,
},

 

3、也可以考虑将formatter格式处理一下，不让它换行，变矮一些

 ​

4、如果是位置不太好，可以使用postion，处理一下

​ 

//举例
position: 'top'

position: [10, 10]

position: [ 50%, 50% ]


point: 指的是鼠标的x,y的位置, 是一个数组[20, 30]

params：Object|Array.<Object>  是需要的数据集

dom：tooltip 的 dom 对象。

rect：只有鼠标在图形上时有效，有 x, y, width, height   四个属性

size：包括 dom 的尺寸和 echarts 容器的当前尺寸，例如：{contentSize: [width, height], viewSize: [width, height]}。size中有两个属性：viewSize为外层div的大小，contentSize为tooltip提示框的大小。

position:(point, params, dom, rect, size)=>{
  return [ point[0], point[1] - 10 ]
} 

position:(point, params, dom, rect, size)=>{
  return {left: '50%', bottom: 10}
} 

5、还可以考虑一下层级问题，不过tooltip的层级一般都很大，当然也可以考虑，tooltip有一个extraCssText属性

tooltip:  {
  extraCssText: 'box-shadow: inset 0px 0px 20px 0px rgba(0,87,161,1);z-index: 1000',//增加tooltip的层级试试
};