树状图echarts 配置项内容和展示

      option = {
    backgroundColor:'#fff',
    tooltip: {
        show: "true",
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        },
        formatter: function(params) {
            let res = '';
            params.forEach((v, i) => {
                if (i <= 2) {
                    res += `<div>${v.marker} ${ v.seriesName }：${v.data}</div>`
                }
            })
            return res;
        }
    },
    yAxis: [{
        type: "value",
        name: '',
        splitNumber: 6,
        axisLabel: {
            textStyle: {
                color: "#333"
            }
        },
        nameTextStyle: {
            color: "#fff",
            fontSize: 12
        },
        splitLine: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: "#e9e9e9"
            }
        },
        axisTick: {
            show: false
        }
    }],
    xAxis: [{
        type: 'category',
        axisTick: {
            show: false
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: '#e9e9e9',
            }
        },
        axisLabel: {
            inside: false,
            textStyle: {
                color: '#333',
                fontWeight: 'normal',
                fontSize: 12,
            }
        },
        data: ['09-21', '09-22', '09-23']
    }, {
        type: 'category',
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            show: false
        },
        splitArea: {
            show: false
        },
        splitLine: {
            show: false
        },
        data: ['09-21', '09-22', '09-23']
    }],
    series: [{
            type: 'bar',
            xAxisIndex: 1,
            zlevel: 1,
            itemStyle: {
                normal: {
                    color: '#fff3d9'
                }
            },
            barWidth: 20,
            data: [30, 30, 30]
        }, {
            type: 'bar',
            xAxisIndex: 1,
            barGap: '50%',
            data: [30, 30, 30],
            zlevel: 1,
            barWidth: 20,
            itemStyle: {
                normal: {
                    color: '#ffead9'
                }
            },
        }, {
            type: 'bar',
            xAxisIndex: 1,
            barGap: '50%',
            data: [30, 30, 30],
            zlevel: 1,
            barWidth: 20,
            itemStyle: {
                normal: {
                    color: '#fee4e5'
                }
            },
        }, {
            name: '缺勤人数',
            type: 'bar',
            itemStyle: {
                normal: {
                    show: true,
                    color: '#ffb310',
                }
            },
            zlevel: 2,
            barWidth: 20,
            data: [8, 15, 10]
        }, {
            name: '旷课人数',
            type: 'bar',
            barWidth: 20,
            itemStyle: {
                normal: {
                    show: true,
                    color: '#ff7611',
                }
            },
            zlevel: 2,
            barGap: '50%',
            data: [22, 17, 24]
        }, {
            name: 'SOS报警人数',
            type: 'bar',
            barWidth: 20,
            itemStyle: {
                normal: {
                    show: true,
                    color: '#f55555',
                }
            },
            zlevel: 2,
            barGap: '50%',
            data: [16, 17, 26]
        }

    ]
};