echart issue with connect

/**
 * example showing the issue with connect and legend
 */

 let initGraphs = () => {
     let x = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
     let y1 = [], y2 = [], y3 = [], y4 = [], y5 = [], y6=[];
     let max = 2;
     let min = -2;
     for (i = 0; i<=10; i++){
         y1.push(Math.random() * (+max - +min) + +min)
         y2.push(Math.random() * (+max - +min) + +min)
         y3.push(Math.random() * (+max - +min) + +min)
         y4.push(Math.random() * (+max - +min) + +min)
         y5.push(Math.random() * (+max - +min) + +min)
         y6.push(Math.random() * (+max - +min) + +min)
     }

     let options = {
        legend: {
            data: ["A", "B", "C"],
            top: '17%',
          },
        xAxis: {
            type: 'value',
            data: x
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name: "A",
            data: y1,
            type: 'line',
            smooth: true
        },
        {
            name: "B",
            data: y2,
            type: 'line',
            smooth: true
        },{
            name: "C",
            data: y3,
            type: 'line',
            smooth: true
        },],
        tooltip: {
            trigger: "axis",
            showDelay: 0,
        }
     }
     let options2 = {

        xAxis: {
            type: 'value',
            data: x
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name: "C",
            data: y3,
            type: 'line',
            smooth: true
        }],
        tooltip: {
            trigger: "axis",
            showDelay: 0,
        }
     }
     let options3 = {
        legend: {
            data: ["E", "F"],
            top: '17%',
          },
        xAxis: {
            type: 'value',
            data: x
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name: "E",
            data: y5,
            type: 'line',
            smooth: true
        },
        {
            name: "F",
            data: y6,
            type: 'line',
            smooth: true
        }],
        tooltip: {
            trigger: "axis",
            showDelay: 0,
        }
     }
     let chart1 = echarts.init(document.getElementById("graph1"));
     chart1.setOption(options);
     let chart2 = echarts.init(document.getElementById("graph2"));
     chart2.setOption(options2);
     let chart3 = echarts.init(document.getElementById("graph3"));
     chart3.setOption(options3);

     echarts.connect([chart1, chart2, chart3])
 }