option = {
title: {
x: 'center',
y: 0
},
tooltip:{
position:'inside',
formatter: function(params) {
if(params.value[1] == undefined){
console.log(params)
return params.name + "</br>" +params.seriesName + "</br>" + params.value;
}else if(params.value[0] !=undefined&¶ms.value[1] !=undefined&¶ms.value[2] !=undefined) {
return "调用账户:" + params.value[2] + "</br>" +
"调用时间:" + params.value[0] +
"<br>响应时长:" + params.value[1] + "毫秒</br>";
}
}
},
dataZoom : [],
xAxis: [{
name:'时间',
type: 'category',
axisLabel: {rotate: 45},
data:this.data1,
boundaryGap: false
},{
type: 'time',
name: '时间',
show:false
}],
yAxis: {
name:'平均响应时长(毫秒)',
axisLabel: {
formatter: '{value} 毫秒'
}
},
series: [
{
name:'平均响应时长(毫秒)',
smooth:true,
data: [/*12,13,14,15,16,17,18,21,27,26,25,24,24,12,23,34,23,12,21,22,25,16,27,10*/],
type: 'line',
markLine:{
data:this.lineTime
}
},
{
name:'响应时长(毫秒)',
symbolSize: 5,
xAxisIndex:1,
data:[/*['2018-12-13 16:12:08',15,'张三']*/],
type: 'effectScatter',
itemStyle: {normal: {color: '#f1c232'}},
},
{
name:'响应',
type:'line',
symbolSize: 0,
xAxisIndex:1,
data:[
// {name:'2018-12-13 00:00:00', value:['2018-12-13 00:00:00', 0]},
// {name:'2018-12-14 00:00:00', value:['2018-12-14 00:00:00', 0]}
]
}
]
};
setData(){
let xTime = [];//x轴的时间戳
let response_time = [];//平均响应时长
let func = [];//功能明细
let sTime = "";//假x轴开始时间
let eTime = "";//假x轴结束
let xTime1 = [];//固定隐藏x轴的散点图
let zoom = [{
xAxisIndex:[0,1],
show: true,
start: 60,
end: 100,
height:20
// handleSize: 8
}];
for(let i =0;i<10;i++){
let x = (new data()).getTime() - 3600 * i;//x自己转换一下,转换成字符串时间
let y = Math.random() * 100;
let z = '测试名称'+ i;
func.push([x, y,z]);
response_time.push(y);
if(i==0){
xTime1.push({name:x,value:[x,0]});
sTime = x;
}
if(i == 9){
xTime1.push({name:x,value:[x,0]});
eTime = x;
}
}
this.option0.series[0].data = response_time;
this.option0.series[1].data = func;
this.option0.series[2].data = xTime1;
this.option0.dataZoom = zoom;
this.lineTime.push({yAxis :Math.random() * 1000,
symbol:"circle",
symbolSiz:5});
this.chartInstance1.hideLoading();
this.chartInstance1.clear();
this.chartInstance1.setOption(this.option0);
}
简单的说一下逻辑:(包括后续改进计划)
最开始的初衷是散点图跟折线图是分开的,想把他弄在一起显示,折线图的x轴坐标也是时间字符串,只是想根据不同方式展示x轴坐标,因此做了个第二个x轴类型为time并隐藏,以此来实现折线图跟散点图的重合,单用time时间轴会根据散点图的开始、结束时间显示,导致散点跟折线图的时间对不上,因此在time类型的x轴中加入以折线x轴的第一个值、最后一个值隐藏显示作为散点区间的开始和结束。datazoom是拖动控件,这个可用可不用。后续还是考虑只用一个time类型的x轴实现。