echart条形堆叠图数据渲染

echart条形堆叠图数据渲染

html

<div id="harmResult"></div>

js

 function initAnnualRiskFactors() {
        // 危害因素结果图
        var harmResult = echarts.init(document.getElementById("harmResult"));
        option2 = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: [],
                y:20,
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
            },
            yAxis: {
                type: 'category',
                data: []
            },
            series: []
        };
        harmResult.setOption(option2);
        var yearS = [];
        var typeS = [];
        var typeName = [];
        $.ajax({
            type: 'post',
            url: "/sdc/jieKou?companyId=" +companyId,
            success: function (r) {
                if (r.code==0){
                    var colorData = ['#f04bfa','#02e7fb','#50c427','#5649f9','#fb9005','#fa5403'];
                    var seriesdata = [];
                    var resdata = r.data;
                    $.each(resdata,function (index,element) {
                        if(yearS.indexOf(element.time) == -1){
                            yearS.push(element.time);
                        }
                        if(typeS.indexOf(element.classifyId) == -1){
                        //我是因为后台没有传具体名称过来，你们有的可以直接传入数组
                            var name;
                            if(element.classifyId == 1){
                                name = '图例1'
                            }else if(element.classifyId == 2){
                                name = '图例2'
                            }else if(element.classifyId == 3){
                                name = '图例3'
                            }else if(element.classifyId == 4){
                                name = '图例4'
                            }else if(element.classifyId == 5){
                                name = '图例5'
                            }else if(element.classifyId == 6){
                                name = '图例6'
                            }
                            typeS.push(element.classifyId);
                            typeName.push(name);
                        }
                    })
                    $.each(typeS,function (index,element) {
                        var name2;
                        if(element == 1){
                            name2 = '图例1'
                        }else if(element == 2){
                            name2 = '图例2'
                        }else if(element == 3){
                            name2 = '图例3'
                        }else if(element == 4){
                            name2 = '图例4'
                        }else if(element == 5){
                            name2 = '图例5'
                        }else if(element == 6){
                            name2 = '图例6'
                        }
                        var json = {};
                        var tmpo = {
                            name:name2,
                            type:'bar',
                            stack: '总量',
                            label: {
                                show: true,
                                position: 'insideRight'
                            },
                        };
                        $.each(resdata,function (index,ele) {
                            var nameId;
                            if(ele.classifyId == 1){
                                nameId = '图例1'
                            }else if(ele.classifyId == 2){
                                nameId = '图例2'
                            }else if(ele.classifyId == 3){
                                nameId = '图例3'
                            }else if(ele.classifyId == 4){
                                nameId = '图例4'
                            }else if(ele.classifyId == 5){
                                nameId = '图例5'
                            }else if(ele.classifyId == 6){
                                nameId = '图例6'
                            }
                            if(ele.classifyId == element){
                                json[ele.time] = ele.total;
                            }
                        })
                        $.each(yearS,function (index,date) {
                            if(!json[date]){
                                json[date] = '';
                            }
                        })
                        var data = [];
                        $.each(yearS,function (index,date) {
                            for(var k in json){
                                if(k == date){
                                    data.push(json[date]);
                                }
                            }
                        })
                        tmpo.data = data;
                        seriesdata.push(tmpo);
                    })
                    harmResult.setOption({
                        color:colorData,
                        legend:{
                            data:typeName,
                            y:20,
                        },
                        yAxis:{
                            type: 'category',
                            data:yearS
                        },
                        series:seriesdata
                    })
                }

            }
        });
    }