echarts环形图

echarts环形图的制作

环形图与扇形图的差别就是在radius: '55%',和radius: ['20%','45%'],就是插入的圆环是一个圆还是两个圆的区别，这里的数字代表的是半径的值，然后就可以和之前制作扇形图一样制作环形图了。

<script type="text/javascript">
    // 路径配置
    require.config({
        paths: {
            echarts: 'http://echarts.baidu.com/build/dist'
        }
    });

    // 使用
    require(
        [
            'echarts',
            'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
        ],
        function (ec) {
            // 基于准备好的dom，初始化echarts图表
            var myChart = ec.init(document.getElementById('main'));
            option = {
                title : {
                    text: '办税人年龄段分布',
                    x:'center'
                },


                // tooltip: {
                //     trigger: 'item',
                //     formatter: "{a} <br/>{b}: {c} ({d}%)"
                // },
                backgroundColor:'#fff',
                legend: {
                    // orient: 'vertical',
                    x: 'left',
                    y:'bottom',
                    data:['20以下','20-30','30-40','40-50','50以上']
                },
                calculable:true,
                series: [

                    {
                        name:'访问来源',
                        type:'pie',
                        radius: ['20%','45%'],
                        itemStyle : {
                            normal : {
                                label : {
                                    show : true,
                                    formatter: "{b}:  ({d}%)",
                                },
                                labelLine : {
                                    show : true,
                                    // length:10
                                },

                                    borderWidth:5, //设置border的宽度有多大
                                    borderColor:'#fff',
                            },
                        },

                        data:[

                            {value:335, name:'20以下'},
                            {value:310, name:'20-30'},
                            {value:234, name:'30-40'},
                            {value:135, name:'40-50'},
                            {value:1048, name:'50以上'},

                        ]
                    }
                ]
            };
            // 为echarts对象加载数据
            myChart.setOption(option);
        }
    );
</script>

制作出来的效果如下

这里做出来的环形图有一个外边框，我制作的时候要求有，如果不想要可以将其去除，对应上面的代码calculable:true,将其改为false即可。还有一个地方值得注意的是我这里加了一个borderWidth：5；设置的是每个扇环之间的间隔距离，如果不想要也可以删除。
利用echarts做图表非常的方便，但是细节上还需要多加学习，这是我学习之后的直观感觉