【echarts】总结

【echarts】
1：为准备要显示的echarts的dom设一个固定的宽高度
2：在js中需要获取这个dom对象。
3：设置你的echarts属性option
4：将你的dom对象和option对应起来
【完整的案例，每个echarts都是option不一样】
   function educationBar(){
        console.log("博士&&&&&&&&&");
        $.ajax({
            type:'post',
            async:false,
            url: _ctx+'/project/kexie/outFunction/educationBar',
            dataType:'json',
            success:function(rs){
                if(rs.result==1){
                    console.log("博士="+rs.bCount);
                    var educationBar = echarts.init(document.getElementById('educationBar'));
                    var option = {
                        title:{text:''},
                        series:[{
                            name:'学历',
                            type:'pie',
                            data:[{
                                value:rs.bCount,
                                name:'博士'
                            },{
                                value:rs.sCount,
                                name:'硕士'
                            },{
                                value:rs.bkCount,
                                name:'本科'
                            },{
                                value:rs.zCount,
                                name:'专科'
                            },{
                                value:rs.gCount,
                                name:'高中'
                            },{
                                value:rs.cCount,
                                name:'初中'
                            },{
                                value:rs.xCount,
                                name:'小学'
                            }]
                        }]
                    };
                    educationBar.setOption(option);
                }
            }
        });
    }
【常见的echarts】
一、饼状图
 var option = {
                title:{text:''},
                series:[{
                    name:'学历',
                    type:'pie',
                    data:[{value:rs.bCount,name:'博士'}]
                }]
        };

var seriesData = [];
var obj = rs.data;
for(var i =0;i<obj.length;i++)
{
    seriesData.push(obj[i].series);
}

var option = {
    title: {
        left: 'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{b} : {c} ({d}%)"
    },
    series : [
        {
            type: 'pie',
            data:seriesData,
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

 二、柱状图
  var option = {
                title: {
                    text: rs.dayString
                },
                xAxis: {
                    type: 'category',
                    data: rs.name
               },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    barWidth: 20,
                    data: rs.value,//这个是填充y轴
                    type: 'bar'
                }]
  };
  三、折线图：这个属于另一种形式，就是先设计号模板，然后往里头填充数据
    var option = {
                        title: {
                            text: '异步数据加载示例'
                        },
                        tooltip: {},
                        legend: {
                            data:['销量']
                        },
                        xAxis: {
                            type:'time',
                            data: []
                        },
                        yAxis: {
                        },
                        series: [{
                            name: '人数'
                        }]
                    };
                    initiationBar.setOption({
                        xAxis: {
                            type:'category',
                            data: rs.name
                        },
                        yAxis: {
                            type:'value'/*,
                            data: rs.value*/
                        },
                        series: {
                            type:'line',
                            data: rs.value
                        },
                    });