<html>
    <head>
        <meta charset="utf-8">
        <script src="../../../dist/echarts.js"></script>
        <script src="../common/dark.js"></script>
        <link rel="stylesheet" href="../common/reset.css">
    </head>
    <body>
        <style>
        </style>
        <div id="main"></div>
        <script>
            var chart = echarts.init(document.getElementById('main'), 'dark');

            var itemStyle = {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.9)'
                }
            };

            chart.setOption({
                title: {
                    text: '访问来源',
                    textStyle: {
                        color: '#fff',
                        fontSize: 24
                    }
                },
                legend: {
                    data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'],
                    textStyle: {
                        color: '#fff',
                        fontSize: 18,
                        itemGap: 20
                    },
                    orient: 'vertical',
                    x: 'left',
                    y: 50
                },
                tooltip: {
                    show: false
                },
                series: [{
                    name: 'pie',
                    type: 'pie',
                    selectedMode: 'single',
                    selectedOffset: 30,
                    clockwise: true,
                    center: ['55%', '50%'],
                    data:[
                        {value:335, name:'直接访问'},
                        {value:310, name:'邮件营销'},
                        {value:234, name:'联盟广告'},
                        {value:135, name:'视频广告'},
                        {value:1548, name:'搜索引擎'}
                    ],
                    itemStyle: itemStyle
                }]
            });
        </script>
    </body>
</html>