SOURCE

window.onload = () => {
    
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
        legend: {},
        tooltip: {},
        dataset: {
            source: [
                ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
                ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
                ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
                ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
                ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1],
            ]
        },
        series: [
            {
                type: 'pie',
                radius: 60,
                center: ['25%','30%'],
            },
            {
                type: 'pie',
                radius: 60,
                center: ['75%','30%'],
                encode: {
                    itemName: 'product',
                    value: '2013',
                }
            },
            {
                type: 'pie',
                radius: 60,
                center: ['25%','75%'],
                encode: {
                    itemName: 'product',
                    value: '2014',
                }
            },
            {
                type: 'pie',
                radius: 60,
                center: ['75%','75%'],
                encode: {
                    itemName: 'product',
                    value: '2015',
                }
            },
        ]
    };
    myChart.setOption(option);

    var myChart2 = echarts.init(document.getElementById('main2'));
    var option2 = null;
    setTimeout(() => {
        option2 = {
            legend: {},
            tooltip: {
                trigger: 'axis',
                showContent: false
            },
            dataset: {
                source: [
                    ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
                    ['Matcha Latte', 41.1, 30.4, 65.1, 53.3, 83.8, 98.7],
                    ['Milk Tea', 86.5, 92.1, 85.7, 83.1, 73.4, 55.1],
                    ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4, 65.2, 82.5],
                    ['Walnut Brownie', 55.2, 67.1, 69.2, 72.4, 53.9, 39.1],
                ]
            },
            xAxis: {type: 'category'},
            yAxis: {gridIndex: 0},
            grid: {
                top: '55%',
            },
            series: [
                {type: 'line' , smooth: true , seriesLayoutBy: 'row'},
                {type: 'line' , smooth: true , seriesLayoutBy: 'row'},
                {type: 'line' , smooth: true , seriesLayoutBy: 'row'},
                {type: 'line' , smooth: true , seriesLayoutBy: 'row'},
                {
                    type: 'pie',
                    id: 'pie',
                    radius: '30%',
                    center: ['50%','25%'],
                    label: {
                        formatter: '{b}: {@2012} ({d}%)'
                    },
                    encode: {
                        itemName: 'product',
                        value: '2012',
                        tooltip: '2012',
                    }
                }
            ]
        };
        myChart2.on('updateAxisPointer',(event) => {
           var xAxisInfo = event.axesInfo[0];
           if (xAxisInfo){
               var dimension = xAxisInfo.value + 1;
               myChart2.setOption({
                   series: {
                       id: 'pie',
                       label: {
                         formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                       },
                       encode: {
                           value: dimension,
                           tooltip: dimension,
                       }
                   }
               })
           }
        });
        myChart2.setOption(option2);
    });
}

<div id="main" style="width: 600px;height: 400px;"></div>
<div id="main2" style="width: 1200px;height: 400px;"></div>