先上图,准没错。
如图共用一条时间轴(在最下方)
option = {
grid: [{ left: '38px', right: '33px', top: '0px', height: '25%'},
{left: '38px', right: '33px', top: '33%', height: '25%'}
],
tooltip: {trigger: 'axis'},
axisPointer: {link: {xAxisIndex: 'all'}
},
legend: {data: ['Vain', 'Vbin'],
// textStyle: {
// color: '#fff'
// }
},
xAxis: [
{
gridIndex: 0,
boundaryGap: false,
type: 'category',
data: [
'2021-08-03 16:38:46 508',
'2021-08-03 16:39:46 508',
'2021-08-03 16:40:46 508',
'2021-08-03 16:41:46 508',
'2021-08-03 16:42:46 508',
'2021-08-03 16:43:46 508',
'2021-08-03 16:44:46 508',
'2021-08-03 16:45:46 508',
'2021-08-03 16:46:46 508',
'2021-08-03 16:47:46 508',
'2021-08-03 16:48:46 508',
'2021-08-03 16:48:46 508'
]
},
{
gridIndex: 1,
boundaryGap: false,
type: 'category',
data: [
'2021-08-03 16:38:46 508',
'2021-08-03 16:39:46 508',
'2021-08-03 16:40:46 508',
'2021-08-03 16:41:46 508',
'2021-08-03 16:42:46 508',
'2021-08-03 16:43:46 508',
'2021-08-03 16:44:46 508',
'2021-08-03 16:45:46 508',
'2021-08-03 16:46:46 508',
'2021-08-03 16:47:46 508',
'2021-08-03 16:48:46 508',
'2021-08-03 16:48:46 508'
]
}
],
yAxis: [{gridIndex: 0, type: 'value'},{gridIndex: 1,type: 'value'}],
dataZoom: {
show: true,
start: 0,
// id:ids,
background: '#425c86'
},
series: [
{
xAxisIndex: 0,
yAxisIndex: 0,
name: 'Vain',
type: 'line',
data: [
-170.3, -189.6, -207.4, -223.4, -238.9, -251.8, -263.3, -275.2, -282.2,
-294.3, -300.9, -306.8, -311.7, -315.1, -115.3, -213.6
]
},
{
xAxisIndex: 1,
yAxisIndex: 1,
name: 'Vbin',
type: 'line',
data: [
-207.4, -223.4, -238.9, -251.8, -263.3, -275.2, -282.2, -294.3, -300.9,
-306.8, -311.7, -315.1, -115.3, -213.6
]
}
]
};
其实就是写好 grid,多组。本人大略晓得这个图放哪里。
而后在 yAxis 和 xAxis 外面写好 gridIndex(这个属性就是通知你,示意这组数据要用第几个 grid)。
最初就是在 series 外面设置好 xAxisIndex,yAxisIndex. 原理就跟下面 gridindex 一样