水平柱状 - 多个echarts 配置项内容和展示

          var xData = ['技术A', '技术B', '技术C', '技术D', '技术E', '技术F', '技术G']
    var oneData = [130, 100, 190, 200, 100, 200, 320]
    var twoData = [3, 20, 62, 34, 55, 65, 33];
    var threeData = [110, 380, 230, 300, 600, 600, 700];
    var fourData = [140, 320, 330, 350, 420, 260, 170];
    let legend = ['2017', '2018', '2020', '2021'];
    var background = "#fff"; //背景 
    let textColor = "#000";
    let lineColor = "#cccccc";
    let colors = [{
        borderColor: "rgba(227,161,96,1)",
        start: "rgba(227,161,96,0.8)",
        end: "rgba(227,161,96,0.3)"
    }, {
        borderColor: "rgba(0,222,255,1)",
        start: "rgba(0,222,255,0.3)",
        end: "rgba(0,222,255,0.8)"
    }, {
        borderColor: "rgba(49,85,46,1)",
        start: "rgba(178,239,252,1)",
        end: "rgba(5,112,186,1)"
    }, {
        borderColor: "green",
        start: "green",
        end: "green"
    }];
    var option = {
        baseOption: {
            backgroundColor: background,
            timeline: {
                show: false,
                top: 0,
                data: []
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                bottom: '2%',
                right: 'center',
                itemWidth: 14,
                itemHeight: 14,
                itemGap: 30,
                icon: 'horizontal',
                textStyle: {
                    color: '#cccccc',
                    fontSize: 14,
                },
                data: legend
            },
            grid: [{
                show: false,
                left: '2%',
                top: '10%',
                bottom: '8%',
                containLabel: true,
                width: '20%'
            }, {
                show: false,
                left: '25%',
                top: '10%',
                bottom: '8%',
                containLabel: true,
                width: '20%'
            }, {
                show: false,
                left: '50%',
                top: '10%',
                bottom: '8%',
                containLabel: true,
                width: '20%'
            }, {
                show: false,
                left: '75%',
                top: '10%',
                bottom: '8%',
                containLabel: true,
                width: '20%'
            }],
            xAxis: [{
                gridIndex: 0,
                type: 'value',
                inverse: false,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: lineColor
                    }
                },
                axisTick: {
                    show: false
                },
                position: 'bottom',
                axisLabel: {
                    show: false,
                    color: textColor
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: lineColor
                    }
                },
            }, {
                gridIndex: 1,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: lineColor
                    }
                },
                axisTick: {
                    show: false
                },
                position: 'bottom',
                axisLabel: {
                    show: false,
                    color: textColor
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: lineColor
                    }
                },
            }, {
                gridIndex: 2,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: lineColor
                    }
                },
                axisTick: {
                    show: false
                },
                position: 'bottom',
                axisLabel: {
                    show: false,
                    color: textColor
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: lineColor
                    }
                },
            }, {
                gridIndex: 3,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: lineColor
                    }
                },
                axisTick: {
                    show: false
                },
                position: 'bottom',
                axisLabel: {
                    show: false,
                    color: textColor
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: lineColor
                    }
                }
            }],
            yAxis: [{
                gridIndex: 0,
                type: 'category',
                inverse: true,
                position: 'left',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: lineColor
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    // padding: [10, 0, 0, 0],
                    textStyle: {
                        color: 'true',
                        fontSize: 15
                    },
                    align: "right"
                },
                data: xData
            }, {
                gridIndex: 1,
                type: 'category',
                inverse: true,
                position: 'left',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: lineColor
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                data: xData
                // data: xData.map(function(value) {
                //     return {
                //         value: value,
                //         textStyle: {
                //             align: 'center'
                //         }
                //     }
                // })
            }, {
                gridIndex: 2,
                type: 'category',
                inverse: true,
                position: 'left',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: lineColor
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                data: xData
            }, {
                gridIndex: 3,
                type: 'category',
                inverse: true,
                position: 'left',
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: lineColor
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                data: xData
            }],
            series: []
        },
        options: []
    }

    option.options.push({
        series: [{
            name: "2017",
            type: "bar",
            barWidth: 25,
            xAxisIndex: 0,
            yAxisIndex: 0,
            stack: "1",
            data: oneData,
        }, {
            name: "2018",
            type: "bar",
            stack: "2",
            barWidth: 25,
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: twoData,
        }, {
            name: "2020",
            type: "bar",
            stack: "3",
            barWidth: 25,
            xAxisIndex: 2,
            yAxisIndex: 2,
            data: threeData,
        }, {
            name: "2021",
            type: "bar",
            stack: "4",
            barWidth: 25,
            xAxisIndex: 3,
            yAxisIndex: 3,
            data: fourData,
        }, ]
    });