分享几个用Echarts做的图表

1.双饼图

/**
 * @author huangteng
 * @describe 实现良有教育页面Echarts图
 * @type {string}
 */

var IP = "http://"+window.location.host+"/xz/xz/tongji/huibao/yanshiAction!";
//获取页面传过来的区县
var area="";
/*样式*/
var labelTop = {
    normal : {
        color:'rgba(2,132,168,0.8)',
        borderWidth: 2,
        borderColor: '#01b6ed',
        label : {
            show : true,
            formatter:'总人数',
            position : 'center',
            textStyle: {
                baseline :'bottom',
                color:'#01b6ed',
                fontSize:6
            }
        },
        labelLine : {
            show : false
        }
    }
};
/*-------------------------------初始化---------------------------------------*/
$(window).load(function(){
    /*初始化数据*/
    initcjr_ht();//ajax请求数据的方法
});
function initcjr_ht(){
    /*学有良教模块*/
    $.ajax({
        url:IP+'getlyxzData.do',
        dataType:'json',
        type:'POST',
        data:'',
        success:function(data){
            var obj = eval(data);
            if(obj==null || obj==""){
                alert("暂无数据");
                return;
            }
            education(area,'bar-content',obj);
            primaryandhigh(area,'pic_two_mid',obj);
        }
    });
}
/*-------------------------------Echarts图方法----------------------------------------*/

/**
 * 柱状图
 */
function education(area,oneline,obj){
    //获取全市数据
    var data = obj.data;
    var cd_data=data[0];//成都市数据

    //柱图部分
    var myChart= echarts.init(document.getElementById(oneline));
    option = {
        title : {
            text: '单位（万人）',
            textStyle:{
                color:'#fff',
                fontSize:10,
                fontWeight:'normal'
            }
        },
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid:{
            x:80,
            y:25,
            x2:25,
            y2:25,
            borderWidth:'0',
            backgroundColor:'rgba(255,255,255,0)',
        },
        legend: {
            data:['户籍适龄人数', '本地入学人数'],
            textStyle:{
                color:'#fff'
            },
            x:'right',
            y:'top',
            itemWidth:12,
            itemHeight:12,

        },
        calculable : false,
        xAxis : [
            {
                type : 'value',
                splitLine:false,
                splitArea:false,
                splitNumber:5,
                axisLine:{
                    lineStyle:{
                        width:1,
                        color:'#0487b3',
                    },
                },
                axisLabel:{
                    textStyle:{
                        color:'#0487b3'
                    }
                }
            }
        ],
        yAxis : [
            {
                type : 'category',
                data : ['12-15周岁', '6-12周岁'],
                axisTick:false,
                splitLine:false,
                splitArea:false,
                axisLabel:{
                    textStyle:{
                        color:'#fff'
                    }
                }
            },
            {
                type : 'category',
                data : ['12-15周岁', '6-12周岁'],
                show:false,
                axisTick:false,
                splitLine:false,
                splitArea:false,
                axisLine:{
                    lineStyle:{
                        width:1,
                        color:'#0487b3',
                    },

                },
                axisLabel:{
                    textStyle:{
                        color:'#fff'
                    }
                }

            }

        ],
        series : [
            {
                name:'户籍适龄人数',
                type:'bar',
                barWidth:15,
                itemStyle : {
                    normal:{
                        color:'#195077',
                        barBorderRadius:0,
                    }
                },
                data:[cd_data.hjrk014,cd_data.hjrk013]
            },
            {
                name:'本地入学人数',
                type:'bar',
                yAxisIndex:1,
                barWidth:15,
                itemStyle : {
                    normal: {
                        color:'#01b6ed',
                        barBorderRadius:0,
                    }
                },
                data:[cd_data.rxqk009,cd_data.rxqk002]
            }


        ]
    };
    myChart.setOption(option)
    window.addEventListener("resize", function () {
        myChart.resize();
    });
};

/**
 * 环形图
 */

function primaryandhigh(area,prmaryPie,obj){

    var myCharttPie= echarts.init(document.getElementById(prmaryPie));

    //获取全市数据
    var data = obj.data;
    var cd_data=data[0];//成都市数据
    //数据处理
    var wlrks = parseInt((cd_data.rxqk003)*10000);
    document.getElementById("wlrksl1").innerHTML=wlrks;

    var wlrks2 =  parseInt((cd_data.rxqk011)*10000);
    document.getElementById("wlrksl2").innerHTML=wlrks2;


    //小学初中总人数及比例
    var total_xiaoxue = (cd_data.xsrxrs).toFixed(1);
    var total_chuzhong = (cd_data.czrxrs).toFixed(1);

    var bilie1 = ((cd_data.xsbili)*100).toFixed(2)+"%";
    document.getElementById("bfb1").innerHTML=bilie1;

    var bilie2 = ((cd_data.czbili)*100).toFixed(2)+"%";
    document.getElementById("bfb2").innerHTML=bilie2;


    //饼图
    option_pie={
        legend: {
            orient : 'vertical',
            x : document.getElementById("pic_two_mid").offsetWidth-82,
            y : 'center',
            itemWidth:10,
            itemHeight:10,
            textStyle : {
                    color : 'white',
                    fontSize:12
                },
            data:[
                {
                    name:'本地户籍',
                    icon:'stack'
                },{
                    name:'外来人口',
                    icon:'stack'
                }
            ]
        },
        color:['rgba(2,132,168,0.8)','rgba(155,143,41,0.8)'],
        series : [
            {
                type : 'pie',
                radius : [30,40],//半径
                itemStyle:{
                    normal : {
                        label : {
                            show: false,
                        },
                        labelLine : {
                            show : false
                        }
                    },
                },
                center : ['20%', '50%'],
                data : [
                    {name:'本地户籍',value:[cd_data.rxqk002],itemStyle:{
                        normal : {
                        // color: '#ccc',
                            color:'rgba(155,143,41,0.8)',
                            borderWidth: 2,
                            borderColor: '#e7c313',
                        label : {
                            show : true,
                            formatter:total_xiaoxue +'万',
                            position : 'center',
                            textStyle: {
                                baseline :'top',
                                color:'#01b6ed',
                                fontSize:15
                            },
                        },
                        labelLine : {
                            show : false
                        }
                    }
                    }},
                    {name:'外来人口', value:[cd_data.rxqk003],itemStyle:labelTop}
                ]
            },
            {
                type : 'pie',
                radius : [30,40],//半径
                itemStyle:{
                    normal : {
                        label : {
                            show: false,
                        },
                        labelLine : {
                            show : false
                        }
                    },
                },
                center : [document.getElementById("pic_two_mid").offsetWidth/2, '50%'],
                data : [
                    {name:'本地户籍',value:[cd_data.rxqk009],itemStyle:{
                        normal : {
                        // color: '#ccc',
                            color:'rgba(155,143,41,0.8)',
                            borderWidth: 2,
                            borderColor: '#e7c313',
                        label : {
                            show : true,
                            formatter:total_chuzhong +'万',
                            position : 'center',
                            textStyle: {
                                baseline :'top',
                                color:'#01b6ed',
                                fontSize:15
                            }
                        },
                        labelLine : {
                            show : false
                        }
                    }
                    }},
                    {name:'外来人口', value:[cd_data.rxqk011],itemStyle:labelTop
                    }
                ]
            }
        ]
    };

    myCharttPie.setOption(option_pie);
    window.addEventListener("resize", function () {
        myCharttPie.resize();
    });
};