echarts环状图

依赖：见echarts柱状图
http://blog.csdn.net/zk_1325572803/article/details/78041389

body中

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main_s" style="height:192px;position:absolute;top:15%;left:52%;width:720px;"></div>

javascript

function huan(){
    //基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main_s'));
    var option = {
            title : {  
            text: kssj+"至"+jssj+"全部运动物占比情况", 
            textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
                   fontSize: 13,
                   fontStyle: 'normal',
                   fontWeight: 'bold',
             },
             x:"center"  
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x:'15',
                y:'15',
                data:[车,两轮车,其他,行人]  //数组
            },
            series: [
                {
                    name:'运动物类型:',
                    type:'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {   //视觉引导线
                            show: true,
                            position: 'right'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '17',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderColor: "#FFFFFF", 
                            borderWidth: 1, 
                            label:{  
                                show:true,  
                                formatter:'{b} : {c} ({d}%)'  
                            },  
                        }
                    },
                    data:[100,200,300,400] //数组
                }
            ]
        };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

效果图