多圖聯動

@{
    ViewBag.Title = "mpie";
}

<table>
    <tr>
        <td><div id="main" style="width: 600px;height:500px;"></div></td>
        <td><div id="main1" style="width: 670px;height:500px;"></div></td>
    </tr>
</table>


<script type="text/javascript">
    // 基於準備好的dom，初始化echarts實例
    var myChart = echarts.init(document.getElementById('main'), 'shine');


    option = {
        title: {
            text: '2016年',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            show: false,
            x: 'left',
            data: ['直達', '營銷廣告', '搜索引擎', '郵件營銷', '聯盟廣告', '視頻廣告', '百度', '谷歌', '必應', '其餘']
        },
        series: [
            {
                name: '2016年',
                type: 'pie',
                selectedMode: 'single',
                radius: [0, '80%'],

                label: {
                    normal: {
                        //position: 'inner',
                        formatter: "{b}({d}%)"
                    }
                },
                labelLine: {
                    normal: {
                        show: true,
                        length: 8,
                        length2:8
                    }
                },
                data: [
                    { value: 335, name: '直達' },
                    { value: 120, name: '郵件營銷' },
                    { value: 134, name: '聯盟廣告' },
                    { value: 235, name: '視頻廣告' },
                    { value: 448, name: '百度' },
                    { value: 351, name: '谷歌' },
                    { value: 247, name: '必應' },
                    { value: 302, name: '其餘' }
                ]
            }
        ]
    };
    myChart.setOption(option);

    var myChart1 = echarts.init(document.getElementById('main1'), 'shine');


    option1 = {
        title: {
            text: '2017年',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 0,
            data: ['直達', '營銷廣告', '搜索引擎', '郵件營銷', '聯盟廣告', '視頻廣告', '百度', '谷歌', '必應', '其餘']
        },
        series: [
            {
                name: '2017年',
                type: 'pie',
                selectedMode: 'single',
                radius: [0, '80%'],

                label: {
                    normal: {
                        position: 'inner',
                        formatter: "{b}({d}%)"
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [
                    { value: 335, name: '直達' },
                    { value: 310, name: '郵件營銷' },
                    { value: 234, name: '聯盟廣告' },
                    { value: 135, name: '視頻廣告' },
                    { value: 1048, name: '百度' },
                    { value: 251, name: '谷歌' },
                    { value: 147, name: '必應' },
                    { value: 102, name: '其餘' }
                ]
            }
        ]
    };
    myChart1.setOption(option1);

    echarts.connect([myChart, myChart1]);

    setTimeout(function () {
        window.onresize = function () {
            myChart.resize();
            myChart1.resize();
        }
    }, 200)
</script>