双曲线--echart

let slaColor = ['#00A961','#AF9B25','#AF9B25']
option = {
backgroundColor: '#090C1B',
title: {
text: '{a|商业}{b|[海南白马]}',
textStyle: {
align: 'center',
rich:{
a:{
color:'#29B3DE',
fontSize: 14,
fontWeight:'bold'
},
b:{
color:'#BEC5D9',
fontSize:12
}}},
// top: '3%',
left: 'left',
},
color:slaColor,
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'line' // 默认为直线，可选为：'line' | 'shadow'
}},
// Calculable: true,
grid: {
top: '10%',
bottom: '5%',
left: '4%',
right: '20px',
containLabel: true
},
legend: {
right:'10%',
top:'10%',
itemHeight:8,
itemWidth:8,
itemGap:13,
icon:'circle',
textStyle:{
color:'white',
fontSize:12,
}},
xAxis: [{
boundaryGap: false,
splitLine: {
show: false
},
interval:20*60*1000,
axisTick: {
show: false
},
axisLine: {
// show: false
color:'#BEC5D9'
},
data: ['14:23', '14:24','14:25', '14:26'],
}],
yAxis: [{
name:'单位(ms)',
nameTextStyle:{
color:'#BEC5D9',
},
type: 'value',
min: 0,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false,
},
axisLabel:{
color:'#BEC5D9',
// formatter: '{value}ms'
},
},{
name:'单位(%)',
nameTextStyle:{
color:'#BEC5D9',
},
type: 'value',
min: 0,
max: 100,
splitLine: {
show: false
},

![bd6a967f0c180519b6cc3aef3f27f76a.jpg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/990b82c0a6934739a9dd4c11c71646b9~tplv-k3u1fbpfcp-watermark.image?)
axisTick: {
show: false
},
axisLine: {
show: false,
},
axisLabel:{
color:'#BEC5D9',
// formatter: '{value}ms'
},
}],
series: [
{name: '时延',
type: 'line',
data: [0.88, 0.88, 0.88, 0.88]
},
{name: '带宽利用率',
type: 'line',
yAxisIndex: 1,
data: [5, 10, 25, 40]
},
// {
// name: '丢包率',
// type: 'line',
// // tipeLang: true,
// data: result.rate
// },
]
};