先上图,准没错。
如图共用一条时间轴(在最下方)
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一样