載入柱狀圖

第一步，獲取資料轉換為陣列
第二步 設定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>
 

效果如下：