二次封装快捷实现Echarts可视化图表

ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。
现在将实际项目中用到的 柱状图的js统一封装，有效解决了多图表页面前端代码繁琐以及ajax请求次数较多的问题，步骤以及代码粘贴如下：
第一步：引入以下js：
【可以上网上下载】
第二步：新建js，复制下面代码然后引入：
function initEcharts(containerId,titleText, subTitleText,legendArray,xArray,yName,colorArray,dataArray,nameArray) {  
        var seriesInfo =new Array();
        if(nameArray !=undefined && nameArray.length>0){
                $.each(nameArray, function(i,o) {
                        var seriesItem={
                                name:nameArray ,
                                type:'bar',
                                data:dataArray,
                                itemStyle: {
                                        normal: {
                                                color: colorArray
                                        }
                                }
                        };
                        seriesInfo.push(seriesItem);
                });
        }
       
        var option={
                title:{text: titleText,x:'left',subtext: subTitleText},
                tooltip:{trigger: 'item',formatter: "{a}
{b} : {c}"},
                legend: {data:legendArray},
                xAxis:[{
                        type : 'category',
                        data : xArray,
                        axisLabel: {rotate: 30, interval:0},
                }],
                yAxis : [{type : 'value',name : yName }],
                toolbox: {  
            show : true,  
            feature : {  
                mark : {show: true},  
                dataView : {show: true, readOnly: false},  
                restore : {show: true},  
                saveAsImage : {show: true}  
            }  
        },  
        calculable : true,
        series:seriesInfo
        }
       
        var myChart = echarts.init(document.getElementById(containerId));// 图表初始化的地方，在页面中要有一个地方来显示图表，他的ID是main  
   // option = getOptionByArray(json, reportDesign);//得到option图形  
    myChart.setOption(option); //显示图形  
       
}
第三步：ajax请求后台数据：
function getJson(){
                        var arr=[];
                        $.ajax({
                                type : "get",
                    async : false, //同步执行
                    url : "${ctx}/wb/getCatalogStatistic",
                    data : {},
                    dataType : "json", //返回数据形式为json
                    success : function(result) {
                            if (result) {
                                    var deptName=[];
                                    var catlogDraftCount=[];//待注册
                                    var catlogRegistCount=[];//待审核
                                    var catlogApproveCount=[];//待发布
                                    var catlogPublishCount=[];//已发布
                                    for(var i=0;i                                             deptName.push(result.DEPT_NAME);
                                            catlogDraftCount.push(result.CATALOG_DRAFT_COUNT);
                                            catlogRegistCount.push(result.CATALOG_REGIST_COUNT);
                                            catlogApproveCount.push(result.CATALOG_APPROVE_COUNT);
                                            catlogPublishCount.push(result.CATALOG_PUBLIST_COUNT);
                                    }
                                    arr.push(deptName);
                                    arr.push(catlogDraftCount);
                                    arr.push(catlogRegistCount);
                                    arr.push(catlogApproveCount);
                                    arr.push(catlogPublishCount);
                            }

                    },
                    error : function(errorMsg) {
                            alert("图表请求数据失败!");
                            myChart.hideLoading();
                    }
                });
第四步：直接传值调用，在页面多次复用

看看你的jsp代码是不是少了许多行？？