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