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