echarts通过ajax加载数据渲染图表（堆叠条形图）

堆叠条形图

官网示例

官网示例链接

后台返回数据类型

实现echarts效果要求的数据类型

代码部分

分析：X轴月数据
Y轴申请数量
填充数据为—每个月中测试、正式数据量堆叠图形
HTML

 <div class="applicationSituation">
      <div class="applicationSituationTop">License申请情况</div>
      <div class="applicationSituationMain" id="barAsm"></div>
  </div>

JS

  var barEchartsAsm = echarts.init(document.getElementById('barAsm'));
        barEchartsAsm.setOption({
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c}"
            },
            legend: {
                data: []
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis:  {
                type: 'category',
                data: []
            },
            yAxis: {
                type: 'value',
            },
            series: [
            ]
        });
        /**licence申请情况 ajax S */
        barEchartsAsm.showLoading();    //数据加载完之前先显示一段简单的loading动画
        var applynames=[];//用来盛放x轴坐标值
        var applycata=[];//用来盛放申请类型
        $.ajax({
            url: $treeBasePath+"/count/queryApplicationuseGroupByMon",
            data: {},
            datatype: "json",
            type: "post",
            async: true,
            success: function (result) {
                console.log("首页licence申请情况==",result);
                if(result.STATUS=="success") {
                    var resdata=result.RESULT.list;
                    var colordata = ['#73ccd6','#77a8e2']
                    var seriesdata = []; //用于拼接到echarts图形里面的数据
                if(resdata.length>0){
                        //取出 x轴显示月份和分类类型
                        $.each(resdata,function(index,element){
                        //去重,没有返回-1 indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
                            if(applycata.indexOf(element.applicationuse) == -1){ 
                                applycata.push(element.applicationuse);
                            }
                            if(applynames.indexOf(element.months) == -1){
                                applynames.push(element.months);
                            }
                        });
                        //tmpo 需要往series中拼接的数据
                        $.each(applycata,function (index,elemennt) {
                            var json = {};
                            var tmpo = {
                                name:elemennt,
                                type:'bar',
                                stack: '总量',
                                label:{
                                    normal: {
                                        show: true,
                                        position: 'insideRight'
                                    }
                                },

                            };
                           //循环所有数据，判断每条数据所属类型
                            $.each(resdata,function (index,ele) {
                                if(ele.applicationuse == elemennt){
                                    //如果属于当前类型，给这个x轴赋对应数据
                                    json[ele.months] =ele.num;
                                }
                            });
                            //循环x轴数据，如果这个数据没有对应的x轴，则为0
                            $.each(applynames,function (index,month) {
                                if(!json[month]){
                                    json[month] = 0;
                                }
                            });
                            //相当于排序输出结果
                            var data = [];
                            $.each(applynames,function (index,month) {
                                for(var k in json){
                                    if(k == month){
                                        data.push(json[month]);
                                    }
                                }
                            });
                           tmpo.data = data;
                           seriesdata.push(tmpo);
                        })
                        console.log("applynames--",applynames);
                        console.log("applycata--",applycata);
                        barEchartsAsm.hideLoading();    //隐藏加载动画
                        barEchartsAsm.setOption({
                            color:colordata,
                            legend: {
                                data: applycata
                            },
                            xAxis:  {
                                type: 'category',
                                data: applynames
                            },
                            series: seriesdata
                        })
                    }
                }
            }
        });
        /**licence申请情况 ajax E*/

最终展示效果