ajax加载Echarts加载柱状图

加载柱状图

第一步，获取数据转换为数组
第二步 设置option初始化echarts图表

  var myChart = echarts.init(document.getElementById('main'));

第三部，数组数据加载到option；
第四部 为echarts对象加载数据

 myChart.setOption(option);

Echarts案列：http://echarts.baidu.com/echarts2/doc/example

Echarts文档说明：http://echarts.baidu.com/echarts2/doc

 <div id="main" style="width:1000px;height:800px">
            <script src="~/Content/scripts/jquery-1.10.2.min.js"></script>
            <script type="text/javascript" src="~/Content/lib/echarts/echarts.min.js"></script>
            <script type="text/javascript">                      
                        $.ajax({
                            url: "/Report/PopulationBar",
                            type: "POST",
                            success: function (data) {
                                var compony = [];
                                var man = [];
                                var woman = [];
                                var m=0;
                                var w=0;
                                for (var i = 0; i < data.length; i++) {
                                    //第一步，获取数据转换为数组
                                    if (data[i].GESCHTXT=="男"){
                                        man[m]=data[i].数量;     //男的数量加载到数组中
                                       
                                        m++;
                                    }
                                    if (data[i].GESCHTXT=="女"){
                                        woman[w] = data[i].数量;  //女的数量加载到数组中
                                        compony[w] = data[i].ORGEH1TXT;  //X轴的公司名称加载到数组中
                                        w++;
                                    }
                                }
                                //第二步 设置option初始化echarts图表
                                var myChart = echarts.init(document.getElementById('main'));

                                //第三部，数组数据加载到option；
                                option = {
                                    title: {
                                        text: '深科技员工数量',
                                        subtext: '人数'
                                    },
                                    tooltip: {
                                        trigger: 'axis'
                                    },
                                    legend: {
                                        data: ['男', '女']
                                    },
                                    toolbox: {
                                        show: true,
                                        feature: {
                                            mark: { show: true },
                                            dataView: { show: true, readOnly: false },
                                            magicType: { show: true, type: ['line', 'bar'] },
                                            restore: { show: true },
                                            saveAsImage: { show: true }
                                        }
                                    },
                                    calculable: true,
                                    //grid设置标签与底部距离，X轴文字过长显示不了
                                    grid: {
                                        left: '10%',
                                        bottom: '10%'
                                    },
                                    xAxis: [
                                        {
                                            type: 'category',
                                            data: compony,
                                            //axisLabel标签设置X轴文字间隔与倾斜度
                                            axisLabel: {
                                                interval: 0,
                                                rotate: -10,                                               
                                            },                                        
                                        }
                                    ],
                                    yAxis: [
                                        {
                                            type: 'value'
                                        }
                                    ],
                                    series: [
                                        {
                                            name: '男',
                                            type: 'bar',
                                            data: man, //加载Y轴数据，男的数量
                                            markPoint: {
                                                data: [
                                                    { type: 'max', name: '最大值' },
                                                    { type: 'min', name: '最小值' }
                                                ]
                                            },
                                            markLine: {
                                                data: [
                                                    { type: 'average', name: '平均值' }
                                                ]
                                            }
                                        },
                                        {
                                            name: '女',
                                            type: 'bar',
                                            data: woman,  //加载Y轴数据，女的数量
                                            markPoint: {
                                                data: [
                                                    { type: 'max', name: '最大值' },
                                                    { type: 'min', name: '最小值' }
                                                ]
                                            },
                                            markLine: {
                                                data: [
                                                    { type: 'average', name: '平均值' }
                                                ]
                                            }
                                        }
                                    ]
                                };

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

效果如下：