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 : '平均值'}

                            ]

                        }

                    }

  
a3c1
             ]

            };

            // 使用刚指定的配置项和数据显示图表。

            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;">