之前，上篇发过树状图，饼状图，都是一层数据展示，今天，项目需求，多层数据树状展示，本篇为基础，简单封装，上手即用，共勉！

文章最后附下载地址。

如图展示：

// echartsFn.js  中封装代码//柱状图 横轴 多层数据var crossBarChart=function (boxId,grid,legend,xAxisData,yAxisData,crossName_one,color_one,dataArr_one,crossName_two,color_two,dataArr_two) {    my_chart = echarts.init(document.getElementById(boxId), 'shine');    var option = {        // title: {        //     text: title,        //     x: 'center',        //     textStyle:{        //         fontWeight:'bold',        //     }        //        // },        grid: grid,        tooltip : {            trigger: 'axis',            axisPointer : {            // 坐标轴指示器，坐标轴触发有效                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'            }        },        legend: {            orient: 'vertical',            left: 'left',            bottom: 0,            padding:[90,0,0,50],            data:legend,        },        xAxis: xAxisData,        yAxis: yAxisData,        series: [            {                name: crossName_one,                type: 'bar',                // barWidth:'50%',                //颜色                itemStyle:{                    normal:{                        color:color_one,                    }                },                data: dataArr_one            },            {                name: crossName_two,                type: 'bar',                // barWidth:'50%',                //颜色                itemStyle:{                    normal:{                        color:color_two,                    }                },                data: dataArr_two            },          //第三层 、第四层            //  {            //     name: crossName_three,            //     type: 'bar',            //     // barWidth:'50%',            //     //颜色            //     itemStyle:{            //         normal:{            //             color:color_three,            //         }            //     },            //     data: dataArr_three            // },        ]    };    // 添加一个定时器给window注册一个onresize事件，给图表加resize（）方法  就可以实现宽高自适应了    // dataArr.length为柱状图的条数，即数据长度。35为给每个柱状图的高度，50为柱状图x轴内容的高度(大概的)。    my_chart.resize({height: dataArr_one.length*35+260});    my_chart.resize({height: dataArr_two.length*35+260});    // };    my_chart.setOption(option);}

模拟数据代码：

let statisticalData = [];   // 未处理数组合并    let statistical_table = $(".shop_violations_table").empty();  //获取table加载清空，接下来增加数据    let registered_total = 0; //已处理    let part_total=0; //已登记    let have_total=0; //累计    var cross_grid = {left: '3%', right: '3%', bottom: '10%', top:'2%',containLabel: true};  //如果多层 继续追加数据    let legend=['已处理', '已登记'];    let crossName_one='已处理';    let crossName_two='已登记';    let mouth_cont= ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]    let dataArr_one=[100, 200, 50, 70, 60, 0, 0, 200, 40, 19, 29, 80];    let dataArr_two=[4, 20, 80, 80, 50, 70, 40, 110, 10, 19, 29, 30];    crossBarChart('statistical_content',cross_grid,legend, {}, axisData(mouth_cont),crossName_one,"#37a2da",dataArr_one,crossName_two,"#ffd85c",dataArr_two);    $.each(mouth_cont, function (index, item) {        statisticalData.push({            department: item, //部门            No_deal: dataArr_one[index], //未处理            Part_deal:dataArr_two[index], //部分处理            cont_deal:dataArr_one[index]+dataArr_two[index],        });        console.log(dataArr_one[index]+dataArr_two[index])    });    console.log(statisticalData);    statistical_table.append('<tr><td>月份</td><td>已处理</td><td>已登记</td><td>累计</td></tr>');    // 渲染商户违规table表格    $.each(statisticalData, function () {        let tr = '<tr><td>' + this.department + '</td><td>' + this.No_deal + '</td><td>' + this.Part_deal + '</td><td>' + this.cont_deal + '</td></tr>';        statistical_table.append(tr);        // 已处理总和        registered_total += this.No_deal;        //已登记        part_total+=this.Part_deal;        //累计        have_total+=this.cont_deal;    });    // 渲染增加数据商户违规月度次数总计    statistical_table.append('<tr><td colspan="5" class="total_txt">公司整体：已处理'+registered_total+'起   已登记'+part_total+'起   累计'+have_total+'起</td></tr>');

源代码地址：