echarts 图表X轴加滚动条，调整柱子间隙和宽度

//初始化echarts
        echartsInit() {
            //柱形图
            //因为初始化echarts 的时候，需要指定的容器 id='main'
            
            this.$echarts.init(document.getElementById('bottom')).setOption({
                
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: this.levelOptionss,
                },
                color : [ '#22AE98','#AAF1DF','#3EB2FF','#A2D2FF','#DFECEF','#D73A57','#FF636E','#FFBCBB','#FF8243','#FFB21B','#FFE194' ],
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar', 'stack'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: { show: false },
                        data: this.areaList,
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                dataZoom: [{
                    type: 'slider',
                    show: true,
                    xAxisIndex: [0],
                    left: '9%',
                    bottom: -5,
                    start: 0,
                    end: 100 //初始化滚动条
                }],
                series: [
                    {
                        name: '幼儿园',
                        type: 'bar',
                        // barGap: 0,
                        // label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: this.dataList,
                        barWidth:10,
                        barGap:0,
                    },
                    {
                        name: '小学',
                        type: 'bar',
                        // label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: this.dataList1,
                        barWidth:10,
                        barGap:0,
                    },
                    {
                        name: '九年一贯',
                        type: 'bar',
                        // label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data:this.dataList2,
                        barWidth:10,
                        barGap:0,
                    },
                    {
                        name: '普通初中',
                        type: 'bar',
                        // label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: this.dataList3,
                        barWidth:10,
                        barGap:0,
                    },
                    {
                        name: '完全中学',
                        type: 'bar',
                        // label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: this.dataList4,
                        barWidth:10,
                        barGap:0,
                    },
                    {
                        name: '高级中学',
                        type: 'bar',
                        // label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: this.dataList5,
                        barWidth:10,
                        barGap:0,
                    },
                    {
                        name: '职业学校',
                        type: 'bar',
                        // label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: this.dataList6,
                        barWidth:10,
                        barGap:0,
                    },
                    {
                        name: '其他学校',
                        type: 'bar',
                        // label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: this.dataList7,
                        barWidth:10,
                        barGap:0,
                    },
                    {
                        name: '十二年制',
                        type: 'bar',
                        // label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: this.dataList8,
                        barWidth:10,
                        barGap:0,
                    },
                    {
                        name: '技工学校',
                        type: 'bar',
                        // label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: this.dataList9,
                        barWidth:10,
                        barGap:0,
                    },
                    {
                        name: '九年制',
                        type: 'bar',
                        // label: labelOption,
                        emphasis: {
                            focus: 'series'
                        },
                        data: this.dataList10,
                        barWidth:10,
                        barGap:0,
                    },

                ]

            })  
        }

 

this.dataList = [ '0.1', '10', '20', '30', '40', '23', '50', '60', '70', '80', '90' ]
                    this.dataList1 = [ '17', '10', '20', '30', '40', '23', '50', '60', '70', '80', '90' ]
                    this.dataList2 = [ '17', '10', '20', '30', '40', '23', '50', '60', '70', '80', '90' ]
                    this.dataList3 = [ '17', '10', '20', '30', '40', '23', '50', '60', '70', '80', '90' ]
                    this.dataList4 = [ '17', '10', '20', '30', '40', '23', '50', '60', '70', '80', '90' ]
                    this.dataList5 = [ '17', '10', '20', '30', '40', '23', '50', '60', '70', '80', '90' ]
                    this.dataList6 = [ '17', '10', '20', '30', '40', '23', '50', '60', '70', '80', '90' ]
                    this.dataList7 = [ '17', '10', '20', '30', '40', '23', '50', '60', '70', '80', '90' ]
                    this.dataList8 = [ '17', '10', '20', '30', '40', '23', '50', '60', '70', '80', '90' ]
                    this.dataList9 = [ '17', '10', '20', '30', '40', '23', '50', '60', '70', '80', '90' ]
                    this.dataList10 = [ '17', '10', '20', '30', '40', '23', '50', '60', '70', '80', '90' ]

 

//图表数据
            dataList : [],
            dataList1 : [],
            dataList2 : [],
            dataList3 : [],
            dataList4 : [],
            dataList5 : [],
            dataList6 : [],
            dataList7 : [],
            dataList8 : [],
            dataList9 : [],
            dataList10 : [],