图表中包含折线图和散点图,x轴为时间轴,显示0:00-24:00的数据, tooltip采用坐标轴触发,鼠标移动到图表无数据位置,会触发最近的数据点;
例如:当图表从10:00开始有数据时,鼠标移动到10点之前的任意位置,都会触发10:00的这个数据点;若tooltip指示线为自动吸附时,此时指示线一直吸附在10:00的位置;指示线不设置自动吸附(snap:false)时,指示线会随着鼠标移动,但是仍然会触发10:00的数据点;
部分代码如下:
option = {
tooltip:{
trigger:'axis',
axisPointer:{
type:'line',
axis:'x',
lineStyle:{color:'#333',}
},
backgroundColor:'#555',
formatter:function(params){
let tip = auth.formatterTip(params);
return tip ;
},
},
xAxis: [{
type: 'time',
boundaryGap: false,
min:new Date(this.timeSection[0]*1000),
max:new Date(this.timeSection[1]*1000),
interlval:0,
axisLabel: {show:false,},
axisLine: {lineStyle: {color: '#ccc'}},
splitNumber: 24,
}],
}
效果图(截图时,设置了tooltip提示框一直显示,指示线此时在12:48的位置):