x轴滚动条echarts 柱状配置项内容和展示

x轴数据过多添加滚动条

      option = {
    title: {
        text: 'x轴滚动条'
    },
    xAxis: {
        type: 'category',
        triggerEvent: true,
        data: [
            '张三1收入支出',
            '小明1',
            '张三2收入支出',
            '张三3收入支出',
            '小明2',
            '张三4收入支出',
            '张三5收入支出',
            '张三6收入支出',
            '小明3',
            '张三7收入支出',
            '张三8收入支出',
            '张三9收入支出',
            '张三10收入支出',
            '张三11收入支出',
            '张三12收入支出',
            '张三13收入支出',
            '张三14收入支出',
            '张三15收入支出',
            '张三16收入支出',
            '张三17收入支出',
            '张三18收入支出',
            '张三19收入支出',
            '张三20收入支出',
            '张三21收入支出',
            '张三22收入支出',
            '张三23收入支出',
            '张三24收入支出',
            '张三25收入支出',
            '张三26收入支出',
            '张三27收入支出',
            '张三28收入支出',
            '张三29收入支出',
            '张三30收入支出',
            '张三31收入支出',
            '张三32收入支出',
            '张三33收入支出',
            '张三34收入支出',
            '张三35收入支出',
            '张三36收入支出',
            '张三37收入支出',
            '张三38收入支出',
            '张三39收入支出',
            '张三40收入支出',
            '张三41收入支出',
            '张三42收入支出',
            '张三43收入支出',
            '张三44收入支出',
            '张三45收入支出',
            '张三46收入支出',
            '张三47收入支出',
            '张三48收入支出',
        ],
        axisLabel: {
            interval: 0,
            formatter: function (value) {
                if (value.length > 4) {
                    return value.slice(0, 4) + '...';
                } else {
                    return value;
                }
            },
        },
    },
    yAxis: {
        type: 'value',
    },
    dataZoom: [
        {
            show: true,
            height: 5,
            xAxisIndex: [0],
            bottom: 20,
            showDetail: false,
            borderColor: 'transparent',
            textStyle: {
                fontSize: 0,
            },
            endValue: 10, //从0开始的相当于5个
            backgroundColor: 'rgba(0,0,0,0)',
            borderWidth: 0,
            handleSize: '0%',
            handleStyle: {
                color: '#d3dee5',
            },
        },
    ],
    series: [
        {
            barGap: '0%',
            data: [
                22,
                111,
                88,
                22,
                90,
                54,
                111,
                120,
                200,
                150,
                80,
                70,
                110,
                130,
                120,
                200,
                150,
                80,
                70,
                110,
                130,
                120,
                200,
                150,
                80,
                70,
                110,
                130,
                200,
                111,
            ],
            type: 'bar',
        },
        {
            data: [
                120,
                90,
                150,
                80,
                70,
                110,
                11,
                123,
                123,
                111,
                99,
                88,
                77,
                66,
                55,
                33,
                99,
                55,
                66,
                77,
                34,
                111,
                145,
                99,
                88,
                44,
                66,
                11,
                222,
                123,
            ],
            type: 'bar',
        },
    ],
};