四时宝库

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

文章最后附下载地址。

如图展示：

// 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>');

源代码地址：https://github.com/Skingsking/echarts_demo/tree/main/echarts_twoArry/echartsFn