Echars 生成柱状图

导包<!-- echart -->
    <script type="text/javascript" src="${ctxStatic}/echarts-2.2.7/build/dist/echarts-all.js" ></script>

 <script type="text/javascript">

  $(document).ready(function(){
            var h = $(document).height();
              var w =    $(document).width();
            $("#oBar").attr("style","width:"+w*0.33+"px;height:"+h*0.68+"px;margin-top: 0px;");
            echartData();
        }); 

 

function echartData(){ 
            var barxValue = new Array();  
            var baryValue = new Array(); 

   $.post("${ctx}/sys/m/feeBar",
                function(data) {
                    barxValue.length=0;
                    baryValue.length=0;
                    var json = data;
                    $(json).each(function(index, obj) {
                        baryValue.push(obj.userName);  
                        barxValue.push(-obj.fee);  
                });
                var title = "欠费电量（度）";
//                 baryValue.sort(function(a,b){return a-b})
                barChart(barxValue.sort(function(a,b){return a-b}),baryValue.sort(function(a,b){return a-b}),title);
            }); 

}

function barChart(xArray,yArray,title){  

               var x = xArray;
               var y = yArray;
               var title = title;
            if(title == "欠费电量（度）"){
                   var barChart1 = document.getElementById("oBar");  
                var barechart = echarts.init(barChart1);  
            }else if(title == "使用电量（度）"){
                var barChart = document.getElementById("sBar");  
                var echart = echarts.init(barChart);  
            }
            var option = {
                    color : ['#3cb371', '#b8860b', '#30e0e0'],//修改图形颜色
                    title : {
//                         text: '世界人口总量',
//                         subtext: '数据来自网络'
//                          link:'www.baidu.com' // 主标题超链接
                    },
                    tooltip : {
                        trigger: 'item',  
                        formatter: "{a}  : {c} "
                    },
                    legend: {
                        data:[title],  
                        y:"top",
                        padding:15
                    },
                    toolbox: {
                        show : false,
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            magicType: {show: true, type: ['line', 'bar']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
//                     calculable : true, //是否启用拖拽重计算特性，默认关闭，
                    grid: {
                        borderWidth: 0,
                        x:95,
                        x2:40,
                        y: 50,
                        y2: 40
                    },
                    xAxis : [
                        {
                            type : 'value',//设置x为纵轴 来实现横向显示柱状图 value=纵轴
                            boundaryGap : [0, 0.01]
//                             boundaryGap : false
                        }
                       
                    ],
                    yAxis : [
                        {
                            type : 'category',
                            data : y,
                            axisLabel:{//让Y轴自动换行
                                formatter:function(params){
                                       var newParamsName = "";//返回的字符串
                                        var paramsNameNumber = params.length;//获得字符串长度
                                        var provideNumber = 7;//每行显示的长度
                                        var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
                                        //进行判断换行
                                        if (paramsNameNumber > provideNumber) {
                                            for (var p = 0; p < rowNumber; p++) {
                                                var tempStr = "";
                                                var start = p * provideNumber;
                                                var end = start + provideNumber;
                                                if (p == rowNumber - 1) {
                                                    tempStr = params.substring(start, paramsNameNumber);
                                                } else {
                                                    tempStr = params.substring(start, end) + "\n";
                                                }
                                                newParamsName += tempStr;
                                            }

                                        } else {
                                            newParamsName = params;
                                        }
                                        return newParamsName
                                }
                            }
//                             data : ["掌握主动","博大网通","罗伯特","燕园校友","脉极客","中华科技","logYaoDa","头条","德州","水族馆"]//这里放前十名用户名desc
                        }
                    ],
                    series : [
                        {
                            name: title,
                            type: 'bar',
                            data: x ,// 这里放电量数据
                            itemStyle: {
                                normal: {
                                    color: 'tomato',
                                    label : {
                                        show: true, position: 'insideRight'
                                    }
                                }
                            }
                        }
                    ]
              };
              if(title == "欠费电量（度）"){
                  barechart.setOption(option);  
              }else if(title == "使用电量（度）"){
                  echart.setOption(option);  
              }

       };

 </script > 

JSP 写

    <div id="oBar" >
                </div>