单容器多grid与其他容器联动,只有第一个grid可以联动echarts 折线配置项内容和展示

单容器多grid与其他容器联动,只有第一个grid可以联动,想实现所有grid与其他容器一起联动

配置项如下
      var count = 70;
var intervalCount = 67;
var baseTop = 70;
var gridHeight = 60;

var data = {
    o1: [],
    o2: [],
    o3: [],
    o4: [],
    o5: [],
    xMin: 0,
    xMax: count
};

for (var i = 0; i < count; i++) {
    var now = i;
    data.o1.push([now, Math.floor(Math.random() * 2)]);
    data.o2.push([now, Math.floor(Math.random() * 2)]);
    data.o3.push([now, Math.floor(Math.random() * 2)]);
    data.o4.push([now, Math.floor(Math.random() * 2)]);
    data.o5.push([now, Math.floor(Math.random() * 2)])
}


function makeXAxis(gridIndex, opt) {
    return echarts.util.merge({
        type: 'value',
        gridIndex: gridIndex,
        axisLine: {
            onZero: false,
            lineStyle: {
                color: '#ddd'
            }
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            show: false
        },
        splitLine: {
            show: false,
            lineStyle: {
                color: '#ddd'
            }
        },
        min: data.xMin,
        max: data.xMax,
        axisPointer: {
            lineStyle: {
                color: '#f00'
            }
        }
    }, opt || {}, true);
}

function makeYAxis(gridIndex, opt) {
    return echarts.util.merge({
        type: 'value',
        gridIndex: gridIndex,
        nameLocation: 'middle',
        nameTextStyle: {
            color: '#333'
        },
        boundaryGap: ['30%', '30%'],
        axisTick: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: '#ccc'
            }
        },
        axisLabel: {
            show: false
        },
        splitLine: {
            show: false
        }
    }, opt || {}, true);
}

function makeGrid(top, opt) {
    return echarts.util.merge({
        top: top,
        height: gridHeight
    }, opt || {}, true);
}

option = {
    grid: [],
    xAxis: [],
    yAxis: [],
    //参考其他例子加入下面的axisPointer、tooltip配置——20170505
    axisPointer: {
        link: [{xAxisIndex: 'all'}],
        snap: true
    },
    tooltip:{trigger:'axis'},
    series: []
};
ytiles = ['o1', 'o2', 'o3', 'o4', 'o5'];
echarts.util.each(ytiles, function(ytile, idx) {
    option.grid.push(makeGrid(baseTop + gridHeight * idx));
    option.xAxis.push(makeXAxis(idx));
    option.yAxis.push(makeYAxis(idx, {
        name: ytile
    }));
    option.series.push({
        name: ytile,
        type: 'line',
        symbol: 'circle',
        symbolSize: 2,
        xAxisIndex: idx,
        yAxisIndex: idx,
        data: data[ytile]
    });
});
    
截图如下