淘先锋技术网

首页 1 2 3 4 5 6 7

在项目里面的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的层级试试
};