Echarts图表之饼图

Echarts图表之饼图

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Echarts图表</title>
        <!-- 引入echarts.min.js -->
        <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    </head>
    <body>
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            var myChart = echarts.init(document.getElementById('main'));
            var option = {
                // 各个饼块对应的背景色
                color: ['#d2d17c', '#00b7ee', '#5578cf', '#5ebbeb', '#d16ad8', '#f8e19a', '#00b7ee', '#81dabe', '#5fc5ce'],
                // 整个图表的背景色
                backgroundColor: 'rgba(1,202,217,.2)',
                grid: {
                    left: 20,
                    right: 20,
                    top: 0,
                    bottom: 20
                },
                legend: {
                    top: 10,
                    textStyle: {
                        fontSize: 10,
                        color: 'rgba(255,255,255,.7)'
                    },
                    data: ['0-6', '6-18', '18-28', '28-55', '55以上']
                },
                series: [{
                    name: '访问来源',
                    // 饼图
                    type: 'pie',
                    radius: '55%',
                    // 饼图的位置
                    center: ['50%', '55%'],
                    data: [{
                            value: 335,
                            name: '0-6'
                        },
                        {
                            value: 310,
                            name: '6-18'
                        },
                        {
                            value: 234,
                            name: '18-28'
                        },
                        {
                            value: 135,
                            name: '28-55'
                        },
                        {
                            value: 158,
                            name: '55以上'
                        }

                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            };
            myChart.setOption(option);
        </script>
    </body>
</html>

上一篇:区间选点(贪心)


下一篇:AI教程「8」,如何在 Illustrator 中描摹对象?