Echarts柱状图实现

<script src="${ctxStatic}/echarts/echarts.js" type="text/javascript"></script>  
    <script src="${ctxStatic}/echarts/esl.js" type="text/javascript"></script>  
    <script type="text/javascript">
    $(document).ready(function() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        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,
                xAxis : [
                    {
                        type : 'category',
                        data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'出库量',
                        type:'bar',
//                         data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                        data:[],
                        itemStyle:{
                            normal:{
                                color:'#FF4500'
//                                     color:'#6699CC'
//                                     color:'#CCFF99'
                            }
                        },
//                         markPoint : {
//                             data : [
//                                 {type : 'max', name: '最大值'},
//                                 {type : 'min', name: '最小值'}
//                             ]
//                         },
                        markLine : {
                            data : [
                                {type : 'average', name: '平均值'}
                            ]
                        }
                    },
                    {
                        name:'入库量',
                        type:'bar',
//                         data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                        data:[],
                        itemStyle:{
                            normal:{
                                color:'#FF00FF'
//                                     color:'#663366'
                            }
                        },
//                         markPoint : {
//                             data : [
//                                 {type : 'max', name: '最大值'},
//                                 {type : 'min', name: '最小值'}
//                             ]
//                         },
                        markLine : {
                            data : [
                                {type : 'average', name : '平均值'}
                            ]
                        }
                    },
                    {
                        name:'在库量',
                        type:'bar',
//                         data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                        data:[],
                        itemStyle:{
                            normal:{
                                color:'green'
                            }
                        },
                        markPoint : {
                            data : [
                                {type : 'max', name: '最大值'},
                                {type : 'min', name: '最小值'}
                            ]
                        },
                        markLine : {
                            data : [
                                {type : 'average', name : '平均值'}
                            ]
                        }
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option,true);
            getdata();
            
                function getdata() {    
                   $.ajax({
                    type: "post",
                    url: "${ctx}/yuqian/yqWuliaokucunReport/reportList?materialType="+$("#materialType").val(),
                    dataType: "json",
                    success: function(data){
                            var result=eval(data);
                               option.series[0].data=result[0];
                               option.series[1].data=result[1];
                               option.series[2].data=result[2];
                               myChart.hideLoading();
                           myChart.setOption(option);
                      },
                      error: function (errorMsg) {
                              alert("不好意思，大爷，图表请求数据失败啦!");
                          }
                    });   
                  }          
    });

    </script>

<div id="main" style="height:500px;border:1px solid white;padding:10px;">